-
面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果，即点击标题时展开内容，再点另一标题时，关闭已展开的内容，调用格式如下：
$(selector).accordion({options});其中，参数selector为整个面板元素，options参数为方法对应的配置对象。
$(function () {
$('accordion').accordion();
});
查看全部 -
拖曳排序插件的功能是将序列元素（例如<option>、<li>）按任意位置进行拖曳从而形成一个新的元素序列，实现拖曳排序的功能，它的调用格式为：
$(selector).sortable({options});selector参数为进行拖曳排序的元素，options为调用方法时的配置对象，
$(function () {
$("ul").sortable({
delay:2,
opacity: 0.35
})
});
查看全部 -
除使用draggable插件拖曳任意元素外，还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中，类似购物车效果，调用格式如下：
$(selector).droppable({options})selector参数为接收拖曳元素，options为方法的配置对象，在对象中，drop函数表示当被接收的拖曳元素完全进入接收元素的容器时，触发该函数的调用。
$(function () {
$(".drag").draggable();
$(".cart").droppable({
drop: function () {
$(this)
.addClass("focus")
.find("#tip").html("");
}
})
});
查看全部 -
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用
draggable()方法，实现各种拖曳元素的效果，调用格式如下：$(selector). draggable({options})options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖曳时的坐标方向。
$(function () {
$(."x").draggable({containment:"parent",axis:"x"})
$(."x").draggable({containment:"parent",axis:"y"})
});
查看全部 -
通过调用自定义插件twoaddresult中的不同方法，可以实现对两个数值进行相加和相减的运算，导入插件后，调用格式分别为：
$.addNum(p1,p2)和$.subNum(p1,p2)上述调用格式分别为计算两数值相加和相减的结果，p1和p2为任意数值。
$(function () {
$("#btnCount").bind("click", function () {
$("#Text3").val(
$.addNum($("#Text1").val(),
$("#Text2").val()));
);
});
});
查看全部 -
自定义的lifocuscolor插件可以在<ul>元素中，鼠标在表项<li>元素移动时，自定义其获取焦点时的背景色，即定义<li>元素选中时的背景色，调用格式为：
$(Id).focusColor(color)其中，参数Id表示<ul>元素的Id号，color表示<li>元素选中时的背景色。
$("#ul").focusColor("#ccc")
查看全部 -
右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作，调用代码如下：
$(selector).contextMenu(menuId,{options});Selector参数为绑定插件的元素，meunId为快捷菜单元素，options为配置对象。
$("#divtest").contextMenu('sysMenu',
查看全部 -
搜索插件的功能是通过插件的
autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：$(textbox).autocomplete(urlData,[options]);其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。
$("#txtSearch").autocomplete(arrUserName,{
查看全部 -
保存
$.cookie(key,value)
读取
$.cookie(key)
删除
$.cookie(key,null)
其中参数key为保存cookie对象的名称，value为名称对应的cookie值。
$(function () {
if ($.cookie("email")) {
$("#email").val($.cookie("username"));
}
$("#btnSet").bind("click", function () {
if ($("#chksave").is(":checked")) {
$cookie.("username",$("#username").val(), {
path: "/", expires: 7
})
}
else {
$cookie("username",null, {
path: "/"
})
}
});
});
查看全部 -
图片放大镜
在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的
jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：$(linkimage).jqzoom({options})其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
$(function () {
$("#jqzoom"),jqzoom({//绑定图片放大插件jqzoom
zoomWidth: 123, //小图片所选区域的宽
zoomHeight: 123, //小图片所选区域的高
zoomType: 'reverse' //设置放大镜的类型
});
});
查看全部 -
该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：
$(linkimage).lightBox({options})其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
$(function () {
$('.divPics a').lightBox({
overlayBgColor: "#666", //图片浏览时的背景色
overlayOpacity: 0.5, //背景色的透明度
containerResizeSpeed: 600 //图片切换时的速度
})
});
查看全部 -
通过表单form插件，调用
ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：$(form). ajaxForm ({options})其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
查看全部 -
该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：
$(form).validate({options})其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
$(function () {
$("#frmV").validate(
{
/*自定义验证规则*/
rules: {
emial;{
required: true ,
email: true
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
查看全部 -
ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：$(selector).ajaxStart(function())和$(selector).ajaxStop(function())其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行
ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。$(function () {
$('#divload').ajaxStart (function(){
$(this).html("正在请求数据...");
});
$('#divload').ajaxStop (function(){
$(this).html("数据请求完成！");
});
查看全部 -
使用
ajaxSetup()方法可以设置Ajax请求的一些全局性选项值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：jQuery.ajaxSetup([options])或$.ajaxSetup([options])可选项options参数为一个对象，通过该对象设置Ajax请求时的全局选项值。
<script type="text/javascript">
$(function () {
$.ajaxSetup({
dataType:"text",
success: function (data){
$("ul").append("<li>你输入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
查看全部
举报