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

作者: IIduce 來源: css9 發布時間: 2009-12-23 21:44 閱讀: 11274 次推薦: 1 原文鏈接 [收藏]

在本系列文章的前五篇介紹了jQuery Tools中的工具組件使用，閱讀過的朋友想必已經對它有所了解。今天這篇是jQueryTools系列文章的最后一篇，來介紹一個綜合了jQueryTools中的滾動效果（Scrollable）、遮罩效果（Overlay）、提示工具條（Tooltip）和突出效果（Expose）的綜合使用實例，希望能對jQuery Tools的靈活使用有更好的認識。

這個示例應該算是一個圖片展示的完整示例，首先看效果：

在上面示例中，首先看到的是縮略圖的展示，在縮略圖展示上應用了滾動效果，可通過左右導航或鍵盤左右鍵滾動縮略圖。點擊縮略圖圖片，應用遮罩效果彈出圖片的大圖，把鼠標放在大圖上，應用工具條提示效果展示圖片信息。在大圖展現時也應用了滾動效果，可通過左右導航或鍵盤左右鍵切換圖片。

下面我們來看是如何融合jQuery Tools中的工具組件，實現上面實例的：

HTML包含兩部分：縮略圖展示和大圖展示

縮略圖HTML：

<!-- 為滾動效果的導航定義上一頁按鈕，注意class固定為prevPage --> 
<!--導航按鈕注意與縮略圖滾動區域同級-->
<div class="navi prevPage"></div> 
 
<!-- 定義縮略圖滾動區域根節點 --> 
<div id="thumbnails"> 
 
    <!-- 為所有縮略圖定義根節點，注意class為items --> 
    <div class="items"> 
        <div><img src="img/thumb/thumb1.jpg" /></div> 
        <div><img src="img/thumb/thumb2.jpg" /></div> 
        <div><img src="img/thumb/thumb3.jpg" /></div> 
        ... 
    </div> 
</div> 
 
<!-- 為滾動效果的導航定義下一頁按鈕，注意class固定為nextPage --> 
<div class="navi nextPage"></div> 
<br clear="all" />

大圖部分HTML也應用了滾動效果，與上面的縮略圖在html結構上差不多，不同的是大圖多了tooltip提示部分
大圖部分HTML：

<!-- 為大圖overlay效果定義根節點--> 
<div id="box"> 
 
    <!-- 為大圖滾動效果區域定義根節點--> 
    <div id="images"> 
 
        <!-- 為所有大圖定義滾動根節點，class為items --> 
        <div class="items"> 
 
            <!-- 定義單張大圖 --> 
            <div> 
 
                <!-- 大圖圖片 --> 
                <img src="img/image1.jpg" /> 
 
                <!-- 大圖提示區域 --> 
                <div class="info"> 
                    <h3>A Blue Flower</h3> 
 
                    <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur.</p> 
 
                    <p class="copy"> 
                        Wed Jun 10, 2:35 PM <strong>&copy; John Doe</strong> 
                    </p> 
                </div> 
            </div> 
 
            <!-- ... 其余大圖定義，與上面那個相同 --> 
        </div> 
    </div> 
 
    <!-- 滾動的導航按鈕 --> 
    <div class="navi prevPage"></div> 
    <div class="navi nextPage"></div>  
</div>

CSS部分：css部分是jquery tools中不涉及的，它允許你發揮想象，靈活定義。但是，在本示例中，css部分可能是編碼最困難的。這里是本示例的樣式表，供學習參考。

Javascript部分：這一部分最能體會jquery Tools的靈活使用。

首先設定縮略圖的滾動效果：

// 設定縮略圖滾動
    $("#thumbnails").scrollable({size: 5, clickable: false}).find("img").each(function(index) { 
 
        // 為每個縮略圖設定overlay效果
        $(this).overlay({ 
            target: '#box', 
            expose: {maskId: 'mask'}, 
 
            /* 
                當顯示大圖區域時，0秒內滾動到當前圖片
                雖然是0秒，但是仍有一閃而過的問題，這里是個缺陷
            */ 
            onLoad: function() { 
             //images在下面有定義，是獲取到得所有大圖對象
                images.seekTo(index, 0);   
            } 
        }); 
    });

然后設定大圖的滾動效果及提示效果：

// 設定大圖滾動， 并返回了所有大圖的jquery object
    var images = $("#images").scrollable({size: 1, api:true}); 
 
 
    //設定每個圖片的提示效果
    $("#images img").tooltip({ 
        effect: 'toggle', 
        position: ['bottom', 'center'], 
        offset: [-85, -30], 
        opacity: 0.8, 
        effect: 'fade' 
    });