第二十八章：TimeSpinner（時間微調）組件
學習要點：
- 加載方式
- 屬性列表
- 事件列表
- 方法列表
一、加載方式：
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-timespinner">
</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').timespinner({
editable:false,
value:'00:00',
min:'00:00',
max:'23:59',
});
});
二、屬性列表：
| TimeSpinner屬性，擴展自Spinner（微調）組件 | ||
|---|---|---|
| 屬性名 | 值 | 說明 |
| separator | string | 定義在小時、分鐘和秒之間的分隔符。默認值爲‘：’。 |
| showSeconds | boolean | 定義是否顯示秒鐘信息。默認值爲false。 |
| highlight | number | 初始選中的字段0=小時，1=分鐘……默認值爲0。 |
<!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').timespinner({
value:'00:00:00',
separator:'/',
showSeconds:true,
highlight:2,
});
});
三、事件列表：
TimeSpinner（時間微調）組件繼承自Spinner（微調）組件。
| TimeSpinner事件 | ||
|---|---|---|
| 事件名 | 事件屬性 | 說明 |
| onSpinUp | none | 在用戶點擊 向上微調按鈕的時候觸發。 |
| onSpinDown | 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').timespinner({
onSpinUp:function(){
alert('up');
},
onSpinDown:function(){
alert('down');
},
});
});
四、方法列表：
| TimeSpinner方法，擴展自ValidateBox（驗證框） | ||
|---|---|---|
| 方法名 | 傳參 | 說明 |
| options | none | 返回屬性對象。 |
| setValue | value | 設置時間微調組件的值。 |
| getHours | none | 設置當前的小時數。 |
| getMinutes | none | 設置當前的分鐘數。 |
| getSeconds | 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').timespinner({
value:'00:00:00',
separator:'/',
showSeconds:true,
highlight:2,
});
$.('#box').timespinner('setValue','17:11:22');
console.log($.('#box').timespinner('getHours'));
console.log($.('#box').timespinner('getMinutes'));
console.log($.('#box').timespinner('getSeconds'));
});
PS：我們可以使用$.fn.numberspinner.defaults重寫默認值對象。
作者：Roger_CoderLife
鏈接：https://blog.csdn.net/Roger_CoderLife/article/details/103060965
本文根據網易雲課堂JQuery EasyUI視頻教程翻譯成文檔，轉載請註明原文出處，歡迎轉載