# My97DatePicker

$(".beginDate, .endDate").click(function () {
    WdatePicker({
        dateFmt: 'yyyy-MM-dd',
        maxDate: '%y-%M-%d', // 只能选择今天以前的日期
        readOnly: true // 只读
    })
});

1
2
3
4
5
6
7

# artDialog

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

# 使用

使用传统的参数art.dialog(content, ok, cancel)
使用字面量传参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 样式
        errorClass: "error",
  
        // 指定验证通过后的元素添加的 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();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

默认校验规则
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 // 输入值不能大于 5
min: 10 // 输入值不能小于 10
range: [5, 10] // 输入值必须介于 5 和 10 之间
ignore: ".ignore" // 忽略某些含有 .ignore 样式的元素不验证

# jQuery Form

<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() 的参数

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

$("#form1").submit(function () {
    $("#form1").ajaxSubmit();
    return false;
});

var options = {
    beforeSubmit: function(formData, jqForm, options){},  // 提交前的回调函数
    success: function(responseText, statusText, xhr, $form){},      // 提交成功后的回调函数
    error: function(){},        // 提交失败执行的函数
    // url: url,                 // 默认是 form 的 action，如果申明，则会覆盖
    // type: type,               // 默认是 form 的 method（get 或 post），如果申明，则会覆盖
    // dataType: 'json',           // html(默认)、xml、script、json ... 接受服务端返回的类型
    // clearForm: true,          // 提交成功后，清除所有表单元素的值
    // resetForm: true,          // 提交成功后，重置所有表单元素的值
    target: '#output',          // 把服务器返回的内容放入 id 为 output 的元素中
    timeout: 3000               // 限制请求的时间，当请求大于 3 秒后，跳出请求
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

参数说明：
- 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 文件
设置 zTree 的容器样式 class="ztree"
引入相关文件
<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"}]
            url: "/getNode.php",
            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);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# fancyBox

<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>

<a href="large_image.jpg" class="fancybox" title="Sample title">
    <img src="small_image.jpg" />
</a>

<script type="text/javascript">
    $(function () {
        $('.fancybox').fancybox();
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# 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);

# jQuery Pagination

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<div style="text-align: center;">
    <ul id="pagination" class="pagination"></ul>
</div>

1
2
3

# UploadFive

页面中引入 uploadifive 的文件
<link type="text/css" rel="stylesheet" href="/js/plugins/uploadifive/uploadifive.css" />
`
定义 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);
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

属性
auto：设置为 true，当选择文件后就直接上传了，为 false 需要点击上传按钮才上传，默认值：true
buttonText：浏览按钮的文本
fileObjName：文件上传对象的名称，默认值：Filedata
fileType：设置可以上传的文件类型，如 "image"、"image/png"
buttonClass：按钮样式
fileSizeLimit：上传文件的大小限制，可以使用(B, KB, MB, or GB) 为单位，比如 "2MB"
multi：是否可以上传多个文件，默认值：true
事件
onInit：初始化 UploadFive 结束时触发
onQueueComplete(uploads)：文件上传队列处理完毕后触发
onUploadComplete(file, data)：文件上传完毕后触发，参数：file 上传文件对象，data 服务端输出返回的信息

← 09 Bootstrap 11 前端开发 →