jQuery Plugins Apply

jQuery Plugins Apply

所有插件下载地址为: http://plugins.jquery.com/

这里介绍一个比较常用的插件.

Validate

Validate插件可以验证表单中的字段是否为必选,URL格式, email格式, 日期格式, 最大字符数, 最少字符数等.

使用validate插件要一般要包含两个文件:

Jquery.validate.js 插件文件

messages_cn.js 中文验证信息库

简单的例子:

    <script type="text/javascript">
        $(function() {
            $("#frmV").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      username: { required: true, minlength: 6 },
                      email: { required: true, email: true }
                  },
                  /*错误提示位置*/
                  errorPlacement: function(error, element) {
                      error.appendTo(element.siblings("span"));
                  }
              }
            );
        })
</script>

Rules里面要对应HTML的name属性,关于有哪些规则,可以直接参考messages_cn.js.

Form

专为表单而设计,可以很容易的实现AJAX方式提交数据.

该插件还有如下一些重要的方法:

formSerialize() 格式化表单中有用的数据.

clearForm() 清除表单中所有输入的数据.

简单的例子:

    <script type="text/javascript">
        $(function() {
        	//定义一个表单提交时的对象
        	var options = {
             	url:"Login.aspx", //默认为form中的action,设置后便覆盖默认值
             	target: "#divData" //将服务器返回的数据显示在Id号为divData元素中
            }
            $("#frmUserInfo").ajaxForm(options);//以Ajax的方式提交表单
        })
</script>

Options对象很有用,常用的属性如下:

Var options = {

Url: url, // form提交数据的地址

Type:type, // form提交的方式(mothod)

Target:target, // 显示服务器返回数据的元素ID号

beforeSubmit:function(), // 提交前执行的回调函数

Success:function(), // 提交成功后执行的回调函数

dataType:null, // 服务器返回的数据类型

clearForm:true, // 提交成功后,清空表单

resetForm:true, // 提交成功后,重置表单

Timeout:6000 // 超时设置

}

Cookie

使用JS脚本一样可以操作用户cookie

例子:

    <script type="text/javascript">
        $(function() {
            if ($.cookie("UserName")) { //如果有值，则显示在文本框中
                $("#UserName").val($.cookie("UserName"));
            }
            
            $("#sbtUser").submit(function() { //表单提交事件
            if ($("#chkSave").attr("checked")) { //如果选中了保存"用户名"项
                    //设置Cookie值
                    $.cookie("UserName", $("#UserName").val(), {
                        path: "/", expires: 7
                    })
                }
                else {
                    //销毁Cookie值
                    $.cookie("UserName", null, {
                        path: "/"
                    })
                }
                return false; //表单不提交
            })
        })
</script>

范式: $.cookie(名称, 值, [option])

设置cookie:  $.cookie(name, value);

取值: $.cookie(name)

注销cookie: $.cookie(name, Null)

[option]属性:

$.cookie(cookieName, cookieValue, {

Expires: // 有限日期,单位是天

Path: // 保存路径

Domin: // cookie域名属性

Secure: // 一个布尔值,传输cookie时,是否需要一个安全协议

})

AutoComplate

文本框自动提示,自动完成插件.

