當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

WEB入门之十九 UI

發布時間：2024/1/23 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 WEB入门之十九 UI 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

視頻課：https://edu.csdn.net/course/play/7621

學習內容

? ? ? ? jQuery UI核心
? ? ? ?jQuery UI交互組件
? ? ? ? jQuery UI微件
? ? ? ? jQuery效果庫

能力目標

? ? ? ? 熟悉jQuery UI庫
? ? ? ? 能熟練使用UI庫中的常用組件

本章簡介

jQuery本身注重于后臺，沒有漂亮的界面，而jQuery UI的出現則補充了前者的不足，它提供了諸多的組件和華麗的界面，使用方便、靈活。

jQuery UI是在jQuery的基礎上，利用jQuery的擴展性而設計的針對UI的插件。它提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等。本章將學習jQuery UI中的各種組件。

核心技能部分

9.1????????????jQuery UI簡介

UI即User Interface，指的是用戶界面。jQueryUI是以jQuery為基礎的開源JavaScript網頁用戶界面插件。包含底層用戶交互、動畫特效和可更換主題的可視組件。開發人員可以直接用它來構建具有很好交互性的Web前端界面。所有插件經測試能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+和Google Chrome等瀏覽器。

jQuery UI主要分為4個部分：核心部分、交互行為組件、微件和動畫效果組件。

核心：這是jQuery UI的核心代碼，包含最底層、最基本的函數和初始化組件，供其他地方調用。

交互行為組件：交互部件是一些與鼠標交互相關的內容，包括Draggable（拖動）、Droppable（置放）、Resizable（縮放）、Selectable（選擇）和Sortable（排序）等。

微件：主要是一些界面的擴展，包括Accordion（手風琴）、AutoComplete（自動完成）、Dialog（對話框）、Slider（滑塊）、Tabs（選項卡）、DatePicker（日歷）、ProgressBar（進度條）等。

我們可以從http://jqueryui.com/download下載最新的jQuery UI庫，目前版本是1.8.21。下載的時候可以有選擇的進行定制下載。

下載后會得到一個壓縮包，解壓該文件，里面會有很多js文件和css文件，開發時需要導入這些文件才能使用jQuery UI組件。

9.1????????????Widgets微件

Widgets即小部件、微件，是跟HTML中的頁面元素（例如：按鈕、對話框等）比較相似的組件。jQuery UI提供的微件的界面更好看，功能更強大，詳見表9-1-1所示。

表9-1-1? jQuery UI微件

微件名稱	說明
Accordion	手風琴組件
Button	按鈕組件
Dialog	對話框組件
Tabs	選項卡組件
Datepicker	日歷組件

9.1.1?????????Accordion

Accordion即手風琴，這是一種常見的界面組件。我們先認識一下這個組件的最簡單用法，參考代碼如下所示。

示例9.1

<!DOCTYPE html> <html> <head><title>示例9.1</title><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /> <link rel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><script src="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.accordion.js"></script><script>$(function() {$( "#acc" ).accordion();});</script> </head> <body> <div id="acc"><h3><a href="#">我的家人</a></h3><div><ul><li>Jack</li><li>Tom</li><li>Mary</li></ul></div><h3><a href="#">我的好友</a></h3><div><ul><li>Jack</li><li>Tom</li><li>Mary</li></ul></div><h3><a href="#">我的同事</a></h3><div><ul><li>Jack</li><li>Tom</li><li>Mary</li></ul></div><h3><a href="#">我的同學</a></h3><div><ul><li>Jack</li><li>Tom</li><li>Mary</li></ul></div> </div> </body> </html>

上述代碼加粗部分是我們實現手風琴組件必須要導入的文件，jquery.ui.all.css是一個包含了手風琴組件樣式的文件；jquery-1.7.2.js是jQuery庫文件；jquery.ui.widget.js包含了所有jQuery UI微件都需要用到的底層、核心函數；jquery.ui.accordion.js是實現手風琴組件的js文件。前四個文件幾乎是在使用jQueryUI微件時都需要導入的文件。

