Jquery UI 中 slider 的用法

Jquery UI slider 

解决方案 »

  1.   

    用来干什么的。
    $( ".selector" ).on( "slidechange", function( event, ui ) {} );var $a = $( "#slider" );
    $a.slider({
    slide: function( event, ui ) {
    //每动一下就触发这个函数。


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


    }

    });
      

  2.   

    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>
    效果：