第十一课 iWebShop 系统内置 JS的使用
上节课程我们讲到：
iWebShop 系统默认提供了大量的优秀 JS 工具和插件，比如日历，jquery，artDialog 弹出框 UI，artTemplate模板引擎等等…所有系统内置的 JS 都在libwebjsjspackage_class.php 有兴趣的用户可以自己扩展一些常用工具，在模板里面引用更为简单。
这次课程我就说明一下有哪些常用的JS工具，由于每一个JS工具的用法都能写一本帮助文档，所以这里只介绍JS工具的功能及用法
一、iWebShop使用了哪些JS工具
打开libwebjsjspackage_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工具的源码放在 libwebjssource下面。如果要做扩展，就修改jspackage_class.php，在source下增加相应的JS文件，就可以调用了。
二、JS工具介绍
adloader.js
iwebshop自己开发的广告加载器，60行的代码，很简洁。要使用广告的页面记得要引入这个js文件，广告的设置在管理员后台
autovalidate
iWebShop开发的表单验证插件。
form.js
这个也是iWebShop自己开发的插件，主要完成表单回写的功能，在表单初始化时用比较多。
jquery
目前应用最广的JS库，好多第三方的工具都是基于jqurey开发的。
artdialog
对话框组件,详细用法可看：http://lab.seaning.com/
artTemplate
性能很好的javascript 模板引擎 https://github.com/aui/artTemplate
jquery.cookie
对cookie进行操作的工具：https://github.com/carhartl/jquery-cookie
kindeditor
一个富文件框的编辑器：http://kindeditor.net/doc.php
highcharts
一个图表工具：http://www.hcharts.cn/
my97date
日期控件：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>
运行效果如下：
当你输入不正确的格式时，效果如下图所示:
当你输入正确的格式时，如下图所示:
对于 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 位的数字">
运行效果:
填写正确:
另外要注意，要验证时，隐藏输入项目会失效，不进行验证处理！
就是这么简单，那么用户如果想在验证完后再运行自己的 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>
然后点击提交按钮:
这里要解释一下回调函数的 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>
运行效果如下：
同样也可以用 getItems 取得表单里所有数据的对象。也可以用 setValue(name,value)
的方式只给一个设置对应的值，也可以通过 getValue(name)得到对应项的值。
要注意的两点：
1、多选的时候是用 ; 号来分开的。
2、此 form 插件不能对 file 字段进行处理。
如有不明白的地方，留言或是加入我们 “三众技术QQ交流群”一起讨论
关于我们
三众科技资讯平台——大道至简，悦你所阅！
>本教程由三众简悦原创，转载请注明出处，作者：bobball，由bobo整理成牛骨文书籍
三众技术交流群：543102562
欢迎大家加入我们，共同讨论IT，互联网技术。同时可以扫描下面的二维码关注我们，谢谢！
