上节课程我们讲到: >[info] iWebShop 系统默认提供了大量的优秀 JS 工具和插件,比如日历,jquery,artDialog 弹出框 UI,artTemplate模板引擎等等…所有系统内置的 JS 都在\lib\web\js\jspackage_class.php 有兴趣的用户可以自己扩展一些常用工具,在模板里面引用更为简单。 这次课程我就说明一下有哪些常用的JS工具,由于每一个JS工具的用法都能写一本帮助文档,所以这里只介绍JS工具的功能及用法 ## 一、iWebShop使用了哪些JS工具 打开\lib\web\js\jspackage_class.php 文件,文件开头就是以下代码: ~~~ //系统JS注册表 private static $JSPackages = array( 'jquery' => array( 'js' => array( 'jquery/jquery-1.11.3.min.js', 'jquery/jquery-migrate-1.2.1.min.js' ) ), 'form' => array('js' => 'form/form.js'), 'dialog' => array( 'js' => array( 'artdialog/artDialog.js', 'artdialog/plugins/iframeTools.js' ), 'css' => 'artdialog/skins/aero.css' ), 'kindeditor' => array( 'js' => array( 'editor/kindeditor-min.js', 'editor/lang/zh_CN.js' ), 'callback' => 'initKindEditior' ), 'validate' => array( 'js'=>'autovalidate/validate.js', 'css'=>'autovalidate/style.css' ), 'my97date' => array('js' => 'my97date/wdatepicker.js'), 'artTemplate' => array( 'js' => array( 'artTemplate/artTemplate.js', 'artTemplate/artTemplate-plugin.js' ) ), 'cookie' => array('js' => 'cookie/jquery.cookie.js'), 'admanage' => array('js' => 'admanage/adloader.js'), 'chart' => array('js' => 'highcharts/highcharts.js'), ); ~~~ 每一种JS工具的源码放在 \lib\web\js\source下面。如果要做扩展,就修改jspackage_class.php,在source下增加相应的JS文件,就可以调用了。 ## 二、JS工具介绍 **adloader.js** iwebshop自己开发的广告加载器,60行的代码,很简洁。要使用广告的页面记得要引入这个js文件,广告的设置在管理员后台 **autovalidate** iWebShop开发的表单验证插件。 **form.js** 这个也是iWebShop自己开发的插件,主要完成表单回写的功能,在表单初始化时用比较多。 **jquery** 目前应用最广的JS库,好多第三方的工具都是基于jqurey开发的。 **artdialog** 对话框组件,详细用法可看:[http://lab.seaning.com/](http://lab.seaning.com/) **artTemplate** 性能很好的javascript 模板引擎 [https://github.com/aui/artTemplate](https://github.com/aui/artTemplate) **jquery.cookie** 对cookie进行操作的工具:[https://github.com/carhartl/jquery-cookie](https://github.com/carhartl/jquery-cookie) **kindeditor** 一个富文件框的编辑器:[http://kindeditor.net/doc.php](http://kindeditor.net/doc.php) **highcharts** 一个图表工具:[http://www.hcharts.cn/](http://www.hcharts.cn/) **my97date** 日期控件:[http://www.my97.net/](http://www.my97.net/) ## 三、validate.js,form.js的使用 这两个js文件是为iWebShop量身定做的,下面就通过官方提供的例子说明这两个js的使用方法。 ### validate.js 首先要通过 js 标签引入此插件:{js:validate} form 表单中的 input 标签中 type 为 text,password,select-one,textarea 中添属性pattern 和 alt 属性系统将会自动添加验证功能 如:对 email 的验证,在视图文件里编写如下代码: ~~~ {js:validate} <form> <input name='email' pattern='email' alt='请输入正确的 email'> </form> ~~~ 运行效果如下: 当你输入不正确的格式时,效果如下图所示: ![](http://it.sunzoon.com/wp-content/uploads/2016/08/20160808144133.png) 当你输入正确的格式时,如下图所示: ![](http://it.sunzoon.com/wp-content/uploads/2016/08/20160808165458.png) 对于 pattern 的正则系统对常用的正则都作了一些封装如: required, email, qq , id, ip , zip, phone, mobi ,url ,date,datetime ,int ,float 等等, 如果以上还没能满足你的要求,则用户可以自己写正则,如我想让用户输入一个 3-5 位的数字:则修改代码 ~~~ <input name='email' pattern='^\d{3,5}' alt='请输入一个 3-5 位的数字'> ~~~ 运行效果: ![](http://it.sunzoon.com/wp-content/uploads/2016/08/20160808165522.png) 填写正确: ![](http://it.sunzoon.com/wp-content/uploads/2016/08/20160808165544.png) 另外要注意,要验证时,隐藏输入项目会失效,不进行验证处理! 就是这么简单,那么用户如果想在验证完后再运行自己的 js 函数怎么办? 修改 文件 ~~~ { js:validate} <form callback='test("回调一下")'> <input name='email' pattern='^\d{3,5}' alt='请输入一个 3-5 位的数字'> <input type='submit'/> </form> <script> function test(txt) { alert(txt); return false; } </script> ~~~ 然后点击提交按钮: ![](http://it.sunzoon.com/wp-content/uploads/2016/08/20160808165614.png) >[info] 这里要解释一下回调函数的 return true 和 false > 如果返回的是 true,表单通过验证后,表单将提交,不通过将不提交。 > 如果返回的是 false,则无论表单是否通过表单都将不会被提交。 下面再说一下 form.js 文件,这个主要是完成表单回写功能的,比方说,你想让表单里的项目初始化一些值 修改文件: ~~~ { js:form} <form name='test'> <input name='email' ></br> <input type="radio" name="sex" value='1'>男<input type="radio" name="sex" value='0'>女</br> <input type="checkbox" name="live" value='a'>看书<input type="checkbox" name="live" value='b'>打球</br> <select name="code"> <option value="c++">c++</option> <option value="java">java</option> <option value="php">php</option> </select> <input type='submit'/> </form> <script> var form = new Form('test'); form.init({'email':'a@a.com','sex':'1','live':'a;b','code':'php'}); </script> ~~~ 运行效果如下: ![](http://it.sunzoon.com/wp-content/uploads/2016/08/20160808165710.png) 同样也可以用 getItems 取得表单里所有数据的对象。也可以用 setValue(name,value) 的方式只给一个设置对应的值,也可以通过 getValue(name)得到对应项的值。 要注意的两点: 1、多选的时候是用 ; 号来分开的。 2、此 form 插件不能对 file 字段进行处理。 >[warning]如有不明白的地方,留言或是加入我们 “三众技术QQ交流群”一起讨论 ## 关于我们 >[danger][三众科技](http://www.sunzoon.com)资讯平台——大道至简,悦你所阅! >本教程由[三众简悦](http://it.sunzoon.com)原创,转载请注明出处,作者:bobball,由bobo整理成看云书籍 三众技术交流群:**543102562** 欢迎大家加入我们,共同讨论IT,互联网技术。同时可以扫描下面的二维码关注我们,谢谢! ![三众科技服务号](http://it.sunzoon.com/wp-content/uploads/2016/06/qrcode_for_gh_401d25b05314_344.jpg)