上述代碼使用accordion函數使一個id是acc的div元素初始化成了手風琴組件，見斜體部分。成為手風琴組件的元素需要滿足以下條件：

?????????盡量使用塊狀標簽布局，否則布局會亂

?????????每個組都分為標題和身體，上述代碼中的超鏈接相當于標題，無序列表所在的div相當于身體，身體必須緊挨著標題

上述代碼給我們展示的是jQuery中手風琴組件的默認效果，我們還可以通過該組件的相關參數來定制多種多樣的手風琴組件。

accordion參數主要用來設置手風琴組件的外觀，常用的參參數下所示：

?????????active：設置手風琴組件加載完畢時默認展開哪一組，默認是第一組。

?????????autoHeight：用來設置手風琴組件中的所有組的高度都一樣，即采用最高組的高度，默認值是true。

?????????autoWidth：用來設置手風琴組件中的所有組的寬度都一樣，即采用最寬組的寬度，

默認值是true。

?????????event：用來設置使用哪個事件來觸發手風琴組件中每組的展開，默認值是click。

?????????fillSpace：用來設置手風琴組件的高度與其父容器一致，將覆蓋autoHeight，默認值是false。

?????????icons：用來設置每組標題的圖標，子屬性header用來設置分組閉合時的圖標，headerSelected用來設置分組展開時的圖標。jQuery提供了超過150種的圖標，請參考jQuery官方網站。

?????????collapsible：用來設置是否可以單獨展開/閉合手風琴組件中的某個組，默認值是false。

參數的使用方式有三種：

1．初始化組件時設置參數的值

jQuery對象. accordion ( { 參數名：參數值，... ... } )

2．獲得參數的值

jQuery對象. accordion ( "option" , ?"參數名" )

3．設置參數的值

jQuery對象. accordion ( "option" , "參數名" , 參數值 )

jQuery UI中其他組件參數的用法與之一樣，后面不再多述。下面我們通過一個示例來演示上述部分參數的用法，參考代碼如下所示。

示例9.2

//其他代碼跟示例9.1一樣

//其他代碼跟示例9.1一樣

上述代碼設置手風琴組件默認展開第3組，通過鼠標懸浮事件來展開組，并且標題的圖標也進行了更換

9.1.1?????????Button

Button即按鈕，但是jQuery UI中的按鈕豐富多樣，包括類似于HTML中的按鈕，以及復選按鈕、單選按鈕、工具欄等。我們先認識一下這個組件的最簡單用法，參考代碼如下所示。

示例9.3

<!DOCTYPE html> <html> <head><metacharset="utf-8"><title>示例9.3</title><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.button.js"></script><script>$(function() {$("input, a, span").button();$("a").click(function(){alert("鼠標單擊事件有效");});});</script> </head> <body> <span>span標簽</span> <input type="button" value="HTML按鈕"/> <a href="#">HTML超鏈接</a> </body> </html>

上述代碼加粗部分是我們實現按鈕組件必須要導入的文件，其中jquery.ui.button.js是實現按鈕組件的js文件。

上述代碼使用button函數使頁面中的span、提交按鈕和超鏈接初始化成了按鈕組件，見斜體部分。button函數還可以把HTML中的radio、checkbox封裝成Button組件，例如下面的代碼。

示例9.4

<!DOCTYPE html> <html> <head><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><title>示例9.4</title><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.button.js"></script><script>$(function() {$("input").button();});</script> </head> <body><inputtype="checkbox" id="check1"/><labelfor="check1">籃球</label><inputtype="checkbox" id="check2"/><labelfor="check2">足球</label><br/><br/><inputtype="radio" id="radio1" name="radio"checked="checked"/><labelfor="radio1">男</label><inputtype="radio" id="radio2" name="radio"/><labelfor="radio2">女</label> </body> </html>

要使HTML中的radio和checkbox能順利被封裝成Button組件，就必須為每個radio或checkbox設置一個label標簽，該標簽用來設置文本信息。它的for屬性用來關聯某個radio或checkbox，即該屬性的值是某個radio或checkbox的id。上述代碼的運行效果如圖9.1.6所示。

