<!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 插件--滑块的效果
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章