jQuery筆記——UI

jQuery UI 的官網網站爲：http://jqueryui.com/，咱們下載最新版本的便可，使用JQueryUI中的樣式比咱們使用原生的HTML要好看，還會有一些封裝好的特效，JQueryUI通常都是使用在咱們本身設置的js中

裏面目錄結構以下：

1.css，包含與 jQuery UI 相關的 CSS 文件

2.js，包含 jQuery UI 相關的 JavaScript 文件

3.Development-bundle，包含多個不一樣的子目錄：demos(jQuery UI 示例文件)、docs(jQuery UI 的文檔文件)、themes(CSS 主題文件)和 ui(jQuery ui 的 JavaScript 文件)

4.Index.html，能夠查看 jQuery UI 功能的索引頁

JS 引入和 CSS 引入：

<script type="text/javascript" src="js/jquery.js"></script>
<!--JQueryUI放在jQuery.js後面-->
<script type="text/javascript" src="js/jquery.ui.js"></script>
<!--本身的js放在最後-->
<script type="text/javascript" src="js/index.js"></script>

<link rel="stylesheet" href="css/smoothness/jquery.ui.css" type="text/css" />
<!--本身的css放在JQuery的css後面-->
<link rel="stylesheet" href="css/style.css" 

 

按鈕

按鈕（button），能夠給生硬的原生按鈕或者文本提供更多豐富多彩的外觀。它不僅僅 能夠設置按鈕或文本，還能夠設置單選按鈕和多選按鈕。使用 button 按鈕 UI 的時候，不必定必須是 input 按鈕形式，普通的文本也能夠設置成 button 按鈕

HTML：

<input type="button" value="查詢" id="search_button" />

JQuery：

$('#search_button').button();

 

button()方法的屬性

是以對象鍵值對的形式傳參，每一個鍵值對錶示一個選項

 

 

$('#search_button').button({
disabled : false,
icons : {
primary : 'ui-icon-search',
},
label : '查找',
text : false,
});

注意：對於 button 的事件方法，只有一個：create，當建立 button 時調用

 

button('action', param)方法能設置和獲取按鈕。action 表示指定操做的方式

//禁用按鈕
$('#search_button').button('disable');
//啓用按鈕
$('#search_button').button('enable');
//刪除按鈕
$('#search_button').button('destroy');

 

單選框、複選框

HTML 單選框：

<input type="radio" name="sex" value="male" id="male">
<label for="male">男</label>
</input>
<input type="radio" name="sex" value="female" id="female">
<label for="female">女</label>
</input>

 

jQuery：

//jQuery 單選框
$('#reg input[type=radio]').button();
//或者使用下面按鈕集
$('#reg').buttonset(); //HTML 部分作成一行便可

 

HTML 複選框：

<input type="checkbox" name="color" value="red" id="red">
<label for="red">紅</label>
</input>
<input type="checkbox" name="color" value="green" id="green">
<label for="green">綠</label>
</input>
<input type="checkbox" name="color" value="yellow" id="yellow">
<label for="yellow">黃</label></input>
<input type="checkbox" name="color" value="orange" id="orange">
<label for="orange">橙</label>
</input>

jQuery：

//jQuery 複選框
$('#reg input[type=radio]').button();
//或者使用下面按鈕集
 $('#reg').buttonset();

 

對話框

對話框（dialog），是 jQuery UI 很是重要的一個功能。它完全的代替了 JavaScript 的 alert()、prompt()等方法，也避免了新窗口或頁面的繁雜冗餘

HTML使用一個div便可:

<div id="reg" title="會員註冊"/>

 

在Js中使用：

$('#reg').dialog();

 

dialog()方法的屬性

$('#reg').dialog({
title : '註冊對話框',
buttons : {
'按鈕' : function () {}
}
});

$('#reg').dialog({
position : 'left top'
});

$('#reg').dialog({
height : 500,
width : 500,
minWidth : 300,
minHeight : 300,
maxWidth : 800,
maxHeight : 600
});

$('#reg').dialog({
show : true,
hide : true
});