上述代碼給我們展示的是jQuery中按鈕組件的默認效果，我們還可以通過該組件的相關參數來定制多種多樣的按鈕組件。

Button參數主要用來設置按鈕組件的外觀，常用的參數下所示：

?????????text：用來設置是否顯示按鈕上的文本，默認值是true。

icons：用來設置按鈕上的圖標，子屬性primary用來設置文本左邊的圖標，子屬性

secondary用來設置文本右邊的圖標。

?????????label：用來設置按鈕上的文本信息。

下面我們通過一個示例來演示上述參數的用法，參考代碼如下所示。

示例9.5

<!DOCTYPE html> <html> <head><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><title>示例9.5</title><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.button.js"></script><script>$(function() {$("span").button({icons: {primary:"ui-icon-locked"},text: false});$("input").button({icons: {primary:"ui-icon-locked"}});$("a").button({icons: {primary:"ui-icon-gear",secondary:"ui-icon-triangle-1-s"}});$("div").button({icons: {primary:"ui-icon-gear",secondary:"ui-icon-triangle-1-s"},text: false});});</script> </head> <body><span>span標簽</span><br/><br/><inputtype="button" value="HTML按鈕"/><br/><br/><ahref="#">HTML超鏈接</a><br/><br/><div>div標簽</div> </body> </html>

上述代碼給Button組件設置了幾種不同的圖標

9.1.1?????????Datepicker

Datepicker即日期選擇器，類似于JavaScript中的日歷控件。jQuery UI中的日期選擇器靈活易用，可自由定制多種風格的界面。我們先認識一下這個組件的最簡單用法，參考代碼如下所示。

示例9.6

<!DOCTYPE html> <html> <head><title>示例9.6</title><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><linkrel="stylesheet" href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.datepicker.js"></script><script>$(function() {$( "#dp").datepicker();});</script> </head> <body> 請選擇日期: <input type="text" id="dp"> </body> </html>

上述代碼加粗部分是我們實現日期選擇器組件必須要導入的文件，其中jquery.ui.datepicker.js是實現該組件的js文件。

上述代碼使用datepicker函數為頁面中的某個文本框提供了日期選擇器，見斜體部分。

上述代碼給我們展示的是jQuery中日期選擇器組件的默認效果，我們還可以通過該組件的相關參數來定制多種多樣的日期選擇器。

Datepicker參數主要用來設置日期選擇器組件的外觀，常用的參數下所示：

?????????dateFormat : 用來設置選取日期的格式，例如mm/dd/yy、yy-mm-dd等。

?????????changeMonth/changeYear : 用來設置月份和年份以下拉列表框的形式顯示，默認值是false。

?????????showOtherMonths : 用來設置是否在日期面板中顯示其他月份的日期，默認值是false。

?????????selectOtherMonths : 用來設置是否可以在日期面板中選擇其他月份的日期，默認值是false。

?????????dayNamesShort/dayNamesMin : 用來設置日期面板上顯示的星期的字符串，默認是英文，例如Sun、Mon、Tue等。

?????????monthNamesShort/monthNamesMin :用來設置日期面板上顯示的月份的字符串，默認是英文，例如Jan、Feb、Mar等。

下面我們通過一個示例來演示上述參數的用法，參考代碼如下所示。

示例9.7

<!DOCTYPE html> <html> <head><title>示例9.7</title><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.datepicker.js"></script><script>$(function(){$("#dp").datepicker({changeMonth:true,changeYear:true,showOtherMonths:true,selectOtherMonths:true});$("#dp").datepicker("option","monthNamesShort",['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']);$("#dp").datepicker("option","dayNamesMin",['日','一','二','三','四','五','六']);$("#format").change(function(){$("#dp").datepicker("option","dateFormat", $(this).val());});});</script> </head> <body> 請選擇格式：<selectid="format"><option value="mm/dd/yy">mm/dd/yy</option><option value="yy-mm-dd">yy-mm-dd</option><option value="d MM, y">d MM, y</option><optionvalue="DD, d MM, yy">DD, d MM, yy</option></select><br/><br/> 請選擇日期: <input type="text" id="dp"> </body> </html>

9.1.1?????????Dialog

