关闭

jQuery 常用插件和UI插件 总结笔记

标签: Jquery插件
901人阅读 评论(0) 收藏 举报
分类:

1. jQuery 常用插件

(1). 表单验证插件——validate 

该插件自带包含必填、数字、URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options});其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。

Jquery Validate 验证规则
(1)required:true 必输字段
(2)remote:”check.php” 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:”#field” 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
例子:
<script type="text/javascript">
            $(function () {
                $("#frmV").validate(
                  {
                      /*自定义验证规则*/
                      rules: {
                            email:{
                             required:true, //是否允许为空
                             email:true  //正确的电子邮箱格式
                            //digits:true  //整数
                            }
                      },
                      /*错误提示位置*/
                      errorPlacement: function (error, element) {
                         error.appendTo(element.parent());
                         // error.appendTo(".tip");
                      }
                  }
                );
            });
        </script>
详细网站:http://blog.csdn.net/u013147600/article/details/46816021


(2). 表单插件——form 

--通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下:$(form). ajaxForm ({options});其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数。



例子:
<script type="text/javascript">
   $(function () {
var options = {
   url: "http://blog.csdn.net/u013147600", 
   target: ".tip"
}
$("#frmV").ajaxForm(options);
   });
</script>
详细网站:http://blog.csdn.net/zzq58157383/article/details/7718956
 http://www.cnblogs.com/linzheng/archive/2010/11/17/1880288.html


(3). 图片灯箱插件——lightBox

 --该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:$(linkimage).lightBox({options});其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例子:
<script type="text/javascript">
            $(function () {
                $(".divPics a").lightBox({
                    overlayBgColor: "#666", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //图片切换时的速度
                })
            });
        </script>


详细网站:http://www.cnblogs.com/lhb25/archive/2011/04/11/2005330.html
http://www.jquerylightbox.com/

(4). 图片放大镜插件——jqzoom  

--在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:$(linkimage).jqzoom({options});其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例子:
<script type="text/javascript">
   $(function () {
$(".content a").jqzoom({ //绑定图片放大插件jqzoom
   zoomWidth: 123, //小图片所选区域的宽
   zoomHeight: 123, //小图片所选区域的高
   zoomType: 'reverse' //设置放大镜的类型
});
   });
</script>
详细网站:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819887.html
http://www.oschina.net/p/jqzoom/


(5). cookie插件——cookie 

--使用cookie插件后,可以很方便地通过cookie对象保存、读取、删除用户的信息,还能通过cookie插件保存用户的浏览记录,它的调用格式为:保存:$.cookie(key,value);读取:$.cookie(key),删除:$.cookie(key,null);其中参数key为保存cookie对象的名称,value为名称对应的cookie值。

例子:
<script type="text/javascript">
   $(function () {
if ($.cookie("email")) {
   $("#email").val($.cookie("email"));
}
$("#btnSet").bind("click", function () {
   if ($("#chksave").is(":checked")) {
$.cookie("email",$("#email").val, {
   path: "/", expires: 7
})
   }
   else {
$.cookie("email",null, {
   path: "/"
})
   }
});
   });
</script>
详细网站:http://www.cnblogs.com/kissdodog/archive/2012/12/14/2818827.html
http://blog.csdn.net/zzq58157383/article/details/7722106

(6). 搜索插件——autocomplete 

--搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定,当文本框输入字符时,绑定后的插件将返回与字符相近的字符串提示选择,调用格式如下:$(textbox).autocomplete(urlData,[options]);其中,textbox参数为文本框元素名称,urlData为插件返回的相近字符串数据,可选项参数options为调用插件方法时的配置对象。 (当文本框与搜索插件相绑定后,输入任意字符时,都将返回与之相匹配的字符串,提示用户选择,文本框在空白双击时,显示全部提示信息。)

例子:
<script type="text/javascript">
   $(function () {
var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName,{
   minChars: 0, //双击空白文本框时显示全部提示数据
   formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
   },
   formatMatch: function (data, i, total) {
return data[0];
   },
   formatResult: function (data) {
return data[0];
   }
}).result(SearchCallback); 
function SearchCallback(event, data, formatted) {
   $(".tip").show().html("您的选择是:" + (!data ? "空" : formatted));
}
   });
