第三十章：Slider（滑動條）組件
學習要點：
- 加載方式
- 屬性列表
- 事件列表
- 方法列表
一、加載方式：
1.class加載方式：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box" class="easyui-slider" value="" style="width:300px" data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]"/>
</body>
</html>
2.JS調用加載：
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box">
</body>
</html>
$(function(){
$.('#box').slider({
width:300,
height:200,
});
});
二、屬性列表：
| Slider屬性 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| width | number | 滑動條寬度。默認值auto。 |
| height | number | 滑動條高度。默認值auto。 |
| mode | string | 申明滾動條類型。可用值有：'h'（水平），'v'（垂直）。默認值'h'。 |
| reversed | boolean | 設置爲true時，最小值和最大值將對調他們的位置，默認值false。 |
| showTip | boolean | 定義是否顯示值信息提示。默認值false。 |
| disabled | boolean | 定義是否禁用滑動條，默認值false。 |
| value | number | 默認值，默認值0。 |
| min | number | 允許的最小值，，默認值0。 |
| max | number | 允許的最大值，默認值100。 |
| step | number | 值增加或減少。默認值1。 |
| rule | array | 顯示標籤旁邊的滑塊，‘|’只顯示一行。默認值[]。 |
| tipFormatter | function | 該函數用於格式化滑動條。返回的字符串值將顯示提示。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box">
</body>
</html>
$(function(){
$.('#box').slider({
width:300,
height:200,
mode:'v',
rule:[0,'|',25,'|',50,'|',75,'|',100],
showTip:true,
reversed:false,
value:12,
min:0,
max:100,
step:1,
tipFormatter:function(value){
return value + '%',
}
});
});
三、事件列表：
| Slider事件 | ||
|---|---|---|
| 方法名 | 傳參 | 說明 |
| onChange | newValue，oldValue | 在字段值更改的時候觸發。 |
| onSlideStart | value | 在開始拖拽滑動條的時候觸發。 |
| onSliderEnd | value | 在結束拖拽滑動條的時候觸發。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box">
<span id="text">文字</span>
</body>
</html>
$(function(){
$.('#box').slider({
onSliderStart：function(value){
console.log(value);
}
onSliderEnd：function(value){
console.log(value);
}
onChange:function(newValue,oldValue){
$.('#text').css('font-size',newValue);
}
});
});
四、方法列表：
| Slider方法 | ||
|---|---|---|
| 方法名 | 參數 | 說明 |
| options | none | 返回滑動條屬性。 |
| destory | none | 銷燬滑動條對象。 |
| resize | param | 設置滑動條大小。‘param’參數包含以下屬性：width：滑動條寬度。height：滑動條高度。 |
| getValue | none | 獲取滑動條的值。 |
| setValue | value | 設置滑動條的值。 |
| clear | none | 清除滑動條的值。 |
| reset | none | 重置滑動條的值。 |
| enable | none | 啓用滑動條控件。 |
| disable | none | 禁用滑動條控件。 |
<!DOCTYPE html>
<html>
<head>
<title>JQuery Easy UI</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<input id="box">
</body>
</html>
$(function(){
$.('#box').slider({
});
//返回滑動條屬性
console.log($('#box').slider('options'));
//返回滑動條屬性
$('#box').slider('destroy');
//設置滑動條大小
$('#box').slider('resize',{
width:500,
height:30,
});
//設置滑動條值
console.log($('#box').slider('setValue',90));
//獲取滑動條值
$('#box').slider('getValue');
//清理重置
$('#box').slider('clear');
$('#box').slider('reset');
});
PS：我們可以使用$.fn.slider.defaults重寫默認值對象。
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/103063492
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載