jqueryUI需要下载对应的部件，也可全部下载。
jquery-ui-1.8.18.custom.js & jquery-ui-1.8.18.custom.css
api官网： 虽然难懂点，但还是最全面的 http://api.jqueryui.com/
UI组件内容：
- Tabs
- Dialog
- accordion
Tabs
<div id="mytab"> <ul> <li><a href="#tabs-1"><span></span>3Third</a></li> <li><a href="#tabs-2">3Second</a></li> <li><a href="#tabs-3">1Third</a></li> </ul> <div id="tabs-1">Lorem ipsum</div> <div id="tabs-2">Phasellus</div> <div id="tabs-3">zhangsan</div> </div> <script> /** * 标签页（Tabs）有一组必须使用的特定标记，以便标签页能正常工作： * 标签页（Tabs）必须在一个有序的（<ol>）或无序的（<ul>）列表中 * 每个标签页的 "title" 必须在一个列表项（<li>）的内部，且必须用一个带有 href 属性的锚（<a>）包裹。 * 每个标签页面板可以是任意有效的元素，但是它必须带有一个 id，该 id 与相关标签页的锚中的哈希相对应 */ $(function(){ //$('#mytab').tabs(); --最初始的tabs //$('#mytab').tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" }); --水平位置上可拖拽 var $tabs = $('#mytab').tabs({ tabTemplate: '<li><a href="#{href}">#{label}</a><span class="ui-icon ui-icon-close">Remove Tab</span></li>', panelTemplate: '<div><h5>我是模板</h5></div>', //disabled : [1], //不可点击项设置 spinner:'加载...', // 对于remote加载时，会将spinner内容展示在tabs页签中，页签中必须要有<span></span>作为容器。default:<em>Loading…</em> selected: 3, //默认选择项 idPrefix: "Tabs-", //default is 'ui-tabs-',默认ID设置 fx: [{height:'toggle',duration:2000},{height:'toggle',duration:2000}], //Enable animations,动画效果[hideObj,showObj], 'event': 'mouseover', //tabs切换的触发事件，鼠标聚焦时触发，default:click //cookie: { expires: 7, path: '/', domain: 'jquery.com', secure: true }, //cookie记录最后一次操作的tabs的index,目前没试出来 collapsible: true, //对于当前活动的tabs，再次点击是否折叠 cache: true, //对于缓存的内容是否remote 每次都刷新，还是仅加载一次。 ajaxOptions : {async:false, success: function(){alert('我是ajax的内容')}}, //页面远端调用数据的额外处理 load: function(event, ui){ console.log("远程的我被载入了" + ui.index); }, add: function(event, ui){ console.log("我被增加了:" + ui.index); $('h5', ui.panel).text("I'm Forth"); }, create: function(event, ui){ console.log("我被创建了:" + ui.index); }, disable: function(event, ui){ console.log("我被禁用了:" + ui.index); }, enable : function(event, ui){ console.log("我被启用了:" + ui.index); }, select: function(event, ui){ console.log("我被选择了:" + ui.index); $tabs.tabs('enable', 2); //启用第1个 }, show: function(event, ui){ console.log("我出现了:" + ui.index); }, remove: function(event, ui){ console.log("我被移除了:" + ui.index); //移除后变为-1 } }); $tabs.tabs('add', '#tabs-' + ($("li").length + 1), '4Forth', $("li").length); // 注意此时的序号一定要正确，不然add方法中找到的ui就不对 $tabs.tabs('disable', [2,3]); //禁用第3，4个 $tabs.tabs('select', 3); //第4个被选中 //$tabs.tabs('load', 0); //重载load，<li><a href="loadText.html">loadMyJson</a></li>这种href中加载远端地址载入在每次点击时都会被无情的刷新即使cache为true，也不行，慎用 $tabs.tabs('url', 0, "loadText.html"); //动态载入远端地址 console.log($tabs.tabs('length')); console.log($tabs.tabs('option')); //获取当前的tabs的所有选择项 console.log($tabs.tabs('option', 'tabTemplate')); //获取指定的options //console.log($tabs.tabs('option', 'disabled', [0])); // set指定的option //$tabs.tabs('destroy'); //毁掉所有tabs的引入和创建，移除tabs的影响 //$tabs.tabs( "rotate", 2000, true); // tabs的自动切换2s //$tabs.tabs( "abort" ); // 终结ajax加载和动画 var widget = $tabs.tabs( "widget" ); // 返回当前部件 // $tabs事件绑定也可通过tabs+事件名的形式，动态绑定 $('#mytab').bind("tabsselect", function(event,ui){ console.log("我是动态的事件"); }); /** * 删除操作（针对jquery1.4） */ $(".ui-icon-close").bind('click', function(){ var index = $("li").index(this); $tabs.tabs('remove', index); }); }); </script>
Dialog
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.18.custom.css"/>
<script type="text/javascript" src="../js/jquery1.4.2.js" ></script>
<script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.js" ></script>
<style type="text/css" rel="stylesheet">
.bg_red{
background-color: palevioletred;
}
</style>
</head>
<body>
<div id="myDialog" title="对话框">我是一个对话框
<input type="text" />
</div>
<div id="myDialog2" title="对话框2">我是一个对话框2
</div>
<p id="validateTips">All form fields are required.</p>
<div id="formDialog" title="Form对话框">
<form>
<span>*用户</span><input type="text" name="user" required maxlength="8" minlength="4"/><br />
<span>*密码</span><input type="password" name="pwd" required maxlength="12" minlength="8"/><br />
<span>*邮箱</span><input type="email" name="email" required/><br />
</form>
</div>
<button type="button" id="openDialogBtn">打开对话框</button>
<script>
/**
* this need a div element to be a container of dialog.
* title: titlebar text:container text.
*/
$(function(){
var tips = $('#validateTips');
$("#myDialog2").dialog({position:'center'}); //默认是自动打开
var $dialog = $("#myDialog").dialog({
autoOpen: false, //default:true, 是否自动打开
buttons: {'关闭' : function(){$dialog.dialog('close');}}, //default:{}, 按钮功能， 函数不能有参数
closeOnEscape: true, //default:true, 按Esc键关闭对话框
closeText : '我是关闭的×', //default:'close'，其实没多大用，<span></span>的class会覆盖掉内容，仅仅在ele中可以看到，在页面上看不出来
dialogClass: 'bg_red', //default:'',用于给对话框添加额外的class，其实也没多大用，一般会直接修改对应的css或覆写css。
//disabled: true, //default:false,用于禁用dialog的元素，在1.8.2中已经将其去掉了
draggable: true, //default:true, 是否可拖拽
height: 300, // default:'auto'
maxHeight: 500, // default:false 不做限制
minHeight:200, // default:150
600, // default:300
maxWidth:800, // default:false
minWidth:300, // default:150
title:'我是对话框', // default:'',也可在div中设置 title
zIndex:500, // default:1000,
position: 'left', //default:'center', 'top'left,bottom,right也可是指定的position={left:200,top:300}
resizable: true, //default:true ,是否可拖动大小
hide: {effect: 'explode', duration: 2000, easing: 'swing'}, // 展示和关闭animate
show: 2000,// 展示和关闭animate
stack: true, //default:true有多个dialog时，在点击对应的dialog将其自动展现在最前端。
modal: true, //default:false 模态框，会出现遮罩层,
beforeClose: function(event, ui){
console.log('option:我被beforeClose关闭了');
},
close: function(event, ui){
console.log('option:我被close了');
},
resize: function(event, ui){
console.log('option:我被resize了');
},
resizeStart: function(event, ui){
console.log('option:我被resizeStart了');
},
resizeStop: function(event, ui){
console.log('option:我被resizeStop了');
},
drag: function(event, ui){
console.log('option:我被drag了');
},
dragStart: function(event, ui){
console.log('option:我被dragStart了');
},
dragStop: function(event, ui){
console.log('option:我被dragStop了');
},
focus: function(event, ui){
console.log('option:我被focus了');
},
open: function(event, ui){
console.log('option:我被open了');
},
create: function(event, ui){
console.log('option:我被create了');
}
});
// method.
//$dialog.dialog('close'); //关闭
//$dialog.dialog('destroy'); //销毁
//$dialog.dialog('disable'); //禁用
//$dialog.dialog('enable'); //可用
//$dialog.dialog('isOpen'); //是否已打开
//$dialog.dialog('moveToTop');//移动至最顶端
//$dialog.dialog('open'); //打开
//$dialog.dialog('option'); //获取所有选项，也可设置选项
//$dialog.dialog('widget'); //获取部件
// event事件(在option中用驼峰表示，在单独加入中用dialog+ event名小写) 这种写了没起作用
/*$dialog.dialog('dialogclose',function(event, ui){
debugger;
console.log('我被关闭了')
});*/
var ObjValid = {
isRequire : function(ele){ //必须项
ele = $(ele);
if(!ele){return true};
if(!$.trim(ele.val())){
ele.addClass('bg_red');
tips.text('内容不能为空');
return false;
}
return true;
},
checkLength : function(ele,minlength, maxlength){ //长度判断
ele = $(ele);
if(!ele){return true};
var length = $.trim(ele.val());
if(minlength && !Number.isInteger(minlength)){
console.error('minlength应为数字类型或者为空');
return false;
}
if(maxlength && !Number.isInteger(maxlength)){
console.error('maxlength应为数字类型或者为空');
return false;
}
if(minlength && minlength > length){
ele.addClass('bg_red');
return false;
}
if(maxlength && maxlength < length){
ele.addClass('bg_red');
return false;
}
return true;
},
checkEmail : function(ele){ //邮箱判断
ele = $(ele);
if(!ele){return true};
var expReg = /^(.+)@(.+)[com|cn]$/;
if(!expReg.test(ele.val())){
ele.addClass('bg_red');
return false;
};
return true;
}
};
var checkEleFn = function(_formEle){
_formEle.removeClass('bg_red');
var valid = true;
$.each(_formEle, function(index, ele){
if(ele.required){
valid = valid && ObjValid.isRequire(ele);
}
if(ele.minLength || ele.maxLength){
valid = valid && ObjValid.checkLength(ele, ele.minLength, ele.maxLength);
}
if($(ele).is('[type=email]')){
valid = valid && ObjValid.checkEmail(ele);
}
});
}
var adduserFn = function(){
var user = $('input[name=user]');
var pwd = $('input[name=pwd]');
var email = $('input[name=email]');
var formEle = $([]).add(user).add(pwd).add(email);
checkEleFn(formEle);
}
var $formDialog = $('#formDialog').dialog({
autoOpen:false,
title:'formDialog',
buttons:{'关闭': function(){$(this).dialog('close');},
'确定': function(){
adduserFn();
}}
});
/**
* 打开对话框
*/
$("#openDialogBtn").bind("click", function(){
$formDialog.dialog('open');
});
});
</script>
</body>
</html>
Accordion
目前还没有在实际中使用，用的时候再填补。