使用jQuery UI制作滑动条效果

作者:66
Hi,大家好,我是CssRain的站长。爱好前端开发的我先后从事过Java开发,JavaScript,CSS开发等,已经工作两年+了。目前就职于亚信中国(Asiainfo),担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步,同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

使用jQuery UI制作滑动条效果

前段时间在佐佐的博客上看到这个效果:http://byzuo.com/blog/dragscroll.
当时他是用纯JS写的,中间有点BUG。今天我不去帮它改进了,而是使用jQuery UI来完成这个效果。

效果的最终截图:

 

1.什么是jQuery UI

简单的说jQuery UI也是jQuery插件,只不过专指由jQuery官方维护的UI方向的插件。
jQuery UI 拥有如下特点:
1,容易使用
2,极强的配置性
3,多主题
你可以去 http://jqueryui.com/download下载jQuery UI的所有内容。

2.小试牛刀

今天的效果是一个slider效果,根据jQuery UI官方的例子说明,我们需要总计3个JS文件:
(1)jQuery.js
(2)ui.core.js
(3)ui.slider.js
同时需要一个CSS文件:
(1)jquery-ui-1.7.2.custom.css
我们在网页中把它们全部引入,然后给一个div元素应用插件,代码如下:
$(function() {
$(".drag_cont_btn").slider();
});
OK,此时你已经完成了jQuery UI插件的调用,来看看我们的成果吧。
http://www.cssrain.cn/demo/drag_scroll/demo1.html

3.添加HTML代码

在这一步中,你要注意:怎么要嵌套XHTML才能使代码更为简单。良好的XHTML嵌套方式对代码的编写有非常大的帮助。
你可以使用Firefox的firebug来查看我的网页结构。
http://www.cssrain.cn/demo/drag_scroll/demo2.html

4.创建Slider

在上一步中,slider并没有跟图片列表关联起来。这一步我们来完成它。
通过查看jQuery UI slider的API,我们可以找到2个非常有用的参数:
(1)max:滑动块的宽度的最大值
(2)slide:滑动时的回调函数
通过设置max,我们可以给滑动块一个范围。通过使用slide这个回调函数,我们可以控制图片列表滚动。
关键代码:
// slider将要用到的参数:
// (1)max:最大值
// (2)slide:滑动时动态改变容器的left.
var sliderOpts = {
max: width - parseInt($dragCont.css("width")),
slide: function(e, ui) {
$contain.css("left", "-" + ui.value + "px");
}
};
//创建slider
$button.slider(sliderOpts);
具体例子:
http://www.cssrain.cn/demo/drag_scroll/demo3.html

5.隐藏不必要的部分

只所以把这步放到这里说,主要是想让大家知道下 这个 动画的实际原理。隐藏不必要的部分相信大家都明白怎么做。使用CSS的overflow:hidden即可。加到哪个元素上,这个不要我说了吧。
具体例子:
http://www.cssrain.cn/demo/drag_scroll/demo4.html

6.多行列表

通过前面几步的学习,制作一个多行的列表岂不是小菜一碟了。
改进步骤如下:
(1)相应元素的高度增加1倍。
(2)JS 计算元素宽度时,除以2。
具体例子:
http://www.cssrain.cn/demo/drag_scroll/demo5.html

7.竖向列表?

前面我们已经把单行,多行列表的slider效果做完了,如果现在要你做一个竖向的slider效果,你能做出来吗?

本文代码下载:
http://www.cssrain.cn/demo/drag_scroll/drag_scroll.rar

你可能感兴趣的:(jQuery UI)