</script>
详细网站:http://www.cnblogs.com/hyl8218/archive/2010/03/19/1688828.html
http://blog.csdn.net/daicj88/article/details/6822410 --参数解释


(7). 右键菜单插件——contextmenu 

--右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执行相应操作,调用代码如下:$(selector).contextMenu(menuId,{options});Selector参数为绑定插件的元素,meunId为快捷菜单元素,options为配置对象。

例子:
<script type="text/javascript">
   $(function () {
$("#btnSubmit").contextMenu("sysMenu",
 { bindings:
    {
'Li3': function (Item) {
    $(".tip").show().html("您点击了“保存”项");
},
'Li4': function (Item) {
    $(".tip").show().html("您点击了“退出”项");
}
    }
 });
   });
     </script>
详细网站:http://www.blogjava.net/supercrsky/articles/250091.html
http://shadowlin.iteye.com/blog/939938
http://www.open-open.com/ajax/ajax20080504120558.htm


(8).自定义对象级插件——lifocuscolor插件

 --自定义的lifocuscolor插件可以在<ul>元素中,鼠标在表项<li>元素移动时,自定义其获取焦点时的背景色,即定义<li>元素选中时的背景色,调用格式为:$(Id).focusColor(color) ;其中,参数Id表示<ul>元素的Id号,color表示<li>元素选中时的背景色。

例子:
<script type="text/javascript">
   $(function () {
$("ul").focusColor("red")//调用自定义的插件
   })
</script>
详细网站:http://www.imooc.com/code/428


(9). 自定义类级别插件—— twoaddresult 

--通过调用自定义插件twoaddresult中的不同方法,可以实现对两个数值进行相加和相减的运算,导入插件后,调用格式分别为:$.addNum(p1,p2) 和 $.subNum(p1,p2);上述调用格式分别为计算两数值相加和相减的结果,p1和p2为任意数值。

详细网站:http://www.imooc.com/code/429


9.jQuery UI型插件

(1). 拖曳插件——draggable

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下:
$(selector). draggable({options});options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向。
详细网站:http://www.cnblogs.com/luluping/archive/2009/08/27/1555329.html
http://www.cnblogs.com/ganqiyin/archive/2013/12/12/3471622.html
http://www.jb51.net/article/21786.htm

(2). 放置插件——droppable

除使用draggable插件拖曳任意元素外,还可以调用droppable UI插件将拖曳后的任意元素放置在指定区域中,类似购物车效果,调用格式如下:
$(selector).droppable({options})
selector参数为接收拖曳元素,options为方法的配置对象,在对象中,drop函数表示当被接收的拖曳元素完全进入接收元素的容器时,触发该函数的调用。
例子:
   <script type="text/javascript">
   var intsum=0;
            $(function () {
                $(".drag").draggable();
                $(".cart").droppable({
                    drop: function () {
                           intsum++;
                           alert(intsum);
                            $(this)
.addClass("focus")
.find("#tip").html("");                   
                            $(".title span").html(intsum);
                    }                        
                })
            });
        </script>
详细网站:http://blog.csdn.net/fushou/article/details/8061521
http://blog.sina.com.cn/s/blog_6d0dc2a90100qaln.html

(3). 拖曳排序插件——sortable

拖曳排序插件的功能是将序列元素(例如<option>、<li>)按任意位置进行拖曳从而形成一个新的元素序列,实现拖曳排序的功能,它的调用格式为:
$(selector).sortable({options});
selector参数为进行拖曳排序的元素,options为调用方法时的配置对象,
例子:
<script type="text/javascript">
            $(function () {
                $("ul").sortable({
                    delay:2,//延时2秒,防止与点击事件冲突
                    opacity:0.35//设置透明度
                })
            });
        </script>
详细网站:http://hb-keepmoving.iteye.com/blog/1154618
http://www.jb51.net/article/38761.htm

(4). 面板折叠插件——accordion

面板折叠插件可以实现页面中指定区域类似“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下:
$(selector).accordion({options});
其中,参数selector为整个面板元素,options参数为方法对应的配置对象。
例子:
<body>
<div id="divtest">
   <div id="accordion">
