jQuery Tools——不可错过的jQuery UI库（五）

2009-6

jQuery Tools——不可错过的jQuery UI库（五）

发表于: Jquery, 示例 | 作者: IIduce

欢迎订阅本站RSS，RSS地址：http://feed.css9.net。选择您使用的阅读器：Google Reader、鲜果、抓虾。

接上篇，今天讲解jQuery Tools中另一工具组件——滚动效果（Scrollable）。滚动效果在网页设计中也是经常用到的，例如滚动新闻、幻灯片展示、相册……（发挥想象力吧，用到选项卡的内容切换中是不是会很酷）。

开始前还是要啰嗦几句，jQuery Tools关注的是提供灵活可控的功能，而非展现。虽然官方站点也给我们提供了漂亮的示例，但是那些展现与jQuery Tools的核心功能无关。理解了jQuery Tools的功能使用，展现效果及其扩展任由发挥。例如今天要讲的示例，可能并不好看，也不能直接用到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); 
        } 
    });