该插件中属性说明:

            $(文本框元素).autocomplete(待选择元素集, {
                minChars: 0, //表示自动完成前填入的最小字符, 为0代表双击空白文本框时显示全部提示数据
Max: //表示显示的数据总条数
autoFill: //布尔值,表示是否选中时自动填充至文本框
mustMatch:// 布尔值,表示是否匹配数据,设为true时,则文本框中内容必须是匹配数据,如果不是,则清空数据.
matchContains:// 布尔值,表示是否包含匹配数据
scrollHeight://设置匹配数据滚动显示的高度
                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); //选中匹配数据中的某项数据时，调用插件的result()方法
            //自定义返回匹配结果函数
            function SearchCallback(event, data, formatted) {
                $("#divData").html("您的选择是：" + (!data ? "空" : formatted));
            }
            //点击"查一下"按钮后，触发插件的search()方法
            $("#btnSearch").click(function() {
                $("#txtSearch").search();
            });

Notesforlightbox

图片放大浏览插件,功能如下:

1, 以圆角方式展示选中的图片.

2, "上一张","下一张"按钮.

3, 加载图片时有进度条.

4, 多个样式可以随意设置.

简单的例子:

    <script type="text/javascript">
        $(function() {
            $('.divPics a').lightBox({
                overlayBgColor: "#666", //浏览图片时的背景色
                overlayOpacity: 0.5, //背景色的透明度
fixedNavigation: true//	布尔值, 表示是否隐藏图片中的导航按钮
containerBorderSize: 800// 设置一个数字,表示图片的内容边框宽度
                containerResizeSpeed: 600 //图片切换时的速度,毫秒;
            })
        })
</script>

这里有很多相同格式的<a>标签.

里面的样式可以去修改JS文件,和IMAGE图片.

Contextmenu

右键菜单插件.特点:

1, 同一个页面可以设置多个不同样式的菜单.

2, 一个菜单可以绑定页面中的多个元素.

例子:

    <script type="text/javascript" 
            src="Js-7-6/jquery.contextmenu.js">
    </script>
    <link rel="stylesheet" type="text/css" 
            href="Css-7-6/jquery.contextmenu.css" />
    <script type="text/javascript">
        $(function() {
            $('#txtContent').contextMenu('sysMenu',
              { bindings:
                 {	// 绑定菜单时,根据ID号获取或设置个选项属性和事件.
                     'Li1': function(Item) {
                         alert("在ID号为：" + Item.id + "编辑框中，您点击了“新建”项");
                     },
                     'Li2': function(Item) {
                         alert("在ID号为：" + Item.id + "编辑框中，您点击了“打开”项");
                     }
                     //设置其它选项事件
                     //...
                 },
                  menuStyle: { // 菜单外框样式
                      border: '2px solid #999'
                  },
                  itemStyle: {	// 菜单选项样式
                      fontFamily: 'verdana',
                      backgroundColor: '#666',
                      color: 'white',
                      border: 'none',
                      padding: '1px'
                  },
                  itemHoverStyle: {	// 选项选中样式
                      color: '#666',
                      backgroundColor: '#f7f7f7',
                      border: 'none'
                  }
Shadow: //布尔值,默认为true,即显示背景阴影
eventPosY: // 指定菜单弹出时,在页面中的Y值
eventPosX:// 指定菜单弹出时,在页面中的X值
              });
        })
    </script>
</head>
<body>
   <div class="divFrame">
        <div class="divTitle">
              点击右键
        </div>
        <div class="divContent">
            <textarea id="txtContent" cols="30" rows="5"></textarea>
        </div>
   </div>
   <div class="contextMenu" id="sysMenu">
        <ul>
        <li id="Li1"><img src="Images-7-6/new.png" /> 新建</li>
        <li id="Li2"><img src="Images-7-6/folder.png" /> 打开</li>
        <li id="Li3"><img src="Images-7-6/disk.png" /> 保存</li>
        <hr />
        <li id="Li4"><img src="Images-7-6/cross.png" /> 退出</li>
      </ul>
</div>

Jqzoom

图片放大插件.先准备2张一大一小的相同图片,实现逼真的放大效果.

简单的例子:

    <script type="text/javascript">
        $(function() {
            $("#jqzoom").jqzoom( //绑定图片放大插件jqzoom
                 {
                     zoomWidth: 230,
                     zoomHeight: 230,
                     zoomType: 'reverse'
                 }
            );
        });
    </script>
</head>
<body>
    <div class="divFrame">
         <div class="divTitle">
              图片放大镜
         </div>
         <div class="divContent">
              <a href="Images-7-7/bag.jpg" id="jqzoom" title="我的背包">
         <img src="Images-7-7/bagsmall.jpg">
              </a>
         </div>
</div>

除了上面个给出的几个属性外还有几个jqzoom属性:

zoomType: 放大镜类型,默认为"standard" 还有"reverse"

xOffset:放大后的图片与小图片间的x距离

yOffset: 同上, y

Position: 放大后的图片相对原图片的位置:默认为"right" 可选: "left", 'top", 'bottom".

Lens:布尔值,是否显示小图片中的选择区域.默认为true".

Title:布尔值,是否显示主题:title

imageOpacity:若zoomtype为"reverse"时,设置非选中区域透明度