<h3>
   <a href="#">白富美</a></h3>
<p>咱们结婚吧!</p>
<h3>
   <a href="#">土豪族</a></h3>
<p>咱们交个朋友吧!</p>
   </div>
</div>

<script type="text/javascript">
   $(function () {
$("#accordion").accordion();
   });
</script>
</body>
详细网站:http://www.cnblogs.com/sunfishlu/archive/2009/09/25/1573678.html
http://www.jeasyui.net/plugins/161.html
demo:http://www.open-open.com/ajax/Accordion.htm

(5). 选项卡插件——tabs

使用选项卡插件可以将<ul>中的<li>选项定义为选项标题,在标题中,再使用<a>元素的“href”属性设置选项标题对应的内容,它的调用格式如下:
$(selector).tabs({options});
selector参数为选项卡整体外围元素,该元素包含选项卡标题与内容,options参数为tabs()方法的配置对象,通过该对象还能以ajax方式加载选项卡的内容。
例子:
 <body>
<div id="divtest">
   <div id="tabs">
<ul>
   <li><a href="#tabs-1">最爱吃的水果</a></li>
   <li><a href="#tabs-2">最喜欢的运动</a></li>
</ul>
<div id="tabs-1">
   <p>橘子</p>
   <p>香蕉</p>
   <p>葡萄</p>
</div>
<div id="tabs-2">
   <p>足球</p>
   <p>散步</p>
   <p>篮球</p>
</div>
   </div>
</div>
<script type="text/javascript">
   $(function () {
      $("#tabs").tabs ({
   //设置各选项卡在切换时的动画效果
   fx: { opacity: "toggle", height: "toggle" },
   event: "mousemove" //通过移动鼠标事件切换选项卡
})
   });
</script>
   </body>

详细网站:http://www.cnblogs.com/bestfc/archive/2009/06/08/1498737.html
http://www.jeasyui.com/documentation/tabs.php


(6). 对话框插件——dialog

对话框插件可以用动画的效果弹出多种类型的对话框,实现JavaScript代码中alert()和confirm()函数的功能,它的调用格式为:
$(selector).dialog({options});
selector参数为显示弹出对话框的元素,通常为<div>,options参数为方法的配置对象,在对象中可以设置对话框类型、“确定”、“取消”按钮执行的代码等。
例子:
<body>
        <div id="divtest">
            <div class="content">
                <span id="spnName" class="fl">张三</span>
                <input id="btnDelete" type="button" value="删除"  class="fr"/>
            </div>
            <div id='dialog-modal'></div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#btnDelete").bind("click", function () { //询问按钮事件
                    if ($("#spnName").html() != null) { //如果对象不为空
                        sys_Confirm("您真的要删除该条记录吗?");
                        return false;
                    }
                });
            });
            function sys_Confirm(content) { //弹出询问信息窗口
                $("#dialog-modal").dialog({
                    height: 140,
                    modal: true,
                    title: '系统提示',
                    hide: 'slide',
                    buttons: {
                        '确定': function () {
                            $("#spnName").remove();
                            $(this).dialog("close");
                        },
                        '取消': function () {
                            $(this).dialog("close");
                        }
                    },
                    open: function (event, ui) {
                        $(this).html("");
                        $(this).append("<p>" + content + "</p>");
                    }
                });
            }
        </script>
    </body>
    详细网站:http://www.cnblogs.com/haogj/archive/2011/02/16/1956523.html

(7). 菜单工具插件——menu

菜单工具插件可以通过<ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下:
$(selector).menu({options}); selector参数为菜单列表中最外层<ul>元素,options为menu()方法的配置对象。
例子:
<body>
<ul id="menu">
   <li><a href="#">小明一中</a>
<ul>
   <li><a href="#">高中部</a>
<ul>
   <li><a href="#">高一(1)班</a></li>
   <li><a href="#">高一(2)班</a></li>
   <li><a href="#">高一(3)班</a>
<ul>
   <li><a href="#">小胡</a></li>
   <li><a href="#">小李</a></li>
   <li><a href="#">小陈</a></li>
</ul>
   </li>
