DIV CSS 佈局教程網

代碼如下:
<!-- navigator -->
<div class="navi"></div>
<!-- prev link -->
<a class="prev"></a>
<!-- root element for scrollable -->
<div class="scrollable">
<div id="thumbs">
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb5.jpg" />
<h3><em>1. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">60 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb6.jpg" />
<h3><em>2. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">80 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb7.jpg" />
<h3><em>3. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">100 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb8.jpg" />
<h3><em>4. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">120 sec</span>
</div>
<div>
<img src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" src="http://static.flowplayer.org/img/demos/thumbs/thumb9.jpg" />
<h3><em>5. </em>An example title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et felis eget
tellus pharetra porttitor. Praesent dui arcu, egestas quis, adipiscing a.
</p>
<span class="blue">140 sec</span>
</div>
</div>
</div>
<!-- next link -->
<a class="next"></a>
<!-- let rest of the page float normally -->
<br clear="all" />


該功能是通過jqueryObject.scrollable()方法來實現的，其中scrollable方法提供以下兩種方式：
1. $("div.scrollable").scrollable//該方法為采用默認方法顯示滾動欄
2. $("div.scrollable").scrollable({config object}) //該方法通過配置對象來定制滾動欄顯示內容及方式。
以下代碼為第二種方式的配置參數實現（只需將該實現放於jquery的ready方法中即可）：
代碼如下:
$("div.scrollable").scrollable({
size: 3,
vertical:false,
//clickable:false,
loop:true,//設置是否自動跳轉（根據間隔時間）
//interval: 1000,//設置間歇時間間隔
//speed:2000,
items: '#thumbs',
//prev:'.prev',//跳轉到上一項
//next:'.next'//跳轉到下一項
prevPage:'.prev',//跳轉到上一頁
nextPage:'.next',//跳轉到下一頁
hoverClass: 'hover',
easing:'linear'
});

下面對scrollable配置參數描述如下：

屬性 默認值 　 size 5 設置滾動項（圖片或按鈕等）顯示的數量，但是前提條件是必須要正確設置滾動項的父節點（jquery tools官方網站和本文示例中該父節點的class為scrollable）CSS文件中的寬度（width），否則僅僅設置該處基本沒效果；此外，如果設置分頁的話，此處將會顯示每頁滾動項的數量，即觸發“nextPage”或“prePage”後移動的滾動項數量。 vertical FALSE 設置滾動項滾動的方向，如果為false的話，滾動項水平滾動，否則為垂直滾動；注：對於垂直滾動，不僅需要修改該屬性，還需修改相應的css文件。 clickable TRUE 當滾動項被點擊時，是否觸發滾動操作（即滾動項是否滾動）。 loop FALSE 當滾動到最後一個滾動項時，是否重新從第一個滾動項開始滾動，此項需和interval（interval不為0）屬性共同使用。 interval 0 用於設置滾動項間自動切換的間隔時間（毫秒）。通過將該屬性設置為正值，滾動項會在到達間隔時間後自動切換到下一個滾動項。 speed 400 自動滾動的速度（毫秒） keyboard TRUE 通過將該屬性設置為true/false，來激活/屏蔽鍵盤方向鍵對滾動項的切換操作。如果該屬性設置為true，那麼通過左/右方向鍵來切換水平滾動的滾動項；通過上/下方向鍵來切換垂直滾動的滾動項。 items ".items" 包含滾動項的HTML元素——通過jquery選擇器獲取；該（或這些）html元素必須置於滾動項的父節點（HTML元素）內 prev ".prev" 包含向前移動滾動項（即向前按鈕）的HTML元素——通過jquery選擇器獲取；該html元素必須為滾動項父節點的兄弟節點。但是，如果該選擇器通過id獲取html元素，那麼該html元素可以置於頁面的任何位置。 next ".next" 包含向後移動滾動項（即向後按鈕）的HTML元素——通過jquery選擇器獲取；該html元素必須為滾動項父節點的兄弟節點。但是，如果該選擇器通過id獲取html元素，那麼該html元素可以置於頁面的任何位置。 prevPage ".prevPage" 包含跳轉到上一頁的HTML元素——通過jquery選擇器獲取；該html元素必須為滾動項父節點的兄弟節點。但是，如果該選擇器通過id獲取html元素，那麼該html元素可以置於頁面的任何位置。 nextPage ".nextPage" 包含跳轉到下一頁的HTML元素——通過jquery選擇器獲取；該html元素必須為滾動項父節點的兄弟節點。但是，如果該選擇器通過id獲取html元素，那麼該html元素可以置於頁面的任何位置。 navi ".navi" 包含分頁導航器的HTML元素——通過jquery選擇器獲取；該html元素必須為滾動項父節點的兄弟節點。但是，如果該選擇器通過id獲取html元素，那麼該html元素可以置於頁面的任何位置。 naviItem "a" 包含於分頁導航器內的HTML元素（分頁導航項）——通過jquery選擇器獲取；這些元素用於分頁導航。 activeClass "active" 以下兩種情況下對應項的CSS類名稱：a.被點擊的滾動項；b.當前頁對應的分頁導航項 disabledClass "disabled" 用於將next/nextPage（下一項/下一頁）和prev/prevPage（前一項/前一頁）渲染為不可用的CSS類名稱。例如：當前滾動項前面沒有滾動項時，prev元素會被置為不可用（disabled）狀態。 hoverClass 　 當鼠標移動到某滾動項上方時，該滾動項的CSS類名稱即被指為該class。 easing "swing" 用於設置滾動項切換時的動畫效果，目前jquery tools提供了“swing”和“linear”兩種動畫效果，更多的動畫效果參考jquery easing plugin api FALSE 該屬性同該系列中juqry tools 之tabs 和 jquery tools 之 tooltip onBeforeSeek 　 滾動項滾動前觸發該該屬性設置的函數。如果該屬性設置函數返回false，那麼觸發該函數的滾動項將不會滾動並替代前一個滾動項位置。該函數將會返回一個包含目標元素索引號的數組。 onSeek 　 滾動項滾動後觸發該該屬性設置的函數。對於scrollable方法及示例請參見jquery tools 之 scrollable（二）