jQuery-4

正课:
1. jQuery UI
2. 第三方插件: 日期，验证，照片墙
3. ***封装自定义插件


1. jQuery UI
   autocomplete 自动完成: 
   为什么: 减少输入
   如何: html : <input />
       js: 2件事: 
         1. 数组: 保存所有备选词
         2. $(...).autocomplete({source: 数组})


   button 将a, input, button都转为统一的样式 -boot中也有
   为什么: 统一样式
   如何: $(...).button();


   datapicker: 日期选择: 
   html: 普通的input文本框
        js: $(...).datepicker()


   dialog: 对话框  - boot中有
   为什么: 普通的alert,confirm,prompt 样式不可修改,且兼容性问题
   何时: 今后，在页面中只要弹窗就用dialog
   如何: html: 容器元素包含提示内容
                          容器元素的title属性作为对话框的标题
        js: $(容器元素).dialog(); //让元素变成对话框的样子
             $(容器元素).dialog({autoOpen:false}); //默认隐藏
             $(容器元素).dialog("open"); //弹出对话框


   tabs:  -boot中有
    html : div
                  >ul>li>a href="#div"
                  +div id="..." *n
    js: $(父容器).tabs();


   tooltip: 工具提示: ——boot中有 
    何时: 只要提示用户按钮或输入项的意义时
         其实就是title属性
    为什么: 不同浏览器的title显示样式不一样
    如何: $(document).tooltip(); //对整个页面统一tooltip的样式


2. 第三方插件:  日期 , 验证, 彩砖墙
    日期: layDate  不依赖于jquery
      引入css: "laydate/skins/default/laydate.css"
      html: <input class="laydate-icon"/>
       js: 
         跟换主题: laydate.skin("dahong或molv")
         2种调用: 
            1. 在input的单击事件中调用: laydate();
            2. 在页面加载后调用: laydate({elem: "#input的id"})


    验证: jquery.validate  基于jQuery
      js: $(表单).validate({
              rules:{
name1: "required", //name1的内容必填
                 name2: {
   规则名:值,
                     规则名:值,
                 }
              },
              messages:{
name1: "name1验证失败",
                 name2:{
                     规则名:"name2的规则1验证失败",
                     规则名:"name2的规则1验证失败",
                 }
              }
          })
    规则名: jquery.validate.js的327行


    添加自定义验证规则:   其实就是为jquery.valicator添加一个验证函
数
       jQuery.validator.addMethod(规则名,fn,msg)
      fn:function(val){//自动获得要验证的元素内容 
           return 验证结果
      }
      自定义的规则，遇到空val，直接返回true，不做验证
 
   彩砖墙：masonry
   html: <div class="container">
                <div class="block"> *n 
   js: $(".container").masonry();


3. ***封装自定义插件: 
   2种: 
    1. 扩展jQuery全局函数:
      jQuery全局对象: window.jQuery 或 window.$
        jQuery全局函数: 在jQuery对象内添加的函数
           vs ES的全局函数: 在window下添加的函数
       如何:  jQuery.方法名=function(){...}
          $.方法名(); 可以调用
          $().方法名(); X
       鄙视: $.each()  vs  $(...).each(function(){...})
          $.each()是jQuery的全局函数,不需要任何查找结果就可直接调用
保存在: 直接保存在jQuery对象上
          $(...).each()是jQuery的实例函数,必须要在查找结果上才能调用
                 保存在: jQuery查询结果集合的原型对象中
       何时: 只要复用一个基于jQuery的函数时，就将函数添加到jQuery全局对象中。
         
    2. 封装自定义部件: 
       1. myAccordion插件
       在使用jQuery已经实现功能和样式的基础上: 
        //制作插件
        1. 所需的所有样式，放入专门的css文件中
        2. 所需的js，放入专门的js文件中: 
             1. 判断是否先引入jQuery
             2. 为jQuery添加实例方法
为元素侵入class和行为
        //制作完成
        如何: 1. 引入自定义插件的css
                 2. 引入jQuery
                 3. 引入自定义插件的js
                 4. 按照插件要求，编写html内容
                 5. 在自定义脚本中直接找到父元素，调用插件函数


  <link rel="stylesheet"
href="myAccordion/myAccordion.css">
 
  <div id="d1">
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="myAccordion/myAccordion.js"></script>
  <script>
    $("#d1").myAccordion();
  </script>