</ul>
   </li>
   <li><a href="#">初中部</a>
<ul>
   <li><a href="#">初一(1)班</a></li>
   <li><a href="#">初一(2)班</a></li>
   <li><a href="#">初一(3)班</a></li>
</ul>
   </li>
   <li><a href="#">教研部</a></li>
</ul>
   </li>
   <li class="ui-state-disabled"><a href="#">大明二中</a></li>
   <!--将<li>元素的class属性值设为“ui-state-disabled”,可将菜单选项置为不可用状态-->
</ul>
        
        <script type="text/javascript">
            $(function () {
                $("#menu").menu();
            });
        </script>
    </body>
    详细网站: Demo: http://www.cnblogs.com/xiaoyao2011/archive/2011/10/19/jqueryMenu.html
http://sc.chinaz.com/jiaoben/caidanhaohang.html
http://www.jsfoot.com/jquery/menu/
smartMenu右键自定义上下文: http://www.zhangxinxu.com/wordpress/?p=1667
jQuery-menu-aim: http://www.cnblogs.com/naonaoye/archive/2013/03/08/2949504.html
http://www.juheweb.com/js/dh/56.html
jQuery 导航菜单: http://www.neoease.com/wordpress-menubar-6/


(8). 微调按钮插件——spinner

微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下:
$(selector).spinner({options});
selector参数为文本输入框元素,可选项options参数为spinner()方法的配置对象,在该对象中,可以设置输入的最大、最小值,获取改变值和设置对应事件。
例子:
<body>
<div id="divtest">
   <div class="title">
选择颜色值</div>
   <div class="content">
<span id="spnColor" class="input fl">
   <input />
</span>
<span id="spnPrev" class="prev fr"></span>
   </div>
</div>

<script type="text/javascript">
   $(function () {
//定义变量
var intR = 0, intG = 0, intB = 0, strColor;
$("input").spinner({
   //初始化插件
   max: 10,
   min: 0,
   //设置微调按钮递增/递减事件
   spin: function (event, ui) {
if (ui.value == 8)
   spnPrev.style.backgroundColor = "red";
else
   spnPrev.style.backgroundColor = "green";
   },
   //设置微调按钮值改变事件
   change: function (event, ui) {
var intTmp = $(this).spinner("value");
if (intTmp < 0) $(this).spinner("value", 0);
if (intTmp > 10) $(this).spinner("value", 10);
if (intTmp == 8)
   spnPrev.style.backgroundColor = "red";
else
   spnPrev.style.backgroundColor = "green";
   }
});
   });
</script>
   </body>


来源网站: http://www.css88.com/jquery-ui-api/spinner/
http://www.cnblogs.com/Philoo/archive/2011/10/20/jeasyui_api_spinner.html

(9). 工具提示插件——tooltip

工具提示插件可以定制元素的提示外观,提示内容支持变量、Ajax远程获取,还可以自定义提示内容显示的位置,它的调用格式如下:
$(selector).tooltip({options});
其中selector为需要显示提示信息的元素,可选项参数options为tooltip()方法的配置对象,在该对象中,可以设置提示信息的弹出、隐藏时的效果和所在位置。
例子:
<body>
<div id="divtest">
   <div class="title">
工具提示插件</div>
   <div class="content">
<div>
   <label for="name">
姓名</label>
   <input id="name" name="name" title="我是土豪,欢迎与我做朋友" />
</div>
   </div>
</div>

<script type="text/javascript">
   $(function () {
$("input").tooltip({
   show: {
effect: "slideDown",
delay: 350
   },
   hide: {
effect: "explode",
delay: 350
   },
   position: {
my: "left top",
at: "left bottom"
   }
});
   });
</script>
   </body>
   详细网站: http://www.jb51.net/article/19368.htm

http://www.cnblogs.com/QLeelulu/archive/2008/03/09/1097368.html


学习网站:

http://www.imooc.com/learn/11

Jquery easyUI 中文网:http://www.jeasyui.net/

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:270759次
    • 积分:4194
    • 等级:
    • 排名:第7344名
    • 原创:145篇
    • 转载:46篇
    • 译文:0篇
    • 评论:29条
    大风车转转
    六月心悸