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>