注意：設置 true 後，默認爲淡入淡出，若是想使用別的特效，可使用如下表格中的字符串參數

 

$('#reg').dialog({
show : 'blind',
hide : 'blind'
});

$('#reg').dialog({
autoOpen : false,
draggable : false,
resizable : false,
modal : true,
closeText : '關閉' });

 

dialog()方法的事件

部分事件：

事件	說明
focus	當對話框被激活時（首次顯示以及每次在上面點擊）會 調用 focus 方法，該方法有兩個參數(event, ui)。此事件中 的 ui 參數爲空
create	當對話框被建立時會調用 create 方法，該方法有兩個參 數(event, ui)。此事件中的 ui 參數爲空
open	當對話框被顯示時（首次顯示或調用 dialog('open')方法） 會調用 open 方法，該方法有兩個參數(event, ui)。此事件 中的 ui 參數爲空
close	當 對 話 框 將 要 關 閉 時 （ 當 單 擊 關 閉 按 鈕 或 調 用 dialog('close')方法），會調用 close 方法。關閉的對話框可 以用 dialog('open')從新打開。該方法有兩個參數(event, ui)。此事件中的 ui 參數爲空

//當對話框得到焦點後
$('#reg').dialog({
focus : function (e, ui) {
alert('得到焦點');
}
});

});
//關閉對話框時
$('#reg').dialog({
close : function (e, ui) {
alert('關閉！');
}
});

咱們添加一個超連接，經過點擊超連接彈出對話框：

HTML：

<a href="###" id="reg_a">註冊</a> |

JQuery：

//打開對話框
$('#reg_a').click(function () {
$('#reg').dialog('open');
});

 

工具提示

工具提示（tooltip），是一個很是實用的 UI。它完全擴展了 HTML 中的 title 屬性，讓提示更加豐富，更加可控制，全面提高了用戶體驗

調用 tooltip()方法

在調用 tooltip()方法以前，首先須要針對元素設置相應 title 屬性

HTML：

 

<input type="text" name="user" class="text" id="user" title="請輸入賬號，不小於 2 位！" />

 

JQuery：

$('#user').tooltip();

修改 tooltip()樣式

在彈出的 tooltip 提示框後，在火狐瀏覽器中打開 Firebug 或者右擊->查看元素。這樣， 咱們能夠看看 tooltip 的樣式，根據樣式進行修改

//無須修改 ui 裏的 CSS，直接用 style.css 替代掉
.ui-tooltip {
color:red;
}

注意：其餘修改方案相似

tooltip()方法的屬性

 

$('[title]').tooltip({
disabled : false,
content : '改變文字',
items : 'input', tooltipClass : 'reg_tooltip'
});

$('#user').tooltip({
position : {
my : 'left center',
at : 'right+5 center'
}
});

$('#user').tooltip({
show : false,
hide : false,
});

注意：設置 true 後，默認爲淡入淡出，其餘的特效和Dialog相似

 

$('#user').tooltip({
track : true,
});

tooltip()方法的事件

 

//當建立工具提示時
$('#user').tooltip({
create : function () {
alert('建立觸發！');
}
});
//當工具提示關閉時
$('#user').tooltip({
close : function () {
alert('關閉觸發');
}
});
//當工具提示打開時
$('#user').tooltip({
open : function () {
alert('打開觸發');
}
});

//打開工具提示
$('#user').tooltip('open');
//關閉工具提示
$('#user').tooltip('close');
//禁用工具提示
$('#user').tooltip('disable');
//啓用工具提示
$('#user').tooltip('enable');
//刪除工具提示
$('#user').tooltip('destroy');

 

自動補全

自動補全（autocomplete），是一個能夠減小用戶輸入完整信息的 UI 工具。通常在輸 入郵箱、搜索關鍵字等，而後提取出相應完整字符串供用戶選擇

HTML：

        <p>
            <label for="email">郵　　箱：</label> <input type="text" name="email"
                class="text" id="email" />
        </p>

 

調用 autocomplete()方法

 

$('#email').autocomplete({
source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
});

 

