第二百一十八节,jQuery EasyUI,TimeSpinner(时间微调)组件

jQuery EasyUI,TimeSpinner(时间微调)组件

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

本节课重点了解 EasyUI 中 TimeSpinner(时间微调)组件的使用方法,这个组件依赖于 Spinner(微调)组件。

一.加载方式

class 加载方式

<input id="box" class="easyui-timespinner">

timespinner()将一个输入框执行时间微调组件方法

JS 加载调用

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,
        min: ‘00:00‘,
        max: ‘23:59‘,
        editable: false,
    });
});

二.属性列表

TimeSpinner 属性,扩展自 Spinner(微调)组件,所以微调组件也是可以用的

separator   string 定义在小时、分钟和秒之间的分隔符。默认值为‘:’。

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        separator:‘/‘
    });
});

showSeconds   boolean 定义是否显示秒钟信息。默认值为 false。

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        separator:‘/‘,
        showSeconds:true
    });
});

highlight   number 初始选中的字段 0=小时,1=分钟...默认值为0。

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        highlight:1,

    });
});

三.事件列表

TimeSpinner(时间微调)组件继承自 Spinner(微调)组件。

事件列表

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        highlight: 1,
        onSpinUp: function () {
            alert(‘点击了上微调按钮‘);
        },
        onSpinDown: function () {
            alert(‘点击了下微调按钮‘);
        },
    });
});

四.方法列表

TimeSpinner 方法,扩展自 ValidateBox(验证框)

options   none 返回属性对象。

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        highlight: 1,
    });
    alert($(‘#box‘).timespinner(‘options‘));
});

setValue   value 设置时间微调组件的值。

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        highlight: 1,
    });
    $(‘#box‘).timespinner(‘setValue‘,‘12:23:45‘);
});

getHours   none 获取当前的小时数。

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        highlight: 1,
    });
    $(document).click(function () {
        alert($(‘#box‘).timespinner(‘getHours‘));
        alert($(‘#box‘).timespinner(‘getMinutes‘));
        alert($(‘#box‘).timespinner(‘getSeconds‘));
    });
});

getMinutes   none 获取当前的分钟数。

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        highlight: 1,
    });
    $(document).click(function () {
        alert($(‘#box‘).timespinner(‘getHours‘));
        alert($(‘#box‘).timespinner(‘getMinutes‘));
        alert($(‘#box‘).timespinner(‘getSeconds‘));
    });
});

getSeconds   none 获取当前的秒数。

$(function () {
    $(‘#box‘).timespinner({
        value: ‘00:00‘,     //初始时间
        min: ‘00:00‘,       //最小值
        max: ‘23:59‘,       //最大值
        highlight: 1,
    });
    $(document).click(function () {
        alert($(‘#box‘).timespinner(‘getHours‘));
        alert($(‘#box‘).timespinner(‘getMinutes‘));
        alert($(‘#box‘).timespinner(‘getSeconds‘));
    });
});

我们可以使用$.fn.timespinner.defaults 重写默认值对象。

时间: 2024-10-07 05:16:26

第二百一十八节,jQuery EasyUI,TimeSpinner(时间微调)组件的相关文章

表单(下)-EasyUI Spinner 微调器、EasyUI Numberspinner 数值微调器、EasyUI Timespinner 时间微调器、EasyUI Slider 滑块

EasyUI Spinner 微调器 扩展自 $.fn.validatebox.defaults.通过 $.fn.spinner.defaults 重写默认的 defaults. 微调器(spinner)把可编辑的文本框和两个小按钮结合起来,允许用户从某个范围的值中进行选择.与组合框(combobox)相似,微调器(spinner)允许用户输入一个值,但是它买i有下拉列表.微调器(spinner)是创建其他微调器组件(比如:数值微调器 numberspinner.时间微调器 timespinne

第二百一十四节,jQuery EasyUI,Calendar(日历)组件

jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法,这个组件不依赖于其 他组件. 一.加载方式 class 加载方式 <div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div>

第二百零九节,jQuery EasyUI,Pagination(分页)组件

jQuery EasyUI,Pagination(分页)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Pagination(分页)组件的使用方法,这个组件依赖于 LinkButton(按钮)组件.

第二百零六节,jQuery EasyUI,Menu(菜单)组件

jQuery EasyUI,Menu(菜单)组件 学习要点: 1.加载方式 2.菜单项属性 3.菜单属性 4.菜单事件 5.菜单方法 本节课重点了解 EasyUI 中 Menu(菜单)组件的使用方法,这个组件不依赖于任何其他 组件. 一.加载方式 菜单组件通常用于快捷菜单,在加载方式上,通过 class 或 JS 进行设置为菜单组件. 然后,再通过 JS 事件部分再响应. class 加载方式, <div id="box" class="easyui-menu"

第二百零四节,jQuery EasyUI,Dialog(对话框)组件

jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖于Window(窗 口)组件.linkbutton (按钮)组件. 一.加载方式 class 加载方式 <div class="easyui-dialog" title="My Dialog" style="width:400px;height:200p

第二百零二节,jQuery EasyUI,Layout(布局)组件

jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个组件依赖于 Panel(面 板)组件和 resizable(调整大小)组件. 一.加载方式 class 加载方式,这个属性一般使用class方法使用 <body id="box" class="easyui-layout"> <div data-opt

第二百零三节,jQuery EasyUI,Window(窗口)组件

jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件依赖于 Panel(面 板)组件.resizable(调整大小)和 draggable(拖动)组件.这个组件扩展与 Panel 组件, 最大的优势就是调整大小和拖动以及内部布局. 一.加载方式 class 加载方式 <div id="box" class="easyui-w

第二百一十三节,jQuery EasyUI,NumberBox(数值输入框)组件

jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法,这个组件依赖 于 ValidateBox(验证框)组件. 一.加载方式 class 加载方式 <input type="text" class="easyui-numberbox" value="10

第一百九十三节,jQuery EasyUI,Draggable(拖动)组件

Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 &l