【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.7.Slider控件
2013-08-16 10:17
615 查看
默认slider的安装启用
为slider自定义风格
修改配置选项
创建一个垂直的slider
设置最大最小值,和默认值
启用多个 手柄 和 范围
slider内置的回调事件
slider的方法
这个简单的控件,由两个主要的元素组成,手柄,也称拇指。背景,也称为轨道。
该控件需要以下库文件的支持:
jquery-ui-x.x.x.custom.css
jquery-x.x.x.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.slider.js
也需要主题图片的支持。
可以用鼠标或者上下左右键对齐操作。
<div class="background"> <div id="mySlider"> </div> </div> <script> $(function(){ $("#mySlider").slider(); }); </script> <style> .background { height:50px; width:217px; padding:36px 0 0 24px; background:url(img/slider_outerbg.gif) no-repeat; } #mySlider { width:184px; height:23px; border:none; position:relative; left:4px; top:4px; background:url(img/slider_bg.gif) no-repeat; } #mySlider .ui-slider-handle { width:14px; height:30px; top:-4px; background:url(img/slider_handle.gif) no-repeat; } </style>
如果没有设置高度,则track默认100 xp 。
var sliderOpts = { min: -50, max: 50 };
因为value的默认值是0,所以初始化后,handle在中间的位置。
var sliderOpts={ step:10, animate:true };
如果步长超过1,并且启用的动画效果,则thumb会滑动到离track被点击的最近步长位置。
当有着多个handle时,我们能设置range选项为true,这回在两个handles之间添加一个范围样式元素。
当只有一个单一handle时,我们可以设置这个handle到 max 或 min 的范围。
var sliderOpts = { range: "min" };
此时为handle到最小值之间的范围。
<style> #mySlider{margin:60px auto 0;} #tip{ position:absolute;display:inline;padding:5px 0; width:50px;text-align:center;font:bold 11px Verdana; } </style> $(function(){ var sliderOpts={ start:function(){ $("#tip").fadeOut(function(){ $(this).remove(); }); }, change:function(e,ui){ $("<div id='tip'></div>").text(ui.value+"%").css("left",e.pageX-100).appendTo("#mySlider") } }; $("#mySlider").slider(sliderOpts); });
在start回调函数中,我们选择到tip元素,如果它存在。并且使用jQuery fadeOut()方法将其淡出。一旦从view中hidden,它就会从页面中被移除。
change回调函数会在每次slider handle 的value发生变化时执行。当函数被调用,我们创建一个tool tip并且将其附加到slider。它会显示在slider handle 的正上方,并且得到一些框架classnames。
我们从回调函数会传递ui对象,它包含一些有用的信息,value就是从它获得。事件按一下顺序会被触发:
start
slide
stop
change
当我们同时使用stop 和 change回调,change回调会覆盖stop回调。
对所有的组件而言,都可以使用jQuery bind()方法,如sliderstart。
所有组件都有的 destroy ,disable ,enable, option widget 都适用。
value 和 values 方法可以set 和 get 一个单一或多个handles的 value。当然,我们也可以使用option 方法。
<button type="button" id="setMax">Set to max value</button> <div id="mySlider"> </div> $(function(){ $("#mySlider").slider(); $("#setMax").click(function(){ var maxVal=$("#mySlider").slider("option","max"); $("#mySlider").slider("value",maxVal); }); });
<button type="button" id="low" class="preset">Preset 1(low)</button> <button type="button" id="hight" class="preset">Preset 2(hight)</button> <div id="mySlider"> </div> $(function(){ var sliderOpts={ values:[25,75] }; $("#mySlider").slider(sliderOpts); $(".preset").click(function(){ if(this.id==="low"){ $("#mySlider").slider("values",0,0); $("#mySlider").slider("values",1,25); }else{ $("#mySlider").slider("values",0,75); $("#mySlider").slider("values",1,100); } }); });
注意,当前jquery版本中,不能通过链式的使用两个方法,修改不同的个体。因为这个方法返回一个新值,并且不是一个jQuery 独享。
<audio id="audio" src="img/1.mp3">Your browser does not support the <code>audio</code>element.</audio> <div id="volume"></div> $(function(){ var audio=$("#audio")[0], sliderOpts={ value:5, min:0, max:10, orientation:"vertical", change:function(){ var vol=$(this).slider("value")/10; audio.volume=vol; } }; audio.volume=0.5; audio.play(); $("#volume").slider(sliderOpts); });
为slider自定义风格
修改配置选项
创建一个垂直的slider
设置最大最小值,和默认值
启用多个 手柄 和 范围
slider内置的回调事件
slider的方法
这个简单的控件,由两个主要的元素组成,手柄,也称拇指。背景,也称为轨道。
1 安装启用一个slider
<div id="mySlider"> </div> $(function(){ $("#mySlider").slider(); });该控件需要以下库文件的支持:
jquery-ui-x.x.x.custom.css
jquery-x.x.x.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.slider.js
也需要主题图片的支持。
可以用鼠标或者上下左右键对齐操作。
2 自定义样式
推荐使用 ThemeRoller 方法定制主题。但是为了完全地改变控件的样貌和感觉,我们可以简单地创建我们自己的主题文件。<div class="background"> <div id="mySlider"> </div> </div> <script> $(function(){ $("#mySlider").slider(); }); </script> <style> .background { height:50px; width:217px; padding:36px 0 0 24px; background:url(img/slider_outerbg.gif) no-repeat; } #mySlider { width:184px; height:23px; border:none; position:relative; left:4px; top:4px; background:url(img/slider_bg.gif) no-repeat; } #mySlider .ui-slider-handle { width:14px; height:30px; top:-4px; background:url(img/slider_handle.gif) no-repeat; } </style>
3 配置选项
垂直slider,多handles和步长都能够给在slider初始化的时候,给控件 方法传递对象来配置。Option | Default value | Used to… |
animate | false | 当track被点击时,为handle启用平滑动画 |
disabled | false | 当控件初始化时禁用它 |
max | 100 | 设置slider的最大值 |
min | 0 | 设置slider的最小值 |
orientation | auto | 设置slider thumb移动的轴。接受字符串值vertical或horizontal |
range | false | 创建一个能设置样式的range元素 |
step | 1 | 设置步长,最大值必须能被这个数整除 |
value | 0 | 设置初始化时的值 |
values | null | 接受一个值数组。每个提供的整数会成为一个handle的值 |
3.1 创建垂直slider
var sliderOpts={ orientation:"vertical" };如果没有设置高度,则track默认100 xp 。
3.2 最大最小值
默认地,最小值是0,最大值是100.var sliderOpts = { min: -50, max: 50 };
因为value的默认值是0,所以初始化后,handle在中间的位置。
3.3 步长
var sliderOpts = { step: 25 };3.4 slider动画
slider控件内置的动画,能够在track被点击时,使handle平滑地移动到新位置。动画效果默认被禁用。var sliderOpts={ step:10, animate:true };
如果步长超过1,并且启用的动画效果,则thumb会滑动到离track被点击的最近步长位置。
3.5 设置slider的value
var sliderOpts = { value: 50 }3.6 使用多个handles
var sliderOpts = { values: [25, 75] };3.7 范围
var sliderOpts = { values: [25, 75], range: true };当有着多个handle时,我们能设置range选项为true,这回在两个handles之间添加一个范围样式元素。
当只有一个单一handle时,我们可以设置这个handle到 max 或 min 的范围。
var sliderOpts = { range: "min" };
此时为handle到最小值之间的范围。
4 使用事件API
Event | Fired when… |
change | handle停止移动,并且value发生改变 |
slide | handle移动 |
start | 开始移动时 |
stop | 停止移动时 |
在start回调函数中,我们选择到tip元素,如果它存在。并且使用jQuery fadeOut()方法将其淡出。一旦从view中hidden,它就会从页面中被移除。
change回调函数会在每次slider handle 的value发生变化时执行。当函数被调用,我们创建一个tool tip并且将其附加到slider。它会显示在slider handle 的正上方,并且得到一些框架classnames。
我们从回调函数会传递ui对象,它包含一些有用的信息,value就是从它获得。事件按一下顺序会被触发:
start
slide
stop
change
当我们同时使用stop 和 change回调,change回调会覆盖stop回调。
对所有的组件而言,都可以使用jQuery bind()方法,如sliderstart。
5 slider的方法
当控件被初始化后,我们可以以代码的方式控制它。Method | Used to… |
value | 给一个单一的slider handle设置一个新值。它会将handle自动移动到track上新的位置。这个方法接受一个单一的整数参数 |
values | 当启用多个handles时,设置指定的handle移动到新的值。这个方法接受两个参数,index和新值 |
value 和 values 方法可以set 和 get 一个单一或多个handles的 value。当然,我们也可以使用option 方法。
<button type="button" id="setMax">Set to max value</button> <div id="mySlider"> </div> $(function(){ $("#mySlider").slider(); $("#setMax").click(function(){ var maxVal=$("#mySlider").slider("option","max"); $("#mySlider").slider("value",maxVal); }); });
<button type="button" id="low" class="preset">Preset 1(low)</button> <button type="button" id="hight" class="preset">Preset 2(hight)</button> <div id="mySlider"> </div> $(function(){ var sliderOpts={ values:[25,75] }; $("#mySlider").slider(sliderOpts); $(".preset").click(function(){ if(this.id==="low"){ $("#mySlider").slider("values",0,0); $("#mySlider").slider("values",1,25); }else{ $("#mySlider").slider("values",0,75); $("#mySlider").slider("values",1,100); } }); });
注意,当前jquery版本中,不能通过链式的使用两个方法,修改不同的个体。因为这个方法返回一个新值,并且不是一个jQuery 独享。
6 实际的使用
HTML 5 的<audio>元素,会自动地添加用户播放,暂停,调整音量的控制。<audio id="audio" src="img/1.mp3">Your browser does not support the <code>audio</code>element.</audio> <div id="volume"></div> $(function(){ var audio=$("#audio")[0], sliderOpts={ value:5, min:0, max:10, orientation:"vertical", change:function(){ var vol=$(this).slider("value")/10; audio.volume=vol; } }; audio.volume=0.5; audio.play(); $("#volume").slider(sliderOpts); });
7 颜色slider
<style> #container { width:426px; height:146px; padding:20px 20px 0; position:relative; font-size:11px; background:#eee; } #container label { float:left; text-align:right; margin:0 30px 26px 0; clear:left; } .ui-slider { width:240px; float:left;} .ui-slider-handle { width:15px; height:27px;} #colorBox { width:104px; height:94px; float:right; margin:-83px 0 0 0; background:#fff; } #container #outputLabel { float:right; margin:-14px 34px 0 0; } #output { width:100px; text-align:center; float:right; clear:both; margin-top:-17px; } </style> <div id="container" class="ui-widget ui-corner-all ui-widget-content ui-helper-clearfix"> <label>R:</label> <div id="rSlider"></div><br> <label>G:</label> <div id="gSlider"></div><br> <label>G:</label> <div id="bSlider"></div> <div id="colorBox" class="ui-corner-all ui-widget-content"> </div> <input id="output" type="text" value="rgb(255,255,255)"> <label for="output" id="outputLabel">Color value:</label> </div> $(function(){ var sliderOpts={ min:0, max:255, slide:function(){ var r=$("#rSlider").slider("value"), g=$("#gSlider").slider("value"), b=$("#bSlider").slider("value"); var rgbString=["rgb(",r,",",g,",",b,")"].join(""); $("#colorBox").css({ backgroundColor:rgbString }); $("#output").val(rgbString); } }; $("#rSlider,#gSlider,#bSlider").slider(sliderOpts); });相关文章推荐
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.8.Datepicker控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.3.创建控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.6.Dialog控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.10.Button 和 Autocomplete控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.4.Tabs控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.5.Accordion控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.9.Progressbar控件
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能
- 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.2.更换主题
- Crownwood Magic UI Library 1.7.4.0,The User Interface Library for .NET(开放源码的控件库)
- xxx while the managed IDbConnection interface was being used: Login failed for user xxx
- Yahoo! User Interface Library,YUI,YUI下载,YUI学习,YUI是什么,YUI浅谈,YUI研究(1)
- WCF 学习笔记 (1) - Specify Fault Behaviors for the Service
- LUA学习笔记2-Iterators and the Generic for
- 笔记学习Smashing The Stack for Fun and Profit example 3--怎样修改返回地址。
- 【TDS学习笔记】Install the Web Admin Tool for TDS
- Cool URIs for the Semantic Web学习笔记
- Yahoo! User Interface Library,YUI,YUI下载,YUI学习,YUI是什么,YUI浅谈,YUI研究(2)
- The C++ Standard Library 学习笔记(一)第6章