jquery 插件--滑块的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 引入jquery类库文件-->
<script src="../jquery/jquery-1.7.1.js"></script>

<script src="../jquery/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css-->
<link rel="stylesheet" href="../jquery/css/jquery-ui-1.8.18.custom.css" />

<script type="text/javascript">
 $(document).ready(function(){
  $("#slider").slider({
     disabled:false ,  //false 可滑动  true不可滑动
     animate:true,  //采用动画效果 true有动画效果 布尔、slow
     max:100, //滑块的最大值是
     min:-100, //滑块的最小值
     //value:0, //滑块的默认值
     orientation:"horizontal", // 滑块的方向是verti cal垂直或水平 horizontal
     values:[30,80], //初始化 滑块位置 一个是30 一个是80
     range:true, //范围是固定
     stop:function(event,ui){//采用属性执行event事件
        alert("停止时执行");
        
     }
      //罪业1:slide/colorpicker.
      
      
  });
  //采用bind绑定事件执行event事件
  $("#slider").bind("stopslider",function(event,ui){
       alert("开始时执行");
      
  });
 });

</script>
</head>

<body>
<!--
jquery UI使用前提
  第一步
     引入别人的类库文件
     js类库
     css样式类库文件
   第二步:模拟实现
   
 
-->
<div>滑块的效果</div>
<div id="slider" style="width:300px"></div>

        
        
        

</body>
</html>




阅读更多
上一篇jquery.ui.draggable中文文档jquery 自由拖拽类~study~
下一篇jQuery验证插件 form 验证
想对作者说点什么? 我来说一句

jquery 滑动验证插件

2018年05月28日 5KB 下载

jQuery滑块插件Divas Slider

2015年07月10日 1.6MB 下载

点击左右滚动jQuery滑块插件

2011年12月15日 362KB 下载

fiexslider

2013年03月25日 463KB 下载

jQuery左侧Tab切换的图片滑块插件

2015年01月26日 304KB 下载

jQuery打造个性的幻灯片滑块效果

2013年04月27日 445KB 下载

jQuery滑块插件nstSlider.js

2014年05月04日 180KB 下载

没有更多推荐了,返回首页

关闭
关闭