Dialog即對話框，類似于DOM中的alert或confirm，但是jQuery中的對話框更加美觀易用，它可以浮動、可以拖動、可以改變大小。我們先認識一下這個組件最簡單的用法，參考代碼如下所示。

示例9.8

<!DOCTYPE html> <html> <head><title>示例9.8</title><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><script src="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.mouse.js"></script><scriptsrc="../../ui/jquery.ui.draggable.js"></script><scriptsrc="../../ui/jquery.ui.resizable.js"></script><scriptsrc="../../ui/jquery.ui.position.js"></script><scriptsrc="../../ui/jquery.ui.dialog.js"></script><script>$(function() {$( "#dt").dialog();});</script> </head> <body> <div id="dt" title="系統提示">歡迎使用本系統 </div> </body> </html>

上述代碼加粗部分是我們實現對話框組件必須要導入的文件，其中jquery.ui.dialog.js是實現對話框組件的js文件；jquery.ui.mouse.js提供了鼠標拖動對話框的支持；jquery.ui.draggable.js實現了鼠標拖動；jquery.ui.position.js提供了對話框居中顯示功能。>上述代碼給Button組件設置了幾種不同的圖標

上述代碼使用dialog函數使一個id是dt的div元素初始化成了對話框組件，見斜體部分。

上述代碼給我們展示的是jQuery中對話框的默認效果，我們還可以通過該組件的相關參數來定制多種多樣的對話框。

Dialog參數主要用來設置對話框的外觀，常用的參數下所示：

?????????buttons：用來設置在對話框上現實哪些按鈕，同時可指導按鈕對應的事件函數。

?????????closeOnEscape：用來設置是否可以通過按下ESC鍵來關閉對話框，默認值為true。

?????????draggable：用來設置是否可以拖拽對話框進行移動，默認值為true。

?????????height/width：用來設置對話框的高/寬。

?????????modal：用來設置該對話框是否為模式對話框，默認值為false。

?????????position：用來設置對話框在網頁中顯示的位置，默認值為center，其他取值有left、right、top和bottom。

?????????resizable：用來設置對話框是否允許調整大小，默認值為true。

下面我們通過一個示例來演示上述參數的用法，參考代碼如下所示。

示例9.9

<!DOCTYPE html> <html> <head><title>示例9.9</title><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.mouse.js"></script><scriptsrc="../../ui/jquery.ui.button.js"></script><scriptsrc="../../ui/jquery.ui.draggable.js"></script><scriptsrc="../../ui/jquery.ui.position.js"></script><script src="../../ui/jquery.ui.dialog.js"></script><script>$(function() { $("#dialog-confirm" ).dialog({resizable: false,height:220,width:350,modal: true,buttons: [{text: "登錄",click: function(){$(this).dialog("close"); }},{text: "取消",click: function(){$(this).dialog("close"); }}]});});</script> </head> <body> <div id="dialog-confirm" title="用戶登錄">登錄名稱：<inputtype="text"/><br/><br/>登錄密碼：<inputtype="password"/> </div> </body> </html>

上述代碼在示例9.8的基礎上多導入了一個jquery.ui.button.js文件，該文件不是必須的，它的作用是可以把頁面上原始的input按鈕自動封裝成jQuery UI中的Button。通過圖9.1.11可以看到，該對話框不能改變大小，是一個帶有兩個按鈕的模式對話框。

9.1.1?????????Tabs

Tabs即選項卡組件，跟手風琴組件很相似，只不過選項卡是橫向排列分組，而手風琴組件是縱向排列分組。我們先認識一下這個組件最簡單的用法，參考代碼如下所示。

示例9.10

<!DOCTYPE html> <html> <head><title>示例9.10</title><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.tabs.js"></script><script>$(function() {$("#t" ).tabs();});</script> </head> <body> <div id="t"><ul><li><a href="#tabs-1">標題1</a></li><li><a href="#tabs-2">標題2</a></li><li><a href="#tabs-3">標題3</a></li></ul><divid="tabs-1">選項卡1</div><divid="tabs-2">選項卡2</div><divid="tabs-3">選項卡3</div> </div> </body> </html>