autocomplete()方法的屬性

 

$('#email').autocomplete({
source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
disabled : false,
minLength : 2,
delay : 50,
autoFocus : true,
});

$('#email').autocomplete({
position : {
my : 'left center',
at : 'right center'
}
});

autocomplete()方法的事件

部分事件：

事件名	說明
create	當自動補全被建立時會調用 create 方法，該方法有兩個 參數(event, ui)。此事件中的 ui 參數爲空
open	當自動補全被顯示時，會調用 open 方法，該方法有兩個 參數(event, ui)。此事件中的 ui 參數爲空
close	當自動補全被關閉時，會調用 close 方法，該方法有兩個 參數(event, ui)。此事件中的 ui 參數爲空
focus	當自動補全獲取焦點時，會調用 focus 方法，該方法有兩 個參數(event, ui)。此事件中的 ui 有一個子屬性對象 item， 分別有兩個屬性：label，補全列表顯示的文本；value， 將要輸入框的值。通常 label 和 value 值相同
select	當自動補全獲被選定時，會調用 select 方法，該方法有兩 個參數(event, ui)。此事件中的 ui 有一個子屬性對象 item， 分別有兩個屬性：label，補全列表顯示的文本；value， 將要輸入框的值。通常 label 和 value 值相同
change	當自動補全失去焦點且內容發生改變時，會調用 change 方法，該方法有兩個參數(event, ui)。此事件中的 ui 參數爲空
search	當自動補全搜索完成後，會調用 search 方法，該方法有 兩個參數(event, ui)。此事件中的 ui 參數爲空
response	當自動補全搜索完成後，在菜單顯示以前，會調用 response 方法，該方法有兩個參數(event, ui)。此事件中 的 ui 參數有一個子對象 content，他會返回 label 和 value 值，可經過遍歷瞭解

$('#email').autocomplete({
source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'],
disabled : false,
minLength : 1,
delay : 0,
focus : function (e, ui) {
ui.item.value = '123';
},
select : function (e, ui) {
ui.item.value = '123';
},
change : function (e, ui) {
alert('');
},
search : function (e, ui) {
alert('');
},
});

//關閉自動補全
$('#email').autocomplete('close');
//禁用自動補全
$('#email').autocomplete('disable');
//啓用自動補全
$('#email').autocomplete('enable');
//刪除自動補全
$('#email').autocomplete('destroy');

郵箱自動補全

$('#email').autocomplete({
autoFocus : true,
delay : 0,
source : function (request, response) {
var hosts = ['qq.com','163.com', '263.com', 'gmail.com', 'hotmail.com'], //起始
term = request.term, //獲取輸入值
ix = term.indexOf('@'), //@
name = term, //用戶名
host = '', //域名
result = []; //結果
//結果第一條是本身輸入
result.push(term);
if (ix > -1) { //若是有@的時候
name = term.slice(0, ix); //獲得用戶名
host = term.slice(ix + 1); //獲得域名
}
if (name) {
//獲得找到的域名
var findedHosts = (host ? $.grep(hosts, function (value, index) {
return value.indexOf(host) > -1;
}) : hosts),
//最終列表的郵箱
findedResults = $.map(findedHosts, function (value, index) {
return name + '@' + value;
});
//增長一個自我輸入
result = result.concat(findedResults);
}
response(result);
},
});

 

日曆

日曆（datepicker）UI，可讓用戶更加直觀的、更加方便的輸入日期，而且還考慮不一樣國家的語言限制，包括漢語

HTML：

        <p>
            <label for="date">生　　日：</label> <input type="text" name="date"
                readonly="readonly" class="text" id="date" />
        </p>

調用 datepicker()方法

$('#date').datepicker();

datepicker()方法的屬性

部分屬性：

