Mootools 1.2教程(15)——滚动条(Slider)
作者:Fdream 来源:Fdream博客 发布时间:2008-12-09 17:35:00
标签:Mootools,教程,滚动条,Slider,javascript
原文地址:30 Days of Mootools 1.2 Tutorials - Day 15 - Sliders
MooTools 1.2的滚动条(Slider)
阅读上一讲:Mootools 1.2教程(14)——定时器和哈希简介
到现在为止,初始化这些MooTools插件对象就会开始变得越来越熟悉。滚动条(Slider)没有任何不同,你要创建一个新的滚动条,定义滚动条和滑块相关的元素,然后设置你的选项,再创建一些回调事件的控制函数。尽管滚动条(Slider)遵循这个熟悉的模式,但是任然还有一点特殊的地方。
基本用法
创建一个新的滚动条(Slider)对象
我们首先从HTML和CSS开始。基本的想法是创建一个滚动条的div,因此是一个长的长方形(长度取决于我们用滚动条做什么),还有一个子元素作为滑块。
参考代码:
<div id="slider"><div id="knob"></div></div>
我们的CSS也可以这么简单。只需要设置宽、高,还有背景颜色。
参考代码:
#slider {
width: 200px
height: 20px
background-color: #0099FF
}
#knob {
width: 20px
height: 20px
background-color: #993333
现在,我们可以创建我们的新滚动条对象了。要初始化滚动条,首先要把你的相关元素赋值给一些变量,然后使用“new”来创建一个滚动条Slider对象,这和我们以前创建tween、morph和drag.move时一样:
参考代码:
// 把元素赋值给变量
var sliderObject = $('slider');
var knobObject = $('knob');
// 创建一个新的slider对象
// 首先定义slider元素
// 然后定义滑块元素
var SliderObject = new Slider(sliderObject , knobObject , {
// 这里是你的选项
// 稍后我们会仔细讲一下这些选项
range: [0, 10],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
// 当step的值改变时将触发onchange事件
// 它会把当前的step作为参数传入
onChange: function(step){
// 在这里放置onchange时要执行的代码
// 你可以引用step
},
// 当用户拖动滑块时触发ontick事件
// 它会传递当前的位置(相对于父元素的位置)
onTick: function(pos){
// 这是必需的,用以调整滑块的位置
// 我们会在下面详细解释这个
this.knob.setStyle('left', pos);
},
// 当拖动停止时触发
onComplete: function(step){
// 当完成时要执行的代码
// 你可以引用step
}
0
投稿
猜你喜欢
- 当列表菜单项目特别多的时候,使用JavaScript手风琴菜单(Accordion Menus)是个不错的选择。手风琴折叠菜单利于组织菜单项
- 或者说有一条命令 hostname [string],当string是不包含2950时,是true,包含2950时是false。使用Exce
- 不能将 SQL Server 2000 日志传送配置升级到 SQL Server 2008。数据库维护计划向导是 SQL Server 20
- asp正则表达式检测字符串是否是数字及字母。<% '函数:CheckString(strng) '
- 一个拖动层和Onmouse自动下拉效果,IE支持,不支持ff。下面所示的效果四个小块可以拖动到页面任意点,大黑块可以连同四个小块随动。<
- 前言相当不错的 Javascript 编程风格规范,建议大家采用此规范编写 Javascript。原文链接: http://dojotool
- 如何做一个分页程序? 这在ASP中确实容易实现,但需要技巧,看看下面的分页代码和说明: <angu
- 自从2005年8月11日阿里巴巴宣布收购雅虎中国的全部资产后,做为阿里巴巴集团的创始人马云心里盘算的事应该是如何把雅虎中虎整合进阿里巴巴这个
- Cookies,有些人喜欢它们,有些人憎恨它们。但是,很少有人真正知道如何使用它们。现在你可以成为少数人中的成员-可以自傲的Cookie 大
- 这篇论坛文章详细介绍了完全卸载MySQL数据库5.0的具体方法,更多内容请参考下文:数据库突然出了问题,没办法只能重装,因为事先并不知道My
- javascript的分号代表语句的结束符,但由于javascript具有分号自动插入规则,所以它是一个十分容易让人模糊的东西,在一般情况下
- 在使用AJAX开发网站时,经常有朋友遇到乱码的问题,而且一下子难以找到解决方法。其实解决AJAX中文乱码问题很简单。1、服务端程序:<
- 我的PJBlog在从2.7升级的3.0的时候,犹豫了很久。升级到PJBlog3.0就是看中了新增的静态页面功能,但是同时又担心造成博客出现大
- 认知心理学家Donald A. Norman将人类的行动分解成七个阶段:1. 确定目标2. 确定意图3. 明确行动内容4. 执行5. 感知外
- 内容适应形式学习了死猫的文章,我今天也来说说有关内容和容器的关系。看标题你也许觉得有些囧,它和上一篇《形式追随内容?》看起来相反,而且好像从
- 当使用AJAX进行GET请求的时候,会有一个现象就是刷新网页后,AJAX请求的数据没有改变,只有把IE的缓存清空,或者从新打开一个IE窗口的
- dim sql_injdata,SQL_inj,SQL_Get,SQL_Data,Sql_PostSQL_injdata = "&
- 1、目前来看,百付宝仅仅只是C2C的一个支付后台。他的内容只集中于“钱和订单”两个环节,没有其他干扰信息。2、百付宝的界面表现很简单。因为简
- 在JavaScript中,我们应该尽可能的用局部变量来代替全局变量,这句话所有人都知道,可是这句话是谁先说的?为什么要这么做?有什么根据么?
- 在我做过的N多项目中,基本都有个跑不开的怪圈——首页很难设计。根据进度安排,首页必须按时出来,不然没法review,也没法测试。于是,首页只