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