Chinaunix首页 | 论坛 | 博客

manpaizhou的ChinaUnix博客

首页　| 　博文目录　| 　关于我

manpaizhou

  • 博客访问： 418112
  • 博文数量： 48
  • 博客积分： 1032
  • 博客等级： 上士
  • 技术积分： 1256
  • 用 户 组： 普通用户
  • 注册时间： 2012-05-19 13:24
文章分类

全部博文（48）

文章存档

2014年（3）

2013年（23）

2012年（22）

我的朋友
最近访客
推荐博文
相关博文
jQuery创建滑动条

分类： 系统运维

2012-12-13 17:12:22

    滑动条是界面开发中常用部件，jQuery UI中提供了一个滑动条控件，给我们开发web应用程序带来极大的便利。
    滑动条使用基本的元素（如用
和）组合而成。设置目标元素的样式来呈现滑动条的水槽，然后在其中创建描点元素来形成手柄。滑动条部件可以拥有任意数量的手柄，因此可以包含任意数量的值。

命令语法：slider；

  1. slider(options)
  2. slider('disable')
  3. slider('enable')
  4. slider('destroy')
  5. slider('option',optionName,value)
  6. slider('value',value)
  7. slider('values',index,values)
将目标元素转变为滑动条控件（推荐使用元素）；


滑动条事件： 

eg:

例子：

在jQuer官方()下载最新的核心库和ui库jquery-1.8.3.min.js、jquery-ui-1.9.2.custom.min.js以及jquery-ui-1.9.2.custom.min.css；

关于css样式：

  1. .ui-slider { position: relative; text-align: left; }
  2. .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }/*设置滑块的样式*/
  3. .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

  5. /*horizontal设置水槽即滑动区间的样式*/
  6. .ui-slider-horizontal { height: .8em; }
  7. .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
  8. .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
  9. .ui-slider-horizontal .ui-slider-range-min { left: 0; }
  10. .ui-slider-horizontal .ui-slider-range-max { right: 0; }

  12. .ui-slider-vertical { width: .8em; height: 100px; }
  13. .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
  14. .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
  15. .ui-slider-vertical .ui-slider-range-min { bottom: 0; }
  16. .ui-slider-vertical .ui-slider-range-max { top: 0; }

创建一个简单的水平滑动条，并在text里面动态显示它的值：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>slider</title>
  6. <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
  7. <script type="text/javascript" src="../js/jquery-ui-1.9.2.custom.min.js"></script>
  8. <link rel="stylesheet" href="../css/jquery-ui-1.9.2.custom.min.css" />
  9. <script type="text/javascript">
  10.     $(function() {
  11.         $( "#slider-range-min" ).slider({
  12.             animate:true,
  13.             range: "min",         /*create single hander slider*/
  14.             value: 0,            /*the initial value*/
  15.             min: 0,                /*the minimum value*/
  16.             max: 100,            /*the max value*/
  17.             slide: function( event, slider ) {
  18.                 $( "#amount" ).val( slider.value );
  19.             }
  20.         });
  21.         $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );/*display the initial value*/
  22.     });
  23.     </script>
  24. </head>

  26. <body>
  27. <p>
  28.     <label for="amount" style=" font-family:Verdana, Arial, Helvetica, sans-serif;">Value:</label>
  29.     <input type="text" id="amount" style="border:0; font-weight:bold; width:20px;" disabled="disabled" />
  30. </p>

  32. <div id="slider-range-min"></div>
  33. </body>
  34. </html>

阅读(3425) | 评论(0) | 转发(0) |
0

上一篇：EJScript实现数据异步传输

下一篇：JQuery的Event对象属性和方法

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6