常用的2种插件

弹出框插件,前端常用弹出框,但是alert太过“丑陋”,所以要选用更好的插件去代替alert,提高用户体验。比如:jBox插件。
表单或者用户输入数据的格式检查往往是必须的,一方面是程序安全性的需要,另一方面是为数据处理的方便(特别是为了方便数据库的管理),这时总是纯人工手写js/jq代码去检查显得小题大做而且开发时间也不允许。这时需要插件来帮助做验证。比如Validate。
jBox插件:(http://www.sucaihuo.com/js/263.html
常用调用方式:$.jBox.tip(“显示的信息”,“显示框的样式”);
显示信息可以是文本和html代码。
显示框的样式:
success:提示操作成功。
error:提示操作失败。
值得注意的是:
jBox的调用不只是要引用jBox的js文件(.js),还需要引入jBox的样式文件(.css)。
更多详细信息参考(http://www.sucaihuo.com/jquery/2/263/demo/),感觉还算是听全面。
验证插件:Validate
最为验证插件,Validate提供了全面方便的验证格式。而且提供用户自定义函数去增加满足用户需要的验证方式。
引入js文件(.js).
使用方式也非常的方便:
写法有2种:
第一种:

<form id = "formId">
...
<!-- 每一个要需要验证的元素都要有id -->
</form>
$("#formId").Validate({
        rules:{
        id:{required:true,..},//id为元素的id值,{required为验证条件,true为必须要满足条件,false为不需要满足条件}
        },
        mesages:{
        id:{required:"必填项"},//id为元素id值,required为需要满足的条件,"必填项"为不满足条件时的提示信息。
},
       success:function(e){
        //满足所有条件后
        。。。
        }, 
        submitHandler:function(){
        //数据提交
        $.post(,,,,);
        },
});

第二种:

<form id="formId">
<input type="text" id="name" data-rule-required="true" data-message-required="必填项"/>
<!-- ***data-rule-required为验证条件为required,data-message-required="必填项"为不满足验证条件时的提示信息为“必填项”*** -->
</form>
$("#formId").Validate({
   submitHandler:function(){
    .....
});
推荐在线公共引用库:http://libs.cdnjs.net/
在线引用cdn为加速,方面快速加载。将http改为https,使用安全连接否则有时会被拒绝引用!
IT文库 » 常用的2种插件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址