JQuery EasyUI(28)

EasyUI TimeSpinner 组件详解

最新推荐文章于 2025-07-01 23:42:13 发布

翻译最新推荐文章于 2025-07-01 23:42:13 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI框架中的TimeSpinner组件，包括其加载方式、属性、事件及方法。学习如何通过class加载和JS调用加载组件，了解separator、showSeconds等属性的作用，掌握onSpinUp、onSpinDown等事件的应用，以及options、setValue等方法的使用。

第二十八章：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.youkuaiyun.com/Roger_CoderLife/article/details/103060965

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载