jQuery Tools——不可错过的jQuery UI库(五)
2021年1月12日 | by tgcode
接上篇,今天讲解jQuery Tools中另一工具组件——滚动效果(Scrollable)。滚动效果在网页设计中也是经常用到的,例如滚动新闻、幻灯片展示、相册……(发挥想象力吧,用到选项卡的内容切换中是不是会很酷)。
开始前还是要啰嗦几句,jQueryTools关注的是提供灵活可控的功能,而非展现。虽然官方站点也给我们提供了漂亮的示例,但是那些展现与jQueryTools的核心功能无关。理解了jQueryTools的功能使用,展现效果及其扩展任由发挥。例如今天要讲的示例,可能并不好看,也不能直接用到Web设计中,示例仅仅要告诉你的是工具的使用方法,绝非准则。
先看一个最简单的例子(你可以点击方块或按键盘左右键触发滚动):
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 //设定滚动显示的滚动项数目,这里注意与高度的设定配合
});
});
>
下面这个例子是为滚动效果加上导航,及鼠标滑轮控制滚动的效果:
上面的例子中,可以通过鼠标点击滚动项、左右导航、上方翻页导航、鼠标滑轮滚动(鼠标放在滚动区域)、键盘左右键触发滚动效果。
说明:
- 通过鼠标滑轮控制滚动的功能,要另外引用jquery的一款插件jquery.mousewheel
- 左右导航及翻页导航,是通过特定的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——不可错过的jQuery UI库(四)
本系列文章导航
jQuery Tools——不可错过的jQuery UI库(一)
jQuery Tools——不可错过的jQuery UI库(二)
jQuery Tools——不可错过的jQuery UI库(三)
jQuery Tools——不可错过的jtgcodeQuery UI库(四)
jQuery Tools——不可错过的jQuery UI库(五)
jQuery Tools——不可错过的jQuery UI库(六)
1.1.1 摘要 Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现。虽然名字中包含XML,但Ajax通讯与数据格式无关,所以我们的数据格式可以是XML或…