一、jQuery UI

jQuery UI 則是在jQuery 基礎上開發的一套界面工具，幾乎包括了網頁上你所能想到和用到的插件以及動畫特效，讓一個毫無藝術感只知道碼字的碼農不費吹灰之力就可以做出令人炫目的界面。讓你在做界面的時候隨便‘拿來’就用，還有一點就是，它是免費開源的，用戶可根據需要自定義甚至重新設計

//以下是使用jQuery UI中dialog實例
<link href="accordion/jquery-ui.css" rel="stylesheet">
<script src="accordion/external/jquery/jquery.js"></script>
<script src="accordion/jquery-ui.js"></script>

    <a href="#" id="dialog-link" class="ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
    <div id="dialog" title="jQuery UI">
      <p>hello world</p>
    </div>

<script type="text/javascript">
      $( "#dialog-link" ).click(function( event ) {
        $( "#dialog" ).dialog( "open" );
        //取消點擊a標記的默認操作
        event.preventDefault();
    });
    //提示框
    $( "#dialog" ).dialog({
        //提示框默認不顯示
        autoOpen:false,
        width:300,
        height:200,
        //設置提示框的背景是否顯示
        modal:true,
        //設置提示框的按鈕，是一個數組，每一個按鈕是一個對象
        buttons:[
            {text:"ok",click:function () {$( this ).dialog( "close" );}},
            {text:"cancle",click:function () {$( this ).dialog( "close" );}}
        ]
});
</script>

open Dialog

dialog

二、 開發插件 - 原理

1. 對象方法插件 - $().each()
   $.fn.extend(object)

2. 全局函數插件 - $.each()
   $.extend(object)

   $.fn.extend({
    //對象方法
     test:function () {
     $(this).css("background","red");
       }
    })
   

 $.extend({
   //全局函數
    wid:function ($elem) {
    $elem.css("width","200")；
    }
  })

調用對象方法和全局函數

    $("div").click(function () {
    //測試對象方法
    $(this).test();
    //測試全局函數
    $.wid($(this));
    })

三、HTML5新表單

input新類型:

email:驗證是否包含@
search:搜索框
url: 驗證是否包含http
tel: 效果只能在移動端出現
number: 數字選擇 min max step
range: 范圍類型 min max step value
color: 顏色選擇器
date:日期類型
week:星期類型
month:月份類型

email:<input type="email"><br/>
    search:<input type="search" value="124324"><br>
    url: <input type="url"><br>
    tel: <input type="tel"><br>
    num: <input type="number" min="10" max="50" step="5"><br>
    range: <input type="range" min="0" max="100" step="40" ><br>
    color: <input type="color"><br>
    date: <input type="date"><br>
    week: <input type="week"><br>
    month <input type="month"><br>
    <input type="submit" value="注冊">

表單新元素

datalist: 定義input的備選框

input的list的值要等于datalist的id值
數據與結構的分離
數據：預定義數據內容datalist
結構：顯示在頁面中的元素input
使用datalist元素定義的數據，可以重復使用

<input type="text" list="datalist">
<datalist id="datalist">
<option>南京</option>
<option>上海</option>
<option>北京</option>
</datalist>

datalist

progress: 進度條

max - 設置進度條的最大值
沒有min屬性 - 最小值為0
value - 當前的進度值

<progress max="100" min="0" value="20"></progress>

progress

meter : 刻度

min: 最小值
max: 最大值
value: 當前值
low: 低預警值
high:高預警值

<meter max="100" min="0" low="20" high="80" value="90"></meter>

meter

表單新屬性

1. placeholder ： 置空字符

2. multiple:允許輸入多個值
   多個值使用逗號隔開，例如多個郵箱
   只定義屬性名，沒有定義屬性值

3）autofocus:自動獲取焦點
只定義屬性名，沒有定義屬性值

4）form：允許將表單元素定義在表單外

form表單外的表單一定要寫form的id