当前位置: 代码迷 >> JavaScript >> Jquery UI 中 slider 的用法,该怎么解决
  详细解决方案

Jquery UI 中 slider 的用法,该怎么解决

热度:1215   发布时间:2013-12-04 17:21:02.0
Jquery UI 中 slider 的用法

API 上  change 方法
Code examples:
Initialize the slider with the change callback specified:
 
$( ".selector" ).slider({
  change: function( event, ui ) {}
});

Bind an event listener to the slidechange event:
 
$( ".selector" ).on( "slidechange", function( event, ui ) {} );


不过还是不知道event, ui应该传什么。。求 slider change方法的使用实例.。回答详细无误的再加30分
Jquery?UI ?slider?

------解决方案--------------------
用来干什么的。
$( ".selector" ).on( "slidechange", function( event, ui ) {} );


var $a = $( "#slider" );
$a.slider({
slide: function( event, ui ) {
//每动一下就触发这个函数。


},
change : function(event,ui){
//mouseUp后,比对数值。如果change了就触发这个函数。


}

});

------解决方案--------------------
slider是jquery里面一个滑块

change:滑动停止,或由程序修改滑块值时执行。使用 event.orginalEvent 属性探测是由用户(鼠标、键盘)或是程序修改。

这个是最简单的使用
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
    #slider { margin: 10px; }
  </style>
  <script>
  $(document).ready(function() {
    $("#slider").slider({
       change: function( event, ui ) {
           $("#result").text(ui.value);//获取滑块移动到的百分比
           var a = event.target;//使用注册事件
           var idName = a.attributes["id"]//获取控件id名
         }
     });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="slider"></div>
<div id="result"></div>
</body>
</html>



效果:
  相关解决方案