- 使用

artDialog

导入 artDialog.js 库，其中 skin 参数表示对话框使用的风格文件(如果项目采用 jQuery 作为框架，则可引用 jQuery artDialog 版本

使用字面量传参art.dialog(options)，常用选项：title // 标题content // 内容icon: 'succeed' // 定义消息图标ok: true 或 fn // 显示确定按钮或点击确定按钮回调函数cancel: true 或 fn // 显示取消按钮或点击取消按钮回调函数close: fn // 对话框关闭前执行的函数width: "85%" // 消息内容宽度height: "85%" // 消息内容高度time: 2 // 定时关闭（秒）lock: true // 锁屏drag: false // 不许拖拽resize: false // 不许用户调节尺寸button: [{name: '登录', callback: function () {}}, {name: '取消'}] // 自定义按钮
使用 artDialog iframe Tools 插件嵌入网页
- 导入 iframeTools.js 库<script src="iframeTools.source.js"></script>
- 常用方法art.dialog.open(url, options, cache)：创建一个 iframe 页面，参数：地址、配置参数、缓存开关（默认 true）art.dialog.close()：iframe 页面关闭 open 方法创建的对话框的快捷方式art.dialog.data(name, value)：框架与框架之间以及与主页面之间数据共享写入art.dialog.data(name)：跨框架数据共享读取art.dialog.removeData(name)：跨框架数据共享删除

# jQuery Validate

导入 js 库<script src="jquery-validation/dist/jquery.validate.min.js"></script><script src="jquery-validation/dist/localization/messages_zh.js"></script>

// 将校验规则写到 js 代码中
$(function () {
    // validate(options)：验证所选的表单
    $("#editForm").validate({
        // rules：自定义规则，key:value 的形式，key 是要验证的元素，value 可以是字符串或对象
        rules: {
            username: {
                required: true,
                remote: {
                    url: "check-email.php",     // 后台处理程序，注意：远程地址只能输出 "true"（验证通过）或 "false"（）
                    type: "post",               // 数据发送方式
                    dataType: "json",           // 接受数据格式
                    data: {                // 要传递的数据，默认会提交当前验证的值到远程地址
                        username: function() {
                            return $("#username").val();
                        }
                    }
                }
            },
            password: {
                required: true, rangelength: [3, 6]
            },
             confirm_password: {
                equalTo: "#password"
            }
        }
        // messages：自定义的提示信息，key:value 的形式，key 是要验证的元素，value 可以是字符串或函数
        // 如果某个控件没有 message，将调用默认的信息
        messages: {
            password: "密码长度在 {0} 和 {1} 位之间"
        }
        // 用其它方式替代默认的 submit
        submitHandler: function(form) {
            // form.submit();
            $(form).ajaxSubmit();
        }
        // 更改错误信息显示的位置
        // 默认情况是把错误信息放在验证的元素后面
        errorPlacement: function(error, element) {
            error.appendTo(element.parent());
        }
        // 指定错误提示消息的 css 样式
        // 指定验证通过后的元素添加的 css 样式
        validClass: "valid",
        // 在每次错误显示时执行，可以更新未通过验证的元素的数量
        showErrors: function(errorMap, errorList) {
            $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");
            this.defaultShowErrors();
        },
        // 要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数
        // label: The error label. Use to add a class or replace the text content.
        // element: The element currently being validated, as a DOMElement.
        success: "valid",
        success: function(label, element) {
            label.addClass("valid").text("Ok!")
        },
        // default: Adds errorClass (see the option) to the element)
        highlight: function(element, errorClass, validClass) {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
         },
         // default: Removes the errorClass
         unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
         }
    });
});
// 重置表单
$("#reset").click(function() {
    validator.resetForm();
});

默认校验规则required: true // 必须输入的字段remote:"check.php" // 使用 ajax 方法调用 check.php 验证输入值email: true // 必须输入正确格式的电子邮件digits: true // 必须输入整数equalTo: "#field" // 输入值必须和 #field 相同maxlength: 5 // 输入长度最多是 5 的字符串（汉字算一个字符）minlength: 10 // 输入长度最小是 10 的字符串rangelength: [5, 10] // 输入长度必须介于 5 和 10 之间的字符串max: 5 // 输入值不能大于 5min: 10 // 输入值不能小于 10range: [5, 10] // 输入值必须介于 5 和 10 之间ignore: ".ignore" // 忽略某些含有 .ignore 样式的元素不验证

<script type="text/javascript" src="jquery.form.js"></script>