上述代碼加粗部分是我們實現選項卡組件必須要導入的文件，其中jquery.ui.tabs.js是實現選項卡組件的js文件。ine-height:150%;font-family:宋體;mso-ascii-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:"Times New Roman";mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>提供了對話框居中顯示功能。>上述代碼給Button組件設置了幾種不同的圖標

上述代碼使用tabs函數使一個id是t的div元素初始化成了選項卡組件，見斜體部分。選項卡的標題使用列表實現，選項卡的身體使用div實現，并且通過標題列表中的超鏈接把標題和對應的身體關聯起來，即超鏈接href屬性的值是下面某個div的id。

上述代碼給我們展示的是jQuery中選項卡的默認效果，我們還可以通過該組件的相關參數來定制多種多樣的選項卡。

Tabs參數主要用來設置選項卡的外觀，常用的參數下所示：

?????????selected : 用來設置選項卡默認顯示的tab，默認值是0，即第一個選項卡。

?????????event : 用來設置通過哪個事件來觸發選項卡的切換，默認是click。

?????????collapsible : 用來設置是否可以單獨顯示/關閉某個tab，默認值是false。

下面我們通過一個示例來演示上述參數的用法，參考代碼如下所示。

示例9.11

<!DOCTYPE html> <html> <head><title>示例9.11</title><meta http-equiv="Content-Type"content="text/html; charset=gb2312" /><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><script src="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.tabs.js"></script><script>$(function() {$( "#t" ).tabs({event:"mouseover",collapsible:true,selected:2});});</script> </head> <body> <div id="t"><ul><li><a href="#tabs-1">標題1</a></li><li><a href="#tabs-2">標題2</a></li><li><a href="#tabs-3">標題3</a></li></ul><divid="tabs-1">選項卡1</div><divid="tabs-2">選項卡2</div><divid="tabs-3">選項卡3</div> </div> </body> </html>

-font-family:Calibri;mso-hansi-font-family:Calibri;mso-bidi-font-family:"Times New Roman";mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>組件設置了幾種不同的圖標

9.1????????????交互行為組件

Web前端的主要作用之一就是跟用戶進行交互，無論是數據上的交互，還是界面上的交互。而jQuery UI中的交互行為組件主要針對界面上的交互，例如鼠標拖拽、排序、調整大小等，詳見表9-1-2所示。

表9-1-2? 交互行為組件

組件名稱	說明
Draggable	該組件可以使鼠標拖動頁面元素
Resizable	該組件可以使鼠標調整頁面元素的大小

9.1.1?????????Draggable

Draggab即鼠標拖動，主要可以實現通過鼠標拖動頁面元素，例如拖動層、拖動圖片或表格等。我們先認識一下Draggab最簡單的用法，參考代碼如下所示。

示例9.12

<!DOCTYPE html> <html> <head><title>示例9.12</title><metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.mouse.js"></script><scriptsrc="../../ui/jquery.ui.draggable.js"></script><style type="text/css">#mydiv {width: 300px;height: 200px;background:silver;}</style><script>$(document).ready(function(){$("#mydiv").draggable();$("#myimg").draggable();$("#mytable").draggable();});</script></head><body><divid="mydiv"><h3>我是可以拖動的層</h3></div><img id="myimg" src="images/test.gif"/><table id="mytable" border="1"><tr><td>哈</td><td>哈哈</td><td>哈哈哈</td></tr><tr><td>哈</td><td>哈哈</td><td>哈哈哈</td></tr><tr><td>哈</td><td>哈哈</td><td>哈哈哈</td></tr></table></body> </html>

上述代碼加粗部分是我們實現鼠標拖動必須要導入的文件，其中jquery.ui.draggable.js是實現鼠標拖動的js文件。

9.1.1?????????Resizable

頁面上的HTML元素大部分是不可以動態調整大小的，但在實際開發中是有這種需求的。jQuery中的Resizable可以幫助開發人員快速、輕松的實現這個需求。下面先看一下Resizable最簡單的用法，參考代碼如下所示。

示例9.13

