jquery網(wǎng)頁開發(fā)實例精解教學-第4章設計列表

第4章設計列表列表是網(wǎng)頁陳述信息的一種方式。它由一定格式的文字和圖片元素構成。在靜態(tài)頁面中可以設計列表的內容、列表的嵌套等。但是，對于列表一些其他特性控制起來相對困難。本章將講解如何使用jQuery更有效的控制列表。4.1控制列表寬度在實際應用中，列表的創(chuàng)建有多種不同的形式。在這里列舉兩種創(chuàng)建形式：一是直接使用HTML標記中的<OL>或者<UL>與<LI>搭配使用創(chuàng)建列表；二是使用<DIV>的嵌套來創(chuàng)建。下面將講解以這兩種形式創(chuàng)建的列表如何控制列表寬度。4.1.1參差不齊的列表在我們創(chuàng)建列表的時候，由于不同列表項的文字內容不同，必然造成列表項寬度不同。其得到的結果如圖所示。4.1.2

截取文字內容實現(xiàn)控制列表寬度這種方式的原理為：可以把所有列表項截取長度相同。這樣截取出來的列表項寬度就一致了。其中，使用到jQuery的ready()、each()和text()方法以及Javascript的substr()函數(shù)。1．jQuery的ready()函數(shù)——文檔加載完成事件該函數(shù)在文檔就緒后，添加特殊效果，或者加入動態(tài)事件。其語法如下：語法一$(document).ready(function)語法二$().ready(function)語法三$(function)2．jQuery的each()函數(shù)——遍歷jQuery對象該函數(shù)是對jQuery對象進行遍歷，為每個匹配元素執(zhí)行函數(shù)。其語法如下：語法一each(function)語法二each(object,function)3．jQuery的text()函數(shù)——所有匹配元素的內容該函數(shù)可以獲取并設置所有匹配包含的文本內容所組合起來的文本。其語法如下：text([val|function])4．功能實現(xiàn)控制列表寬度的步驟如下：（1）需要利用jQuery的ready()函數(shù)來實現(xiàn)在頁面整體加載完成后執(zhí)行特效效果。（2）在function()內部使用each()函數(shù)遍歷列表項。（3）在each()函數(shù)中獲取當前被遍歷的<li>中嵌套的<span>元素對象的文本內容。（4）如果文本長度超出范圍則通過substr()函數(shù)截取并加上刪節(jié)號。首先，把jQuery庫引入進來：<scriptsrc="jslib/jquery-1.6.min.js"type="text/javascript"></script>然后，添加Javascript代碼，利用jQuery的選擇器找出每個列表項，獲取文字長度，并按照要求來進行截取。下圖是加入jQuery代碼調整列表項長度后得出來的效果。4.1.3修改層的寬度控制列表寬度修改層的寬度控制列表寬度的原理為：可以把所有列表項所在的層設置成長度相同。這樣截取出來的列表項寬度就一致了。這種解決方式與字符寬度無關，所以字符寬度不同不會影響到列表項的寬度。先創(chuàng)建列表，列表的創(chuàng)建需使用DIV創(chuàng)建列表，步驟如下。（1）在頁面頭部添加下面的樣式定義代碼：（2）下面的代碼利用DIV標記創(chuàng)建列表：下圖是列表的實際效果。要實現(xiàn)控制列表項長度的效果所用到的函數(shù)有：jQuery的ready()、each()、width()和CSS()函數(shù)。1．jQuery的width()函數(shù)——元素寬度該函數(shù)取得或者設置匹配元素當前計算的寬度值（px）。其語法形式如下：語法一width()語法二width(val)2．jQuery的CSS()函數(shù)——元素的層疊樣式該函數(shù)取得或者設置匹配元素的層疊樣式。其語法形式如下：語法一CSS(name) //訪問第一個匹配元素的樣式屬性語法二CSS(properties) //把一個“名/值對”對象設置為所有匹配元素的樣式屬性語法三CSS(name,value|fn) //在所有匹配元素中，設置一個樣式的值，數(shù)字自動轉換為像素值3．功能實現(xiàn)控制列表項的寬度步驟如下：（1）需要利用jQuery的ready()函數(shù)來實現(xiàn)在頁面整體加載完成后執(zhí)行特效效果。（2）在function()內部使用each()函數(shù)遍歷列表項。（3）判斷每一個列表項的整體寬度是否大于預定寬度。（4）如果大于，計算出列表項第一部分需要的長度并設置。（5）適當調整每個列表項高度。首先，把jQuery庫引入進來：<scriptsrc="jslib/jquery-1.6.min.js"type="text/javascript"></script>然后，添加Javascript代碼，利用jQuery的選擇器找出每個列表項，獲取需要的長度，并按照要求來進行設置。下圖為應用了jQuery調整列表項寬度后的效果。4.2控制列表項符號圖片本節(jié)將討論列表項符號的靈活運用問題，主要是將原來死板的列表項符號用各種新穎的圖片來代替。以圖片代替原來的列表項符號，使列表看起來更美觀生動。4.2.1樣式死板的列表項符號在創(chuàng)建列表的時候，<UL>中有type屬性可以指定列表項符號樣式。但是，單純依靠該屬性指定列表項樣式的話效果過于單調死板。例如，下面這個靜態(tài)頁面。1<ulid="ulstyle">2 <li>jQuery是一個JavaScript庫。</li>3<li>jQuery極大地簡化了JavaScript編程。</li>4<li>jQuery很容易學習。</li>5<li>jQuery擁有供AJAX開發(fā)的豐富函數(shù)（方法）庫。</li>6</ul>其得到的結果如圖所示。4.2.2利用jQuery與CSS控制列表項符號圖片利用jQuery與CSS控制列表項符號圖片的原理是：利用jQuery為每個列表項動態(tài)加載CSS樣式背景圖片，并把原有的列表項標號隱藏。其中，使用到jQuery的addClass()函數(shù)。1．jQuery的addClass()函數(shù)——添加樣式類選擇該函數(shù)為每個匹配的元素添加指定的類名。其語法形式如下：

