jQuery 插件

wustrive00

2017-05-07

注意Validate的导入要在jQuery库之后。代码如下：

先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。

<script src="jQuery.1.8.3.js" type="text/javascript"></script>  
<script src="jquery.validate.js" type="text/javascript"></script>  
<script src="messages_cn.js" type="text/javascript"></script>

该插件自带包含必填数字url在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,

调用的方法

$(form).validate({options})

from参数表示表单元素名称,options表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在对象内进行设置

<body>
        <form id="frmV" method="get" action="#">
            <div id="divtest">
                <div class="title">
                    <span class="fl">表单验证插件</span>
                    <span class="fr">
                        <input id="btnSubmit" type="submit" value="提交" />
                    </span>
                </div>
                <div class="content">
                    <span class="fl">邮箱：</span><br />
                    <input id="email" name="email" type="text" /><br />
                    <span class="tip"></span>
                </div>
            </div>
        </form>

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

当点击表单中的提交按钮时,调用validate插件验证用户输入是否符合规则,并将异常信息显示在页面

图片放大插件

2图片放大镜插件

$(linkimage).jqzoom({options})

在调用jqzoom图片放大插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动是,调用该插件jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大的效果

<body>
        <div id="divtest">
            <div class="title">
                <span class="fl">图片放大镜</span> 
            </div>
            <div class="content">
                <a href="image/tupian.jpg" id="jqzoom" title="小兔子乖乖">
                     <img src="image/tupian1.jpg" alt=""/>
                </a>
            </div>
        </div>
        
        <script type="text/javascript">
            $(function () {
                $("#jqzoom").jqzoom({
                    zoomWidth: 123, //小图片所选区域的宽
                    zoomHeight: 123, //小图片所选区域的高
                    zoomType: 'reverse' //设置放大镜的类型
                });
            });
        </script>
    </body>

图片灯箱插件

该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片

$(linkimage).lightBox({options})

例如:以列表的方式在页面中展示全部的图片,当用户点击某张图片时,t通过引入大的图片插件,采用""灯箱的方式显示所选你的图

$(function () {
                $('.divPics a').lightBox({
                    overlayBgColor: "#666", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //图片切换时的速度
                })
            });

jquery