最简单的，你可以引用bootstrap，bootstrap里有封装好的左右轮播图。希望可以帮到你！
网站的建设创新互联公司专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都发电机回收等企业提供专业服务。
//200多个插件如下 实际开发中 请选择合适的使用
1：文件上传类jQuery插件
Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.
2：表单验证类jQuery插件
jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.
3:表单选择框类jQuery插件
jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).
4:表单基本、输入框、选择框等jQuery插件
jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.
5:时间、日期和颜色选取类jQuery插件
jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.
6:投票类jQuery插件
jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.
7:搜索类jQuery插件
jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHPMySQL).
quick Search jQuery Plugin.
8:jQuery编辑器插件
jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.
9:多媒体、视频、Flash等类jQuery插件
jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.
图片类jQuery插件
ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.
10:Google地图类jQuery插件应用
jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.
11:游戏类jQuery插件
Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).
12:表格,网格类jQuery插件
UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.
13:统计类jQuery插件
jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.
14:边框、圆角、背景类jQuery插件
jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.
14:文字和超链接类jQuery插件
jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin.
LinkLook – a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.
15:文本提示类jQuery插件
jQuery Plugin – Tooltip.
jTip – The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.
16:菜单和导航类jQuery插件
jQuery Tabs Plugin – awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu – Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.
17:幻灯片、手风琴特效类jQuery插件
jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion – a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo – Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.
18:拖放类jQuery插件
UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR – drag, drop resize.
Drag Demos.
19:XML XSL JSON Feeds相关jQuery插件
XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier – Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite – multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.
20:浏览器
Wresize – IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber – removes the dotted line onfocus from links.
jQuery Perciformes – the entire suckerfish familly under one roof.
Background Iframe.
QinIE – for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.
21:警告, 提示, 确认等对话框
jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.
CSS
jQuery Style Switcher.
JSS – Javascript StyleSheets.
jQuery Rule – creation/manipulation of CSS Rules.
jPrintArea.
22:DOM、AJAX和其它JQuery插件
FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata – extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat – periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it – display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy – awesome plugin.
Effect Delay Trick.
jQuick – a quick tag creator for jQuery..
你给每个可拖拽的div加一个class如果如：
左右容器的class：class_tz_left 和 class_tz_right
可拓展元素的class：class_child
然后在拖拽之前判断
if($(".class_tz_left ").find(".class_child").length1){//判断左侧class_child是否大于1个
//可拖拽
}else{
//如果不大于一个那么左侧就不可拖拽
}
右侧写法与上同理
EasyUI
简介
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
在后台管理系统开发的过程中，上左右的布局是最常见的页面布局方式，现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架。
1.在页面中引入easyui所需的文件
%--
加载easyui的样式文件，bootstrap风格
--%
link
href="${ctx
}/css/themes/bootstrap/easyui.css"
rel="stylesheet"
link
href="${ctx
}/css/themes/icon.css"
rel="stylesheet"
%--
加载jquery和easyui的脚本文件
--%
script
src="${ctx
}/js/jquery-easyui-../jquery.min.js"/script
script
src="${ctx
}/js/jquery-easyui-../jquery.easyui.min.js"/script
script
src="${ctx
}/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"/script
2.在页面body部分构建必要的html结构
body
div
id="home-layout"
!--
页面北部，页面标题
--
div
data-options="region:'north'"
style="height:50px;"
!--
add
your
code
--
/div
!--
页面西部，菜单
--
div
data-options="region:'west',title:'菜单栏'"
style="width:200px;"
div
class="home-west"
ul
id="home-west-tree"/ul
/div
/div
!--
页面中部，主要内容
--
div
data-options="region:'center'"
div
id="home-tabs"
div
title="首页"
h2
style="text-align:
center"欢迎登录/h2
/div
/div
/div
/div
/body
这里需要注意一点：easyui在使用layout布局的时候，north、south需要指定高度，west、east需要指定宽度，而center会自动适应高和宽。
3.使用js初始化easyui组件
我个人比较推荐使用js代码去初始化easyui组件，而不使用easyui标签中的data-options属性去初始化。因为对于后台开发人员来说，写js代码可能比写html标签更加熟悉，而且这样使得html代码更加简洁。
script
$(function(){
/*
*
初始化layout
*/
$("#home-layout").layout({
//使layout自适应容器
fit:
true
});
/*
*
获取左侧菜单树，并为其节点指定单击事件
*/
$("#home-west-tree").tree({
//加载菜单的数据，必需
url:
"${ctx
}/pages/home-west-tree.json",
method:
"get",
//是否有层次线
lines:
true,
//菜单打开与关闭是否有动画效果
animate:
true,
//菜单点击事件
onClick:
function(node){
if(node.attributes
node.attributes.url){
//打开内容区的tab，代码在其后
addTab({
url:
"${ctx
}/"
+
node.attributes.url,
title:
node.text
});
}
}
});
/*
*
初始化内容区的tabs
*/
$("#home-tabs").tabs({
fit
:
true,
//tab页是否有边框
border
:
false
});})
/script
script
/*
*
在内容区添加一个tab
*/
function
addTab(params){
var
t
=
$("#home-tabs");
var
url
=
params.url;
var
opts
=
{
title:
params.title,
closable:
true,
href:
url,
fit:
true,
border:
false
};
//如果被选中的节点对应的tab已经存在，则选中该tab并刷新内容
//否则打开一个新的tab
if(t.tabs("exists",
opts.title)){
var
tab
=
t.tabs("select",
opts.title).tabs("getSelected");
t.tabs("update",
{
tab:
tab,
options:
opts
});
}else{
t.tabs("add",
opts);
}
}
/script
4.easyui-tree组件所需的json格式
easyui使用的传输格式为json，它对json内容的格式有比较严格的限制，所以请注意查看api
[{
"text":"区域管理",
"attributes":{
"url":"pages/consume/area/areaList.jsp"
}
},{
"text":"预约信息管理",
"children":[{
"text":"商户预约信息查询",
"attributes":{
"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
}
}]
},{
"text":"准入申请管理",
"children":[{
"text":"商户准入申请",
"state":"closed",
"children":[{
"text":"商户待处理申请",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_wait"
}
},{
"text":"商户审批中申请",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_current"
}
},{
"text":"商户审批通过申请",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_pass"
}
},{
"text":"商户被拒绝申请",
"attributes":{
"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_refuse"
}
}]
}]
},{
"text":"准入审批管理",
"children":[{
"text":"商户审批管理",
"state":"closed",
"children":[{
"text":"当前任务",
"children":[{
"text":"商户当前初审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
}
},{
"text":"商户当前复审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
}
}]
},{
"text":"商户已完成任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
}
},{
"text":"商户不通过任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]
就这样，我们使用easyui完成了简单的左右布局。
以上所述是小编给大家分享的jQuery
Easyui实现上左右布局的相关内容，希望对大家有所帮助。