addClass(class|fn)2．功能實現(xiàn)控制列表項的圖片符號步驟如下。（1）添加含有指定背景圖片的CSS樣式類。（2）需要利用jQuery的ready()函數(shù)來實現(xiàn)在頁面整體加載完成后執(zhí)行特效效果。（3）在function()內部使用each()函數(shù)遍歷列表項。（4）為每一個列表項添加CSS樣式類。首先，加入CSS樣式類定義然后，把jQuery庫引入進來：<scriptsrc="jslib/jquery-1.6.min.js"type="text/javascript"></script>最后，添加Javascript代碼，利用jQuery的選擇器找出每個列表項，并將CSS類添加到列表項上。下圖是最后顯示的效果。4.3列表項的滾動使用jQuery產(chǎn)生滾動列表的原理是：隱藏與添加這么兩個動作。即首先需要取得列表的滾動區(qū)間，然后獲取滾動內容的第一列表項并隱藏第一列表項，將隱藏的第一列表項添加到整個列表結尾。其中，使用到jQuery的hover()、find()、height()、animate()、appendTo()、trigger()函數(shù)以及:first屬性、mouseleave事件和Javascript的clearInterval()、setInterval()函數(shù)，如表所示。（1）jQuery的animate()函數(shù)——自定義動畫該函數(shù)負責創(chuàng)建自定義動畫。其語法形式如下：語法形式一animate(params,option)語法形式二animate(params,[duration],[easing],[fn])（2）jQuery的屬性:first——獲取第一個子元素該屬性獲取當前匹配元素的第一個子元素。其語法形式如下：Selector:first（3）Javascript函數(shù)setInterval()——設定一定時間間隔調用函數(shù)該函數(shù)將不停地按照指定的周期調用函數(shù)或者表達式，直到窗口關閉或者調用了clearInterval()函數(shù)。其語法形式如下：setInterval(fn,millsecond)1．功能實現(xiàn)實現(xiàn)列表項滾動的步驟如下。（1）取得整個列表的滾動區(qū)間。（2）使用jQuery的hover()函數(shù)分別響應鼠標的懸停與離開事件。（3）在鼠標的懸停時間中獲取滾動內容的第一列表項并隱藏第一列表項，將隱藏的第一列表項添加到整個列表結尾。（4）設定滾動間隔，及滾動過程中動畫持續(xù)時間。首先，加入CSS樣式定義：1<styletype="text/CSS">2ul.scrollline{height:90px;}3</style>然后，把jQuery庫引入進來：<scriptsrc="jslib/jquery-1.6.min.js"type="text/javascript"></script>最后，添加完整代碼。4.4圖片列表圖片是網(wǎng)頁中傳達信息的基本元素，也是設計網(wǎng)頁時最常用到的信息表現(xiàn)形式。但是，在頁面布局中圖片的擺放與排列卻是很讓人頭疼的問題。本節(jié)主要介紹使用jQuery控制圖片以列表形式規(guī)則擺放。4.4.1大小不一的圖片不規(guī)則排列如果單純依靠<li>和<img>標記來擺放圖片的話，實現(xiàn)圖片大小統(tǒng)一并規(guī)則擺放是件很麻煩的事情。具體效果如圖所示。4.4.2利用jQuery控制圖片列表利用jQuery控制圖片列表的原理是：為每張圖片設定一個相同大小的顯示區(qū)域，并把這些顯示區(qū)域通過列表的形式規(guī)則擺放。其中使用到jQuery的ready()、each()函數(shù)和Javascript對象屬性style。1．Javascript對象屬性：style——CSS屬性該屬性獲取或者設置匹配的標簽的CSS屬性。其語法形式如下：object.style2．功能實現(xiàn)實現(xiàn)圖片列表步驟如下。（1）通過設定圖片在列表中排列的格式。（2）通過jQuery選擇器及函數(shù)獲取每一個圖片元素對象。（3）為每一個圖片元素對象設定一定尺寸。首先，加入CSS樣式定義。然后，把jQuery庫引入進來：<scriptsrc="jslib/jquery-1.6.js"type="text/javascript"></script>并對原來的列表的代碼部分進行修改。最后，添加完整代碼下圖是最后顯示的效果。4.5列表的顯示與收縮本節(jié)主要介紹列表的顯示與收縮。在很多網(wǎng)站中都會出現(xiàn)類似的網(wǎng)頁特效，即：頁面加載完成后，某一部分只顯示大的標題。當把鼠標移動到標題上時，會在標題下動態(tài)出現(xiàn)列表信息項。例如，網(wǎng)站信息，產(chǎn)品分類說明等都可以使用這種效果。4.5.1占用頁面空間的靜態(tài)列表當需要對頁面中的某些信息分項描述時，列表是最有效的手段。但是，在靜態(tài)頁面中過分使用列表會占用大量空間，而且不易布局，影響頁面美觀。這種通過HTML標記產(chǎn)生的靜態(tài)頁面如圖所示。4.5.2利用jQuery動態(tài)控制列表內容展開與收縮利用jQuery動態(tài)控制列表內容展開與收縮的原理是：通過jQuery的滑動效果函數(shù)將原本隱藏的列表內容滑動顯示或者將原本顯示的列表內容滑動隱藏。其中使用到的jQuery的函數(shù)有：ready()、hover()、toggle()、slideDown()、slideUp()函數(shù)。1．jQuery函數(shù)介紹（1）jQuery的toggle()函數(shù)——事件切換該函數(shù)每次單擊后依次調用函數(shù)。其語法形式如下：toggle(fn1,fn2,[fn3,fun4,…])（2）jQuery的slideDown()函數(shù)——向下滑動該函數(shù)通過高度變化（向下增大）來動態(tài)地顯示所有匹配的元素，在顯示完成后可選地觸發(fā)一個回調函數(shù)。其語法形式如下：slideDown(speed,[callback])（3）jQuery的slideUp()函數(shù)——向上滑動該函數(shù)通過高度變化（向上減小）來動態(tài)地隱藏所有匹配的元素，在隱藏完成后可選地觸發(fā)一個回調函數(shù)。其語法形式如下：slideUp(speed,[callback])2．功能實現(xiàn)實現(xiàn)列表內容展開與收縮的步驟如下：（1）選定需要動態(tài)觸發(fā)隱藏與顯示列表內容的事件，hover()事件或者toggle()事件。（2）在事件中編寫隱藏與顯示的具體動作，并設置動作持續(xù)時間。首先，把jQuery庫引入進來：<scriptlanguage="javascript"src="jslib/jquery-1.6.js"></script>然后添加完整代碼。當頁面加載完畢時，效果如圖所示。4.6列表項動態(tài)排序本節(jié)主要介紹如何通過jQuery在客戶端實現(xiàn)對無序列表項排序。這種做法雖然不是應用廣泛，但是就從減輕服務器負載的角度來看還是有其優(yōu)點的。4.6.1構建一個無序列表首先創(chuàng)建一個無序列表，代碼如下。1<ulclass="orderobj">2<li>Tom</li>3<li>Snoopy</li>4<li>Jerry</li>5<li>Micky</li>6</ul>效果如圖所示。4.6.2利用jQuery對無序列表排序利用jQuery對無序列表排序的原理是：獲取到無序列表中的所有列表項，并轉成數(shù)組形式，使用Javascript函數(shù)對其進行排序后再次輸出。其中使用到的jQuery函數(shù)ready()、get()、text()、each()、append()和Javascript函數(shù)sort()。1．jQuery函數(shù)介紹（1）jQuery函數(shù)get()——獲取匹配元素集合該函數(shù)取得所有匹配元素的一種向后兼容的方式（不同于jQuery對象，而實際上是元素數(shù)組）。其語法形式如下：object.get()（2）jQuery函數(shù)text()——獲取和設置元素內容該函數(shù)獲取和設置匹配元素的文本內容。其語法形式如下：object.te