1 jquery库一定要放在jquery ui库的前面
2 配置：下载jquery ui 后，将js文件夹下的jquery-ui-1.8.4.custom.min.js保存到跟
jquery-1.4.2.min相同的js文件夹下。在CSS下有一个ui-lightness目录，其下有images文件夹和一个
jquery-ui-1.8.4.cusomer.css 文件，将二者复制到自己程序的css目录下。
3 jquery ui中的selectable为核心方法，可以通过鼠标选择列表元素
比如：
$('ul').selectable({
filter: 'li:contains(' + (date.getMonth() + 1) + '/)',
stop: function() {
var result = $('#result').empty();
$('.ui-selected', this).each(function(){
result.append('<' + $(this).text() + '>');
});
}
});
});
filter:过滤选择元素
stop事件：当用户选择完后，显示哪些元素被选择了
4 小部件according,不错的折叠显示：
<div id="accordion">
<h2><a href="#">abc</a></h2>
<div>
<p>内容1</p>
</div>
<h2><a href="#">def</a></h2>
<div>
<p>内容2</p>
</div>
<h2><a href="#">eee</a></h2>
<div>
<p>内容3</p>
</div>
折叠：$(function () {
$('#accordion').accordion({
active: false, //默认初始状态为关闭
collapsible: true,//关闭活动的折叠
autoHeight: false,
icons: { //指定折叠标题的元素开关
'header': 'ui-icon-circle-triangle-e',
'headerSelected': 'ui-icon-circle-triangle-s'
}
});
});
5) datapicker
$(function () {
$('.datepicker').datepicker({
closeText: '关闭',
currentText: '今天：yy/mm/dd',
dateFormat: 'yy/mm/dd (D)',
dayNames: ['日', '一', '二', '三', '四', '五', '六'],
dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
hideIfNoPrevNext: true,
maxDate: '+1y',
minDate: new Date(),
monthNames: ['/01', '/02', '/03', '/04', '/05', '/06', '/07', '/08', '/09', '/10', '/11', '/12'],
navigationAsDateFormat: true,
nextText: 'yy/mm',
numberOfMonths: 2,
prevText: 'yy/mm',
showButtonPanel: true,
showMonthAfterYear: true,
showOtherMonths: true,
stepMonths: 2
});
});
6) 简单的进度条
<div id="progressbar"></div>
$(function () {
$('#progressbar').progressbar({ value: 0 });
var intervalCode = setInterval((function() {
var counter = 0;
return function() {
counter > 100 ? clearInterval(intervalCode) : $('#progressbar').progressbar('value', ++counter);
}
})(), 100);
使用javascript的setinterval函数每100微秒将数值反映到进度条中，计算超过100后停止interval
7) tabs分标签页
<li><a href="#tabs-1">Ajax的发展史</a></li>
<li><a href="ajax.html">Ajax的优点和缺点</a></li>
<li><a href="#tabs-3">Ajax的工作原理</a></li>
<div id="tabs-1">....</div>
<div id="tabs-3">.....</div>
$(function () {
$('#tabs').tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
8) jquery 插件的查找方法：
可以从官方网站中查找，也可以从jquerylist.com中查找
9) 表单检查插件
http;//validator.codeplex.com下载
使用例子：
<link rel="stylesheet" type="text/css" href="css/validator.css" media="all" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.validator-0.3.3.min.js"></script>
<form>
<dl>
<dt>姓名<span class="require">必须</span></dt>
<dd><input type="text" name="name" id="name" value="" size="30" maxlength="256" validate="form" require="<p>请输入姓名。</p>" />
</dd>
<dt>电子邮件<span class="require">必须</span></dt>
<dd><input type="text" name="email" id="email" value="" size="30" maxlength="256" validate="form" require="</p>请输入电子邮件地址。</p>" regular="<p>请检查输入的邮件地
址的形式。</p><p>例）example@address.com</p>" validExpress="[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-
Z0-9])?\.)+[a-zA-z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?" />
<p class="caption">例）example@address.com</p></dd>
<dt>密码<span class="require">必须</span></dt>
<dd><input type="password" name="password" id="password" value="" size="30" maxlength="256" validate="form" require="<p>请输入密码。</p>" custom="<p>密码必须6个字符或
者6个字符以上。</p>" customFn="return this.value.length >= 6;" />
<dt>密码确认<span class="require">必须</span></dt>
<dd><input type="password" value="" size="30" maxlength="256" validate="form" require="<p>请输入密码确认。</p>" compare="<p>输入的密码不一致。</p>"
compareTo="newpassword" /></dd>
<dt>性別<span class="require">必须</span></dt>
<dd>
<span validate="form" require="<p>请选择性别。</p>">
<input type="radio" name="gender">男性</input>
<input type="radio" name="gender">女性</input>
</span>
</dd>
</dl>
<div id="submitform">
<input type="submit" name="submitbtm" id="submitbtm" value="提交" onclick="return validate('form');"/>
</div>
</form>
可以看到，这里在每个字段中使用require，来指示必须用户输入的提示信息，还可以使用validExpress规定正则表达式。
10） 检查输入文字数目的插件
下载地址:http://remysharp.com/2008/06/30/maxlength-plugin/下载
<link rel="stylesheet" type="text/css" href="css/import.css" media="all" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.maxlength.js"></script>
<script type="text/javascript" charset="utf-8" src="js/zishu.js"></script>
</head>
<body>
<div id="header">
<h1>检查输入文字数「Maxlength Plugin」</h1>
<!-- #header --></div>
<div class="container"><div id="container">
<form>
<p>您还可以输入：<span class="charsLeft"></span>字</p>
<textarea maxlength="140" class="limited" cols="35" rows="10"></textarea>
</form>
zishu.js
$(function () {
$('.limited').maxlength({
'feedback': '.charsLeft'
});
});