jQuery Tools——不可错过的jQuery UI库(五)

2021年1月12日   |   by tgcode

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

开始前还是要啰嗦几句,jQueryTools关注的是提供灵活可控的功能,而非展现。虽然官方站点也给我们提供了漂亮的示例,但是那些展现与jQueryTools的核心功能无关。理解了jQueryTools的功能使用,展现效果及其扩展任由发挥。例如今天要讲的示例,可能并不好看,也不能直接用到Web设计中,示例仅仅要告诉你的是工具的使用方法,绝非准则。

先看一个最简单的例子(你可以点击方块或按键盘左右键触发滚动):

%title插图%num

HTML 代码

 
class="scrollable">

class="items">
>0
>
>1
>
>2
>
>3
>
>4
>

>5
>
>6
>
>7
>
>8
>
>9
>

>10
>
>11
>
>12
>
>13
>
>14
>

>

>

如上面定义的,必须要给滚动区域定义一个根节点(为它定义一个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.itetgcodems div {
float:left;
}

/* 滚动元素点击(active)时的样式 */
div.items div.active {
border:1px inset #ccc;
background-color:#fff;
}

纵向滚动与很想滚动的实现差不多,演示效果可以看这里。下面看一下滚动效果初始化的不同:

> 
$(function() {
// 初始化滚动效果
$("div.scrollable").scrollable({
vertical:true, //设定为纵向滚动
size: 3 //设定滚动显示的滚动项数目,这里注意与高度的设定配合
});
});
>

下面这个例子是为滚动效果加上导航,及鼠标滑轮控制滚动的效果:

%title插图%num

上面的例子中,可以通过鼠标点击滚动项、左右导航、上方翻页导航、鼠标滑轮滚动(鼠标放在滚动区域)、键盘左右键触发滚动效果。

说明:

  1. 通过鼠标滑轮控制滚动的功能,要另外引用jquery的一款插件jquery.mousewheel
  2. 左右导航及翻页导航,是通过特定的html定义完成的,不是脚本参数,如下:

    <!--翻页导航,class定义为navi-->
    div class="navi">div>

    <!-- 下一项导航链接,class定义为“prev”或“prevPage” -->
    a class="prev">a>

    div class="scrollable">
    div class="items">
    div>0div> div>1div> div>2div> div>3div> div>4div>
    div>5div> div>6div> div>7div> div>8div> div>9div>
    div>10div> div>11div> div>12div> div>13div> div>14div>
    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);
},

// 滚动结束时,取消透明效果
tgcode onSeek: function() {
this.getItems().fadeTo(300, 1);
}
});

这里有一个使用scrollable效果做的比较好看的例子,感兴趣可以看下。

本系列文章导航

jQuery Tools——不可错过的jQuery UI库(一)

jQuery Tools——不可错过的jQuery UI库(二)

jQuery Tools——不可错过的jQuery UI库(三)

jQuery Tools——不可错过的jtgcodeQuery UI库(四)

jQuery Tools——不可错过的jQuery UI库(五)

jQuery Tools——不可错过的jQuery UI库(六)

相关推荐: Ajax与JSON的一些总结

  1.1.1 摘要   Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML,但Ajax通讯与数据格式无关,所以我们的数据格式可以是XML或…

Tags: , , ,