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

全部博文(48)

文章存档

2014年(3)

2013年(23)

2012年(22)

分类: 系统运维

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; }

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

  10. .ui-slider-vertical { width: .8em; height: 100px; }
  11. .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
  12. .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
  13. .ui-slider-vertical .ui-slider-range-min { bottom: 0; }
  14. .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>

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

  30. <div id="slider-range-min"></div>
  31. </body>
  32. </html>

阅读(3370) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~