<!DOCTYPE html> <html> <head><title>示例9.13</title><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><linkrel="stylesheet" href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.ui.core.js"></script><scriptsrc="../../ui/jquery.ui.widget.js"></script><scriptsrc="../../ui/jquery.ui.mouse.js"></script><script src="../../ui/jquery.ui.resizable.js"></script><style>#rd { width: 150px; height:150px; padding: 0.5em; border:#999999 thin solid}</style><script>$(function() {$( "#rd" ).resizable();$( "#ta" ).resizable();});</script> </head> <body> <div id="rd">這是可自由改變大小的div </div> <br/> <textarea cols="50" rows="20"id="ta">這是可自由改變大小的文本域 </textarea> </body> </html>

上述代碼加粗部分是我們實現鼠標拖動必須要導入的文件，其中jquery.ui.resizable.js是實現調整大小的js文件。

9.1????????????動畫效果庫

jQuery UI提供了一個動畫效果庫，它擴充了前面我們講的動畫特效函數和animate函數，實現了大量現成的動畫特效，詳見表9-1-3所示。

表9-1-3? 動畫效果庫

函數名稱	說明
show / hide	元素顯示/隱藏時的動畫效果，擴充了前面的show / hide函數
effect	主要通過改變大小、位置等實現動畫特效

9.1.1?????????show / hide函數

jQuery UI動畫特效庫中的show / hide函數對前面講的show /hide函數進行了功能上的擴充，動畫效果更多，可以靈活定制。具體語法如下所示：

語法

jQuery對象.? show / hide ( effectName, [options] , [speed] , [callback] )

該函數有四個參數，第一個是必須的，后面都是可選的，下面是參數介紹。

?????????effectName ：設置效果名稱，詳見表9-1-4所示。

?????????options ：設置能控制元素大小、位置的參數，通常可采用默認設置。

?????????speed ：設置動畫的速度，取值有slow，normal和fast ，也可自定義一個數字，單位是毫秒。

?????????callback ：設置動畫執行完后的回調函數。

表9-1-4 效果列表

效果名稱	說明	對應JS文件
blind??????	從上向下/從下向上收縮元素?	jquery.effects.blind.js
bounce?????	上下晃動元素?	jquery.effects.bounce.js
clip???????	上下同時收縮元素	jquery.effects.clip.js
drop???????	向左邊移動并提升/降低透明度，直到顯示/隱藏?	jquery.effects.drop.js
explode????	將元素拆分成9宮格，向外/內擴展，直到隱藏/顯示	jquery.effects.explode.js
fold???????	向左展開，再向下展開，直到顯示向上收起，再向左收起，直到隱藏	jquery.effects.fold.js
highlight??	使元素高亮	jquery.effects.highlight.js
pulsate????	使元素閃爍	jquery.effects.pulsate.js
scale??????	元素四周從中心同時擴展直到顯示元素四周從外圍同時收縮直到隱藏	jquery.effects.scale.js
shake??????	左右晃動元素	jquery.effects.shake.js
slide??????	從左往右滑動元素直到全部顯示從右往左滑動元素直到全部隱藏	jquery.effects.slide.js

下面我們通過一個示例來演示上述動畫的效果，參考代碼如下所示。

示例9.14

<!DOCTYPE html> <html> <head><title>示例9.14</title><metahttp-equiv="Content-Type" content="text/html;charset=gb2312" /><linkrel="stylesheet"href="../../themes/base/jquery.ui.all.css"><scriptsrc="../../jquery-1.7.2.js"></script><scriptsrc="../../ui/jquery.effects.core.js"></script><script src="../../ui/jquery.effects.blind.js"></script><scriptsrc="../../ui/jquery.effects.bounce.js"></script><scriptsrc="../../ui/jquery.effects.clip.js"></script><scriptsrc="../../ui/jquery.effects.drop.js"></script><scriptsrc="../../ui/jquery.effects.explode.js"></script><scriptsrc="../../ui/jquery.effects.fold.js"></script><scriptsrc="../../ui/jquery.effects.highlight.js"></script><scriptsrc="../../ui/jquery.effects.pulsate.js"></script><scriptsrc="../../ui/jquery.effects.scale.js"></script><scriptsrc="../../ui/jquery.effects.shake.js"></script><scriptsrc="../../ui/jquery.effects.slide.js"></script><style>.toggler { width:500px; height:200px;}#effect { width:400px; height:160px;padding:0.4em; border:#666666 thinsolid}#effect h3 { margin:0;padding:0.4em; text-align:center; background-color:#CCCCCC}</style><script>$(function() {function runEffect() {var selectedEffect =$("#effectTypes").val();$("#effect").show(selectedEffect,null, "slow", callback);};function callback() {$("#effect").removeAttr("style").fadeOut();};$("#btn").click(function() {runEffect();});});</script> </head> <body> <div class="toggler"><divid="effect"><h3>show動畫測試</h3><p><pre>

