关闭

jquery 插件--滑块的效果

标签: jquerystylesheetfunctionxhtmluihtml
794人阅读 评论(0) 收藏 举报
<!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>




0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:218170次
    • 积分:2783
    • 等级:
    • 排名:第13654名
    • 原创:123篇
    • 转载:13篇
    • 译文:0篇
    • 评论:5条
    最新评论