屬性	說明
dateFormat	指定日曆返回的日期格式（默認爲mm/dd/yy/時間）
showWeek	顯示周（默認false）
firstDay	指定日曆中的星期從星期幾開始。0 表示 星期日（0/數值）
changeMonth	若是設置爲 true，顯示快速選擇月份的下拉列表（默認是false）
changeYear	若是設置爲 true，顯示快速選擇年份的下拉列表（默認是false）
buttonText	觸發按鈕上顯示的文本（默認是'...'/字符串）
showButtonPanel	開啓顯示按鈕面板（默認是false）
closeText	設置關閉按鈕的文本（默認是字符串）
minDate	日曆中能夠選擇的最小日期
maxDate	日曆中能夠選擇的最大日期
yearRange	設置下拉菜單年份的區間。好比：1950:2020
hideIfNoPrevNext	設置爲 true，若是下一月不存在， 則隱藏按鈕

//日曆控件
    $('#date').datepicker({
        dateFormat : 'yy-mm-dd',
        changeYear : true,
        changeMonth : true,
        maxDate : 0,
        hideIfNoPrevNext : true,
        yearRange : '1950:2020',
    });

 

選項卡

選項卡（tab），是一種能提供給用戶在同一個頁面切換不一樣內容的 UI。 尤爲是在頁 面佈局緊湊的頁面上，提供了很是好的用戶體驗

HTML：

<div id="tabs">
<ul>
<li><a href="#tabs1">tab1</a></li>
<li><a href="#tabs2">tab2</a></li>
<li><a href="#tabs3">tab3</a></li>
</ul>
<div id="tabs1">tab1-content</div>
<div id="tabs2">tab2-content</div>
<div id="tabs3">tab3-content</div>
</div>

jQuery：

$('#tabs').tabs();

tabs()方法的屬性

$('#tabs').tabs({
collapsible : true,
disabled : [0],
event : 'mouseover',
active : false,
heightStyle : 'content',
hide : true,
show : true,
});

注意：hide/show設置 true 後，默認爲淡入淡出，其餘特效和Dialog同樣

咱們還能夠把li中的內容修改成一個頁面，tab會自動加載這個頁面，頁面內容可使用HTML標籤書寫

<ul>
<li><a href="tabs1.html">tab1</a></li>
<li><a href="tabs2.html">tab2</a></li>
<li><a href="tabs3.html">tab3</a></li>
</ul>

tab1.html：

<h3>爲什麼劉備無論多落魄都有人跟隨？</h3>
<div class="editor">
並且王粲還寫過這樣一句話：靈帝末年，備嘗在京師，復與曹公俱還沛國，募召合衆。會靈帝崩，天下大亂，備亦起軍，從討董卓。
<br/>
<br/>
若是這個事實成立，劉備和公孫瓚混的時候，還去過首都，並結識了曹操。這個結識可不簡單，復與曹公俱還沛國，募召合衆，這件事兒發生在靈帝死以前，泄露出的消息是什麼呢 ？
<br/>
<br/>
<p>
當時的西園八校尉的兵，多是本身招的。皇帝死後，蹇碩拿得住這支部隊才叫見鬼，何進...
</p>
</div>

 

摺疊菜單

摺疊菜單（accordion），和選項卡同樣也是一種在同一個頁面上切換不一樣內容的功能 UI。它和選項卡的使用幾乎沒有什麼太大區別，只是顯示的效果有所差別罷了

HTML 部分 :

<div id="accordion">
<h1>菜單 1</h1>
<div>內容 1</div>
<h1>菜單 2</h1>
<div>內容 2</div>
<h1>菜單 3</h1>
<div>內容 3</div>
</div>

jQuery :

$('#accordion').accordion();

accordion()方法的屬性

 

$('#accordion').accordion({
collapsible : true,
disabled : true,
event : 'mouseover',
active : 1,
active : true,
heightStyle : 'content',
header : 'h3',
icons: {
"header": "ui-icon-plus",
"activeHeader": "ui-icon-minus",
},
});

 

屏蔽低版本IE

屏蔽掉 IE6,7 等低版瀏覽器的支持，在<HTML>標籤前添加下面這句，就會在使用IE6,7的時候，跳轉到error.html頁

<!--[if lt IE 8]><script>window.location.href="/error.html/"</script><![endif]-->