UI即User Interface，指的是用戶界面。 jQuery UI是以jQuery為基礎的開源JavaScript網頁用戶界面插件。包含底層用戶交互、動畫特效和可更換主題的可視組件。開發人員可以直接用它來構建具有很好交互性的Web前端界面。所有插件經測試能兼容IE6, Firefox和Google Chrome等瀏覽器。</pre></p></div> </div> <select id="effectTypes"><optionvalue="blind">Blind</option><option value="bounce">Bounce</option><optionvalue="clip">Clip</option><optionvalue="drop">Drop</option><optionvalue="explode">Explode</option><optionvalue="fold">Fold</option><optionvalue="highlight">Highlight</option><optionvalue="pulsate">Pulsate</option><optionvalue="scale">Scale</option><optionvalue="shake">Shake</option><optionvalue="size">Size</option><optionvalue="slide">Slide</option> </select> <input type="button" value="執行"id="btn"/> </div> </body> </html>

上述代碼為了在一個示例中集中演示所有的動畫效果，所以導入了大量的JS文件。在實際開發中，需要用哪個動畫效果就導入哪個JS文件即可。

由于show函數的第1個參數是效果名，所以我們把所有的效果名都放在了下拉列表框中。用戶選擇某個選項后，

上述代碼中的斜體部分調用了show函數，把下拉列表框中選中項的值作為第一個參數使用。hide函數的用法跟show函數一樣，只不過它是用來實現元素隱藏時的動畫。我們在上述代碼的基礎上實現了一個演示hide函數的示例，參考代碼如下所示。

示例9.15

//部分代碼省略，跟示例9.14一樣

//部分代碼省略，跟示例9.14一樣

上述代碼除腳本外都和上個示例一樣，斜體部分調用了hide函數，把下拉列表框中選中項的值作為第一個參數使用。

9.1.1?????????effect函數

effect函數的用法和show/hide函數一樣，只不過該函數用在已經顯示到了頁面上的元素，然后主要通過改變元素形狀（大小、位置等）來實現動畫特效的，具體語法如下所示：

語法

jQuery對象 . effect ( effectName , [options] , [speed] , [callback] )

各個參數在前面已經講過，這里不再多述。

下面我們修改上面的代碼，使用effect函數來演示各種動畫特效，參考代碼如下所示。

示例9.16

//部分代碼省略，跟示例9.14一樣

//部分代碼省略，跟示例9.14一樣

9.1.1?????????下載主題

主題即Themes，是指一整套、一系列樣式的集合，相當于網頁的皮膚。jQuery為UI組件提供了現成的多個主題，我們可以從其官方網站（ http://jqueryui.com/download ）上直接下載si-font-family:Calibri;mso-bidi-font-family:"Times New Roman";mso-ansi-language:EN-US;mso-fareast-language:ZH-CN;mso-bidi-language:AR-SA'>函數，把下拉列表框中選中項的值作為第一個參數使用。

選擇一個主題，例如“UIlightness”，下載后會得到一個壓縮包文件，該文件中包含了大量的CSS樣式文件、圖片和JS文件等。

9.1.1?????????應用主題

解壓下載到的主題壓縮文件，找到其中以主題名命名的文件夾，例如ui-lightness，該文件夾中存放的就是跟該主題相關的CSS樣式文件和圖片，哪個網頁需要用這個主題只需要導入其中的jquery.ui.all.css樣式文件即可。

