jQuery實現的表頭固定效果實例【附完整demo源碼下載】
686
2024-02-23
如今，網站比以往更具可定制性，允許用戶更改其空間，根據自己的喜好對其進行個性化。個性化的主頁或儀表板頁面（例如 iGoogle、MyYahoo! 和 MyAOL）日漸普及，大多數 Web 應用程序內甚至也整合了類似的功能。jQuery 庫簡化了此類復雜 JavaScript 交互的編寫，隨著 jQuery UI 的引入，這項功能得到了進一步的簡化，該庫以易于訪問的 jQuery 插件的形式提供了常用用戶界面類型。
本文介紹了如何利用 Ajax 和 jQuery UI 創建具有各種定制功能的高度可定制的 UI。您將了解如何定制 Web 頁面的各個方面，以及如何使用 Ajax 保存首選項。此外，您還將利用拖放操作等技術來排序列表項，以及組織頁面元素和 UI 小部件來切換主題和配色方案 —一切都能在單獨一個 Web 頁面中完成。
創建定制 UI 功能
jQuery UI 是一個 UI 庫，其中包含易于編寫的交互、動畫和效果，還包括可輕松定制主題的小部件。您可以對下載進行定制，選擇您希望包含的主題，還可以提取組件，例如 UI 內核（必需）、交互、小部件或效果。要使用 jQuery UI，您還需要最新版本的 jQuery 庫。下載部分包含此庫，但您也可以在稍后需要更新此庫時直接從 jQuery 網站下載最新版本的庫。清單 1 展示了如何在 Web 頁面中包含 jQuery UI 庫和其他必備文件。
清單 1. 創建包含 jQuery UI 代碼的 Web 頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Creating Customizable Web Interfaces with the jQuery UI and Ajax </title> <link type="text/css" rel="stylesheet" /> <link type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-ui-1.8.6.custom.min.js"> </script> </head> <body> </body> </html>
所包含的第一個 CSS 提供了所選主題 ui-lightness 的代碼。 這是默認主題，是在 jQuery UI 下載過程中選定的，但您可以將其更改為所提供的任意主題。如果您已經下載了該庫，希望更新正在使用的主題，只需訪問 ThemeRoller，從庫中下載現有主題即可，也可以利用它來定制您自己的主題。代碼中包含的第二個 CSS 提供了定制類，用于設定頁面樣式，或者覆蓋所選主題內使用的屬性。最后，代碼中包含的 JavaScript 文件是 jQuery 和 jQuery UI 庫。
利用 jQuery UI 創建拖放式界面
拖放功能如今越來越常見，可用于排序列表和組織頁面元素，許多 Web 應用程序的個性化主頁中也使用了這種功能。jQuery UISortable 插件提供了為 Web 頁面添加可排序功能的快捷方法，帶有許多選項和事件，支持您按照自己希望的方式定制交互。
清單 2 中的示例展示了如何利用 Sortable 插件創建簡單的可排序列表。您可以利用此插件讓簡單的 HTML 列表成為可排序的拖放式列表。首先要為此列表添加一個標識符 —本例中指定 sortable 作為 ID，以便使用 jQuery 輕松找到此列表，并為其添加可排序函數調用。還要為各項添加 ui-state-default 類，以便保持其樣式與所選主題一致。
清單 2. 利用 jQuery UI Sortable 插件創建一個簡單的可排序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</title>
<link type="text/css"
rel="stylesheet" />
<link type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-ui-1.8.6.custom.min.js">
</script>
<script type="text/javascript">
$(function(){
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>
<ul id="sortable">
<li id="item1" class="ui-state-default">Item 1</li>
<li id="item2" class="ui-state-default">Item 2</li>
<li id="item3" class="ui-state-default">Item 3</li>
<li id="item4" class="ui-state-default">Item 4</li>
<li id="item5" class="ui-state-default">Item 5</li>
<li id="item6" class="ui-state-default">Item 6</li>
<li id="item7" class="ui-state-default">Item 7</li>
</ul>
</body>
</html>
如果需要保存列表項位置，可能必須將詳細信息保存到 cookie 或數據庫，以便正確呈現頁面，從而支持后續的頁面查看。如果您使用的是數據庫，就可以使用 Ajax 將此數據發送到服務器端腳本，使之能夠將值寫入數據庫，并在隨后初始頁面加載時返回帶有恰當位置的 XML 或 JSON 響應，以將各元素放置在正確的位置。清單 3 中的示例代碼展示了如何將位置值發送到服務器端 PHP 腳本。
清單 3. 將位置值發送到服務器端腳本
$( "#sortable" ).sortable({
stop: function(event, ui) {
$("#sortable li").each(
function(index){
$.ajax({
type:'POST',
url:'filename.php',
data:'method=updateposition&id='+$(this).attr('id'))+'&positions='+index,
success: function(xml){
// Success
}
});
}
);
}
});
要保存可排序列表中項的位置，需要利用一個事件來確定排序項的時間。您可以利用多種可排序事件，但這個示例需要 stop 事件，因為只有該事件能夠在所有可排序元素完成排序后觸發。這一點非常重要，因為您需要在嘗試保存位置之前，確保所有元素都處于新位置。觸發 stop 事件之后，您要遍歷各列表項，以獲取其在列表中的索引，隨后檢索各項的 ID，再利用 Ajax 將這些值發送到一個 PHP 文件，這會將結果保存到數據庫，以便在稍后您返回該頁面時排序元素。
所用的 Sortable 插件還提供了許多可實現其他定制的選項，例如：
----定義一個占位符類，設定拖動一項時占位符元素的樣式
----連接列表，使元素可以拖放到相同 Web 頁面中的另一個可排序列表
----在網格中顯示和限制可排序元素
----創建多欄界面，支持在各欄間拖動和排序元素
清單 4 中的示例展示了如何創建包含拖放式元素的三欄界面。這三個欄使用 CSS 中三個彼此相鄰的 <div> 元素表示。為使 Sortable插件處理分欄結構，只需使用 connectWith 選項，并將其值設置為各分欄元素上使用的 column 類。選項 connectWith 允許使用多欄界面，在各欄間拖動和排序元素。
清單 4. 三欄拖放式界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</title>
<link type="text/css"
rel="stylesheet" />
<link type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-ui-1.8.6.custom.min.js">
</script>
<script type="text/javascript">
$(function(){
$( ".column" ).sortable({
connectWith:".column"
});
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>
<ul id="page">
<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">ToDo List</div>
<div class="portlet-content">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
</div>
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
<div class="portlet-content">content</div>
</div>
<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">Header</div>
<div class="portlet-content">content</div>
</div>
</li>
</ul>
</body>
</html>
為保持這些元素的樣式與您選擇的 jQuery UI 主題一致，您要使用某些 CSS 類將各元素定義為包含標頭和內容的 portlet。 這些 CSS 類構成了 jQuery UI CSS 框架，允許您輕松設定 UI 元素的主題。
jQuery UI CSS 框架
至此為止，您已經用到了 jQuery UI CSS 框架中的一些類。在這一節中，我們將進一步探索，學習如何利用這些類讓用戶能動態更改其個性化儀表板頁面的外觀。該框架包含許多類，涵蓋了常見的 UI 元素。應用這些類時，它們會根據您選擇的主題自動為您的小部件設定主題。可用類的類別包括布局幫助元素、小部件容器、交互狀態、交互線索、圖標（包括狀態、圖像和圖標類型）以及其他可視化元素，例如圓角幫助元素、覆蓋和陰影。
使用該框架中的類時，可以輕松在可用主題間切換。清單 5 展示了利用 ThemeRoller 提供的主題切換器工具能多么輕松地完成此過程。
清單 5. 用于為示例 Web 頁面上的定制 portlet 添加主題切換器的 JavaScript 和 HTML
<script type="text/javascript">
$(function(){
$('#switcher').themeswitcher();
$( ".column" ).sortable({
connectWith:".column"
});
$( "#sortable" ).sortable();
});
</script>
<div class="portlet-content">
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<div id="switcher"></div>
</div>
</div>
清單 5 中的示例展示了您能多么輕松地為現有示例 Web 頁面中的 portlet 添加主題切換器工具。通過為小部件包含相關 JavaScript 文件，并創建一個作為容器的 <div> ，即可輕松定位該 <div> ，并為其應用 themeswitcher 。這種做法會得到一個包含 jQuery UI 提供的可用主題的下拉菜單。選中一個主題時，整個頁面將立即更新來匹配該主題。在允許用戶定制其頁面時，此類小部件非常有用，其選項甚至可以保存到前面敘述的數據庫中，以保存元素位置（但這種工具本身已經擁有基于 cookie 的存儲，在用戶刷新頁面時，此前用戶選中的主題將仍然保持可用）。
該庫還包含有用的預構建小部件，您可輕松地將其添加到自己的頁面中。每個小部件均已結構化為您的自定義主題或者您選定的主題呈現。清單 6 中的示例展示了如何在頁面中利用 Tab 小部件來為用戶組織某些內容，并使用現有主題加以呈現。
清單 6. 在現有主題內添加 jQuery UI 小部件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</title>
<link type="text/css"
rel="stylesheet" />
<link type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-1.4.2.min.js">
</script>
<script type="text/javascript" src="http://www.gimoo.net/t/1902/js/jquery-ui-1.8.6.custom.min.js">
</script>
<script type="text/javascript">
$(function(){
$( "#tabs" ).tabs();
$('#switcher').themeswitcher();
$( ".column" ).sortable({
connectWith:".column"
});
$( "#sortable" ).sortable();
});
</script>
</head>
<body>
<h1>
Creating Customizable Web Interfaces with the jQuery UI and Ajax
</h1>
<div id="tabs">
<ul>
<li>
<a >Portlets</a>
</li>
<li>
<a >Profile information</a>
</li>
</ul>
<div id="tabs-1">
<ul id="page">
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
ToDo List
</div>
<div class="portlet-content">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</div>
</div>
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
<li class="column">
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Theme
</div>
<div class="portlet-content">
<script
type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/">
</script>
<div id="switcher"></div>
</div>
</div>
<div class="portlet
ui-widget
ui-widget-content
ui-helper-clearfix
ui-corner-all">
<div class="portlet-header ui-widget-header ui-corner-all">
Header
</div>
<div class="portlet-content">content</div>
</div>
</li>
</ul>
<br class="clear" />
</div>
<div id="tabs-2">
<p>Show profile information here</p>
</div>
</div>
</body>
</html>
選項卡式界面包含一個作為容器的 <div> 元素，該元素具有選項卡的 ID，還有兩個用作實際選項卡的列表項，包含選項卡名稱，兩個帶有 ID 的選項卡與選項卡列表項中的錨定標記匹配。如您所見，可以輕而易舉地添加恰當的 HTML，以顯示選項卡和選項卡內容，隨后還能輕松地將 Tab 小部件應用于選項卡容器。這將自動顯示一個選項卡式界面，并根據您選擇的類，應用已選主題。
使用效果增強 UI
通過 jQuery UI 庫可以利用許多類別的效果，其中許多過渡都是對現有 jQuery 方法的簡單擴展。每個類別都包含帶有自定參數的方法，例如：
Color transitions:
------Animate.用于為一個 Web 頁面實現動畫和彩色效果
Visibility transitions:
------Toggle.開關一個元素的可視與否，隱藏或顯示此元素
------Show.顯示一個元素，可以使用下列任何動畫類型實現動畫效果
------Hide.隱藏一個元素，可以使用下列任何動畫類型實現動畫效果
Class transitions:
------addClass .可用于為一個元素添加類，可以包含類呈現的兩種不同顯示狀態之間的動畫效果
------removeClass .可用于為一個元素刪除類，可以包含類呈現的兩種不同顯示狀態之間的動畫效果
------switchClass .可用于在兩個類之間切換，可以包含類呈現的兩種不同顯示狀態之間的動畫效果
------toggleClass .可根據元素中是否已經包含類來為一個元素添加或刪除類，可以包含類呈現的兩種不同顯示狀態之間的動畫效果
如部分方法說明所示，還有一些可與其他效果方法聯合使用的動畫效果。這些效果包括 Blind、Bounce、Clip、Drop、Explode、Fade、Fold、Highlight、Puff、Pulsate、Scale、Shake、Size、Slide 和 Transfer。另外利用 jQuery 插件，您還可以輕松應用其他一些高級技術。
與 jQuery UI 庫中的其他內容相同，效果的應用非常容易，只需在 Web 頁面中定位一個 HTML 元素或元素組，然后應用恰當的方法即可。清單 7 展示了如何對示例 Web 頁面中各 portlet 內容應用的方法，以使用 Toggle 效果。在這個例子中，Toggle 效果是通過雙擊一個 Portlet 的標題觸發的，這會導致內容在隱藏和顯示之間切換。
清單 7. 應用 Toggle 效果隱藏和顯示 portlet 內容
<script type="text/javascript">
$(function(){
$( ".portlet-header" ).dblclick(function(){
$(this).parent().find(".portlet-content").toggle();
});
});
</script>
portlet 的內容是通過遍歷標頭元素實現的，隨后利用 jQuery find 方法定位帶有 portlet-content 類的相關元素。
結束語
利用 jQuery UI 增強 Web 頁面非常簡單，基本上只需要包含恰當的文件，并執行一次函數調用即可。在 jQuery 和 jQuery UI 這樣的庫出現之前，構建高度交互式的界面極為困難，因為必須從零開始編寫代碼，而且需要執行大量測試來保證代碼能在所有主流瀏覽器中正常工作。如今，您只要包含一個文件并執行一次函數調用即可創造效果和可排序的元素，或者更改主題。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持綠夏網。