ajaxForm([options])：预处理将要使用 Ajax 方式提交的表单及添加必要的事件监听器，不提交表单，当点击表单中的按钮时才提交
ajaxSubmit([options])：立即通过 Ajax 方式提交表单
resetForm()：重置表单数据
clearForm(true)：清除表单数据，参数为 true 表示包括清除隐藏字段的值
formSerialize()：将该对象包含的表单或表单控件转换成查询字符串，返回字符串的格式：name1=value1&name2=value2

ajaxForm() 与 ajaxSubmit() 都能接受 0 个或 1 个参数，当为单个参数时，该参数既可以是一个提交成功后的回调函数，也可以是一个 options 对象

参数说明：
- formData：数组对象，在点击 submit 时，jQuery Form 会收集 form 表单数据以数组的形式保存在 formData 中，提交表单时，会以 Ajax 方式自动提交这些数据，格式如：[{name:user, value:val },{name:pwd, value:pwd}]
- jqForm：jQuery 对象，封装了表单的元素
- options：options 对象

jQuery zTree

zTree 相关文件：jquery-ztree.core.js、zTreeStyle.css 以及 zTreeStyle 目录下的 img 文件
引入相关文件<link type="text/css" rel="stylesheet" href="zTreeStyle/zTreeStyle.css"/><script type="text/javascript" src="jquery.ztree.core.js"></script>
使用简单 JSON 数据模式

// zTree 的参数配置
var setting = {
    // 启用简单 JSON 数据模式
    data: {
        simpleData: { enable: true }
    },
    // 异步加载节点数据
    data: {
        async: {
            enable: true, // 开启异步加载模式
            // 设置异步获取节点的 URL
            // treeNode 节点数据采用简单 JSON 数据模式，如 [{id:11, pId:1, name: "子节点 1"}, {id:12, pId:1, name: "子节点 2"}]
            autoParam: ["id=zId"] // 假设对父节点 node = {id:1, name:"test"} 进行异步加载时，将提交参数 zId=1
            otherParam: { "id":"1", "name":"test"} // 进行异步加载时，将提交参数 id=1&name=test
        }
    },
    callback: {
        // 设置点击事件回调函数
        // Function 参数：事件对象 event，对应 zTree 的 treeId，被点击的 treeNode，节点被点击后的选中操作类型 clickFlag
        onClick: function(event, treeId, treeNode) {
            alert(treeNode.name);
        }
    }
};
// zTree 的节点数据
// treeNode 节点的常用属性：id、pId、name、isParent、open
// treeNode 节点的常用方法：getParentNode()
var zNodes = [
    {id:1, pId:0, name: "父节点 1", open: true},
    {id:11, pId:1, name: "子节点 1"},
    {id:12, pId:1, name: "子节点 2"}
];
$(function() {
    // zTree 初始化方法
    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

ECharts

引入 echarts.js<script src="echarts.min.js"></script>
为 ECharts 准备一个具备大小（宽高）的 Dom<div id="main" style="width: 600px;height:400px;"></div>
基于准备好的 dom，初始化 echarts 实例var myChart = echarts.init(document.getElementById('main'));
指定图表的配置项和数据var option = { };
使用指定的配置项和数据显示图表myChart.setOption(option);

$("#pagination").twbsPagination({
    totalPages: ${pageResult.pages} || 1,
    startPage: ${pageResult.pageNum},
    visiblePages: 5,
    first: "首页",
    prev: "上一页",
    next: "下一页",
    last: "尾页",
    onPageClick: function(event, page){
        $("#currentPage").val(page);
        $("#searchForm").submit();
    }
});

UploadFive

定义 html 标签<a href="javascript:;" id="uploadBtn1" >上传正面</a>
编写 JavaScript 代码实现上传功能

$("#uploadBtn1").uploadifive({
    multi: false, //是否多选，默认值：true
    buttonText: '上传正面', //按钮文本
    fileObjName: 'pic', //表单提交的时候的名字
    fileType: 'image', //文件类型限制
          uploadScript: '/uploadImage', //提交路径
          onInit: function() {
        // 在上传初始化的时候把上传的进度条隐藏
        $(".uploadifive-queue").hide();
    },
          onUploadComplete: function(file, data) {
        // 上传完毕后回显
        $("#uploadImg").prop("src", data);
        $("#uploadImage").val(data);
});

事件onInit：初始化 UploadFive 结束时触发onQueueComplete(uploads)：文件上传队列处理完毕后触发onUploadComplete(file, data)：文件上传完毕后触发，参数：file 上传文件对象，data 服务端输出返回的信息

10 JS插件

artDialog

# jQuery Validate

jQuery zTree

ECharts

UploadFive