jQuery插件综合应用1

jQuery插件综合应用(一)注册

 

一、介绍

注册和登录是每个稍微有点规模的网站就应该有的功能。登陆功能与注册功能类似，也比注册功能要简单些。所以本文就以注册来说明jQuery插件的应用。

jQuery插件的使用非常简单，如果只按照jQuery插件demo中的演示使用，基本上很快就能上手。但是如果按照我们的需要进行操作，还真需要一些技巧。下面会以nanoscroller进行说明。

提到注册功能，无非就是对用户的注册信息进行验证，验证用户输入的注册信息是否合法，在jQuery插件中，validation插件可以实现验证功能。如果用户的信息合法，只需要用户同意“网站的协议”，就允许进行下一步操作————注册。“网站的协议”显示方式有多种，可以在当前页面，也可以在弹出层中。而本文介绍的是弹出层中显示”协议信息”，Lightbox_me插件可以实现弹出层功能。网站的“协议信息”的内容可能很多，为了提高用户的体验，我们可能需要使用滚动条来显示“协议信息”的部分信息。nanoscroller插件可以实现滚动条功能。

二、使用的插件

所以本文介绍的就是validation插件、Lightbox_me插件和nanoscroller插件的综合应用。在这里并不介绍这三个插件的使用方式，如果不明白的可以去插件官方了解使用方法。或者是看下面的3篇文章
网站开发常用jQuery插件总结(四）验证插件validation
网站开发常用jQuery插件总结(二）弹出层插件Lightbox_me
网站开发常用jQuery插件总结(五)滚动条插件nanoscroller

三、插件实现的功能

为了实现注册，插件需要实现以下功能

validation插件实现的功能
1.验证email是否合法
2.用户名是否合法
3.信息的长度
4.是否同意本站“协议信息”

Lightbox_me插件实现的功能
1.隐藏显示弹出层，弹出层中显示“协议信息”

nanoscroller插件实现的功能
1.通过滚动显示“协议信息”

四、实现流程

1.首先定义页面样式,如定义“注册”的样式、页面居中显示等。代码有点多，在这里就不贴出来了。可以在下面的测试页面中看到
2.各插件的样式。插件必须能自定义样式。如需要定义“错误信息”的样式，弹出层的样式，滚动条的样式等。

/*滚动条的样式*/
.nano {
    background: white;
    width: 500px;
    height: 500px;
    font-size:12px;
    display:none;
}
.nano .content {
    padding: 20px;
}
.nano .content h2 {
    background:#f95252;
    color:white;
    margin:0;
    padding:8px;
    border:1px solid #ccc;
}
.nano .content h4 {
    padding:0;
    margin-top:8px;
    margin-bottom:4px;
    font-size:14px;
}
.nano .pane {
    background: #2A2931;
    width: 8px;
    right: 1px;
    margin: 5px;
    display:inherit;
}
.nano .pane .slider {
    background: #f95252;
    display:inherit;
}
/*验证的错误信息*/
#login #operbox p .error{
        color:red;
    }

3.js编码。涉及到三个插件，也是本文最主要的部分。这里只是大体介绍，需要的可以看测试页面中的代码。
弹出层插件使用很简单。我们只需要设置一个连接，在连接被点击时，初始化滚动条插件，然后显示弹出层。

$('#agreement').click(function(e) {
    $("#agreementbox").show();
    $("#agreementbox").nanoScroller({alwaysVisible: true,disableResize: true,alwaysVisible: true});
      $('#agreementbox').lightbox_me({
          centered: true
      });
  });
  //关闭弹出层
  $('#cancel').click(function(){
      $('#agreementbox').trigger('close');
  });

弹出层的操作很简答，滚动条插件的初始化也很简单。但是两个插件结合起来，却出现了一个问题。
就是滚动条显示不正确，如果按照官方demo使用，滚动条的显示正常，但是在这个实例中，我需要先隐藏“协议信息”，在用户点击按钮时出现，弹出层是出现了，也可以滚动，但是滚动条不正常，滚动条不随内容滚动。也就是层在隐藏的情况下，nanoscroller插件的滚动条无法初始化。
经过测试，解决了问题。也就是上面代码中的$(“#agreementbox”).show();这就话，先显示，再初始化。

弹出层、滚动信息正常了。下一步就是验证信息。validation插件在以前的文章中已经有过说明，所以这里不对以前的说明进行重复（可以看这篇文章网站开发常用jQuery插件总结(四）验证插件validation）,在这篇文章中只对自定义验证方法提了一下。这里对自定义方法做试下说明。
在验证信息时，我们需要验证用户名的格式，如只允许字母数字组成。我们便可以自定义方法，然后在方法中，使用正则表达式进行验证。如下代码所示

//添加自定义方法regex,执行正则表达式验证
$.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "输入格式不正确"
);
//判断用户名的输入格式，与添加的方法名相匹配regex
rules: {
    username: {
        required: true,
        minlength: 6,
        regex:/^[a-zA-Z0-9]{6,20}$/
    }
},
//验证未通过时，提示的信息
messages: {
    username: {
        required: "用户名不能为空",
        minlength: jQuery.format("用户名至少由 {0} 字符组成"),
        regex:"用户名只能有数字字母组成"
    }
}

五、测试说明

测试环境win7+ie8.chrome25.0.1364.97 m,firefox12.0。win7+ie8下无法显示圆角框
chrome下测试图：

测试地址：http://www.1100w.com/wp-content/uploads/2013/10/reg.html

 

 

分类: jQuery

标签: Lightbox_me, nanoscroller, validation, jquery