jQuery Tools——不可錯過的jQuery UI庫（五）

作者: IIduce 來源: http://css9.net 發布時間: 2009-12-23 21:42 閱讀: 8727 次推薦: 2 原文鏈接 [收藏]

接上篇，今天講解jQuery Tools中另一工具組件——滾動效果（Scrollable）。滾動效果在網頁設計中也是經常用到的，例如滾動新聞、幻燈片展示、相冊……（發揮想象力吧，用到選項卡的內容切換中是不是會很酷）。

開始前還是要啰嗦幾句，jQueryTools關注的是提供靈活可控的功能，而非展現。雖然官方站點也給我們提供了漂亮的示例，但是那些展現與jQueryTools的核心功能無關。理解了jQueryTools的功能使用，展現效果及其擴展任由發揮。例如今天要講的示例，可能并不好看，也不能直接用到Web設計中，示例僅僅要告訴你的是工具的使用方法，絕非準則。

先看一個最簡單的例子（你可以點擊方塊或按鍵盤左右鍵觸發滾動）：

HTML 代碼：

<!-- 為scrollable區域定義一個根節點 --> 
<div class="scrollable"> 
    <!-- 為所有滾動項定義根節點 --> 
    <div class="items"> 
        <div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  
        <div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>  
        <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>  
    </div> 
</div>

如上面定義的，必須要給滾動區域定義一個根節點（為它定義一個class或id，方便找到它），還需要在里面為所有滾動項包裹一個根節點（必須為其定義class=”items”）。最里面的滾動項，你就可以隨便定義了，可以使div之類，也可以是圖片、flash等等的任意元素。

Javascript Code:

Scrollable的css書寫上還真有些地方需要注意，下面看一下：

CSS Code：

/* 
    滾動區域根元素樣式
    當滾動發生時，根元素應當是靜止的
*/ 
div.scrollable { 
 
    /* 必須有的基本設定，大小可以自己設定 */ 
    position:relative; 
    overflow:hidden; 
    width: 660px; 
    height:90px; 
} 
 
/* 
    所有滾動項的根節點，必須使用絕對定位（position:absolute）
    必須賦予一個足夠大的寬度，放下里面的所有元素
    它本身不必設定高度，因為在滾動區域根元素中已經設定
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    滾動區域中的滾動項，在上面的橫向滾動例子中至少要設定為左浮動
*/ 
div.scrollable div.items div { 
    float:left; 
} 
 
/* 滾動元素點擊（active）時的樣式 */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}

縱向滾動與很想滾動的實現差不多，演示效果可以看這里。下面看一下滾動效果初始化的不同：

<script> 
$(function() {               
    // 初始化滾動效果  
    $("div.scrollable").scrollable({ 
        vertical:true,    //設定為縱向滾動
        size: 3            //設定滾動顯示的滾動項數目，這里注意與高度的設定配合
    });         
}); 
</script>

下面這個例子是為滾動效果加上導航，及鼠標滑輪控制滾動的效果：

上面的例子中，可以通過鼠標點擊滾動項、左右導航、上方翻頁導航、鼠標滑輪滾動（鼠標放在滾動區域）、鍵盤左右鍵觸發滾動效果。

說明：

通過鼠標滑輪控制滾動的功能，要另外引用jquery的一款插件jquery.mousewheel

左右導航及翻頁導航，是通過特定的html定義完成的，不是腳本參數，如下：

 
<!--翻頁導航，class定義為navi-->
<div class="navi"></div>
 
<!-- 下一項導航鏈接，class定義為“prev”或“prevPage” -->
<a class="prev"></a>
 
<div class="scrollable">
<div class="items">
<div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div> 
<div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div> 
<div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>
</div>
 
</div>
 
<!-- 下一項導航鏈接，class定義為“next”或“nextPage” -->
<a class="next"></a>
 
<!--清除浮動-->
<br clear="all" />

需要注意的是上一項鏈接class必須聲明為prev或prevPage，下一項鏈接必須聲明為nextPage或next。并且，上一項與下一項元素必須與滾動區域根節點在dom樹的同一級上，也就是有共同的父節點。（在上面的例子中，上一項與下一項功能失效就是因為wordpress自動為兩個鏈接包裹了P元素，很無奈，不知道該怎么去掉）

下面這個例子是通過配置參數，使之自動滾動。

看一下初始化時的參數配置：

    // initialize scrollable  
    $("div.scrollable").scrollable({ 
 
        // 設定滾動間隔，單位毫秒
        interval: 2000, 
 
        // 是否循環，遇到最后一項時，是否從新第一項
        loop: true,  
 
        // 比正常模式添加一點動畫效果
        speed: 600, 
 
        // 滾動開始時，讓滾動項有個適當的透明效果
        onBeforeSeek: function() { 
            this.getItems().fadeTo(300, 0.2);         
        }, 
 
        // 滾動結束時，取消透明效果
        onSeek: function() { 
            this.getItems().fadeTo(300, 1); 
        } 
    });