My97DatePicker

  1. $(".beginDate, .endDate").click(function () {
  2. WdatePicker({
  3. dateFmt: 'yyyy-MM-dd',
  4. maxDate: '%y-%M-%d', // 只能选择今天以前的日期
  5. readOnly: true // 只读
  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>
  1. // 将校验规则写到 js 代码中
  2. $(function () {
  3. // validate(options):验证所选的表单
  4. $("#editForm").validate({
  5. // rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象
  6. rules: {
  7. username: {
  8. required: true,
  9. remote: {
  10. url: "check-email.php", // 后台处理程序,注意:远程地址只能输出 "true"(验证通过)或 "false"()
  11. type: "post", // 数据发送方式
  12. dataType: "json", // 接受数据格式
  13. data: { // 要传递的数据,默认会提交当前验证的值到远程地址
  14. username: function() {
  15. return $("#username").val();
  16. }
  17. }
  18. }
  19. },
  20. password: {
  21. required: true, rangelength: [3, 6]
  22. },
  23. confirm_password: {
  24. equalTo: "#password"
  25. }
  26. }
  27. // messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数
  28. // 如果某个控件没有 message,将调用默认的信息
  29. messages: {
  30. password: "密码长度在 {0} 和 {1} 位之间"
  31. }
  32. // 用其它方式替代默认的 submit
  33. submitHandler: function(form) {
  34. // form.submit();
  35. $(form).ajaxSubmit();
  36. }
  37. // 更改错误信息显示的位置
  38. // 默认情况是把错误信息放在验证的元素后面
  39. errorPlacement: function(error, element) {
  40. error.appendTo(element.parent());
  41. }
  42. // 指定错误提示消息的 css 样式
  43. errorClass: "error",
  44. // 指定验证通过后的元素添加的 css 样式
  45. validClass: "valid",
  46. // 在每次错误显示时执行,可以更新未通过验证的元素的数量
  47. showErrors: function(errorMap, errorList) {
  48. $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors, see details below.");
  49. this.defaultShowErrors();
  50. },
  51. // 要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数
  52. // label: The error label. Use to add a class or replace the text content.
  53. // element: The element currently being validated, as a DOMElement.
  54. success: "valid",
  55. success: function(label, element) {
  56. label.addClass("valid").text("Ok!")
  57. },
  58. // default: Adds errorClass (see the option) to the element)
  59. highlight: function(element, errorClass, validClass) {
  60. $(element).addClass(errorClass).removeClass(validClass);
  61. $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
  62. },
  63. // default: Removes the errorClass
  64. unhighlight: function(element, errorClass, validClass) {
  65. $(element).removeClass(errorClass).addClass(validClass);
  66. $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
  67. }
  68. });
  69. });
  70. // 重置表单
  71. $("#reset").click(function() {
  72. validator.resetForm();
  73. });
  • 默认校验规则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 样式的元素不验证

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 对象
  1. $("#form1").submit(function () {
  2. $("#form1").ajaxSubmit();
  3. return false;
  4. });
  5. var options = {
  6. beforeSubmit: function(formData, jqForm, options){}, // 提交前的回调函数
  7. success: function(responseText, statusText, xhr, $form){}, // 提交成功后的回调函数
  8. error: function(){}, // 提交失败执行的函数
  9. // url: url, // 默认是 form 的 action,如果申明,则会覆盖
  10. // type: type, // 默认是 form 的 method(get 或 post),如果申明,则会覆盖
  11. // dataType: 'json', // html(默认)、xml、script、json ... 接受服务端返回的类型
  12. // clearForm: true, // 提交成功后,清除所有表单元素的值
  13. // resetForm: true, // 提交成功后,重置所有表单元素的值
  14. target: '#output', // 把服务器返回的内容放入 id 为 output 的元素中
  15. timeout: 3000 // 限制请求的时间,当请求大于 3 秒后,跳出请求
  16. };
  • 参数说明:
    • 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 数据模式

  1. // zTree 的参数配置
  2. var setting = {
  3. // 启用简单 JSON 数据模式
  4. data: {
  5. simpleData: { enable: true }
  6. },
  7. // 异步加载节点数据
  8. data: {
  9. async: {
  10. enable: true, // 开启异步加载模式
  11. // 设置异步获取节点的 URL
  12. // treeNode 节点数据采用简单 JSON 数据模式,如 [{id:11, pId:1, name: "子节点 1"}, {id:12, pId:1, name: "子节点 2"}]
  13. url: "/getNode.php",
  14. autoParam: ["id=zId"] // 假设对父节点 node = {id:1, name:"test"} 进行异步加载时,将提交参数 zId=1
  15. otherParam: { "id":"1", "name":"test"} // 进行异步加载时,将提交参数 id=1&name=test
  16. }
  17. },
  18. // 设置事件回调函数
  19. callback: {
  20. // 设置点击事件回调函数
  21. // Function 参数:事件对象 event,对应 zTree 的 treeId,被点击的 treeNode,节点被点击后的选中操作类型 clickFlag
  22. onClick: function(event, treeId, treeNode) {
  23. alert(treeNode.name);
  24. }
  25. }
  26. };
  27. // zTree 的节点数据
  28. // treeNode 节点的常用属性:id、pId、name、isParent、open
  29. // treeNode 节点的常用方法:getParentNode()
  30. var zNodes = [
  31. {id:1, pId:0, name: "父节点 1", open: true},
  32. {id:11, pId:1, name: "子节点 1"},
  33. {id:12, pId:1, name: "子节点 2"}
  34. ];
  35. $(function() {
  36. // zTree 初始化方法
  37. zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
  38. });

fancyBox

  1. <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
  2. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
  3. <a href="large_image.jpg" class="fancybox" title="Sample title">
  4. <img src="small_image.jpg" />
  5. </a>
  6. <script type="text/javascript">
  7. $(function () {
  8. $('.fancybox').fancybox();
  9. })
  10. </script>

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

  1. $("#pagination").twbsPagination({
  2. totalPages: ${pageResult.pages} || 1,
  3. startPage: ${pageResult.pageNum},
  4. visiblePages: 5,
  5. first: "首页",
  6. prev: "上一页",
  7. next: "下一页",
  8. last: "尾页",
  9. onPageClick: function(event, page){
  10. $("#currentPage").val(page);
  11. $("#searchForm").submit();
  12. }
  13. });
  1. <div style="text-align: center;">
  2. <ul id="pagination" class="pagination"></ul>
  3. </div>

UploadFive

  • 页面中引入 uploadifive 的文件<link type="text/css" rel="stylesheet" href="/js/plugins/uploadifive/uploadifive.css" />`

  • 定义 html 标签<a href="javascript:;" id="uploadBtn1" >上传正面</a>

  • 编写 JavaScript 代码实现上传功能

  1. $("#uploadBtn1").uploadifive({
  2. multi: false, //是否多选,默认值:true
  3. buttonText: '上传正面', //按钮文本
  4. fileObjName: 'pic', //表单提交的时候的名字
  5. fileType: 'image', //文件类型限制
  6. uploadScript: '/uploadImage', //提交路径
  7. onInit: function() {
  8. // 在上传初始化的时候把上传的进度条隐藏
  9. $(".uploadifive-queue").hide();
  10. },
  11. onUploadComplete: function(file, data) {
  12. // 上传完毕后回显
  13. $("#uploadImg").prop("src", data);
  14. $("#uploadImage").val(data);
  15. }
  16. });
  • 属性auto:设置为 true,当选择文件后就直接上传了,为 false 需要点击上传按钮才上传,默认值:truebuttonText:浏览按钮的文本fileObjName:文件上传对象的名称,默认值:FiledatafileType:设置可以上传的文件类型,如 "image"、"image/png"buttonClass:按钮样式fileSizeLimit:上传文件的大小限制,可以使用(B, KB, MB, or GB) 为单位,比如 "2MB"multi:是否可以上传多个文件,默认值:true

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