前面我們寫的示例沒有應用任何主題，例如下面的代碼：

??? //其他代碼省略

<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">?

???? <scriptsrc="../../jquery-1.7.2.js"></script>

??? <scriptsrc="../../ui/jquery.ui.core.js"></script>

??? <scriptsrc="../../ui/jquery.ui.widget.js"></script>

???? //其他代碼省略

加粗部分使用link標簽導入了base文件夾中的jquery.ui.all.css文件，該文件是jQuery UI默認無主題樣式。如果需要使用某個主題，例如lightness，只需做如下修改即可：

jQuery UI主題比較多，這里不再一一展現效果圖了。另外，jQuery官方網站還提供了自定義主題的功能，地址是http://jqueryui.com/themeroller/。如需自定義主題，可以訪問該地址，自定義好后jQuery會自動生成相關的主題文件，我們只需下載下來即可。

本章總結

本章我們主要學習jQuery UI，包括微件、交互行為組件、動畫效果庫以及主題。微件是jQuery提供的現成的一些頁面控件，簡單易用；交互行為組件主要指的是用戶通過鼠標可以進行拖拽和調整大小；動畫效果庫提供了大量的動畫樣式，通過一些函數即可實現。

主題就是UI的皮膚，jQuery在其官方網站上提供了多個主題，我們可以根據需要下載使用。

任務實訓部分

1：實現工具欄

訓練技能點

?????????jQuery? Button組件

? 需求說明

使用jQuery Button組件實現工具欄。

實現步驟

（1）實現圖9.2.1所示的界面，參考代碼如下所示。

<div class="demo"> <span id="toolbar" class="ui-widget-headerui-corner-all"><buttonid="beginning">go to beginning</button><buttonid="rewind">rewind</button><buttonid="play">play</button><buttonid="stop">stop</button><buttonid="forward">fast forward</button><buttonid="end">go to end</button><inputtype="checkbox" id="shuffle" /><labelfor="shuffle">Shuffle</label><spanid="repeat"><input type="radio" id="repeat0"name="repeat" checked="checked" /><label for="repeat0">No Repeat</label><input type="radio" id="repeat1"name="repeat" /><labelfor="repeat1">Once</label><input type="radio" id="repeatall"name="repeat" /><labelfor="repeatall">All</label></span> </span> </div>

（2）調用jQuery中的button函數改變按鈕的樣式，部分參考代碼如下所示。

$( "#beginning" ).button({text: false,icons: {primary: "ui-icon-seek-start"}});$( "#rewind" ).button({text: false,icons: {primary: "ui-icon-seek-prev"}});$( "#play" ).button({text: false,icons: {primary: "ui-icon-play"}})
?

2：手風琴相冊

訓練技能點

?????????jQuery? Accordion組件

? 需求說明

實現圖9.2.2所示的界面，右側是手風琴效果，主要是圖片介紹，左側顯示相關的圖片。切換手風琴中的分組時，左側圖片發生相應的改變。

圖9.2.2? 手風琴相冊

3：可拖動的菜單

訓練技能點

?????????jQuery? Draggable

? 需求說明

在實訓任務1的基礎上，實現通過鼠標可以拖動工具欄，但是只能拖動到頁面的上端或下端。如果拖動到了其他地方，當松開鼠標時，工具欄回歸原位。

4：來信閃爍

訓練技能點

?????????jQuery? effect函數

? 需求說明

圖9.2.3是一個QQ工具欄，現在要求使用effect函數使工具欄上的郵箱圖標閃爍。

圖9.2.3? 來信閃爍

實現思路

郵箱圖標是一個圖片，只需要使用effect函數實現該圖片的閃爍效果即可。

關鍵代碼

5：更換主題

訓練技能點

?????????jQuery主題

? 需求說明

從jQuery官方網站上下載一個UI主題，然后把前面的實訓任務改成這個主題。

總結

以上是生活随笔為你收集整理的WEB入门之十九 UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： sftp get服务器无文件会抛异常,s
下一篇： Oracle 重复数据查询以及删除