第二百一十六节,jQuery EasyUI,Spinner(微调)组件

jQuery EasyUI,Spinner(微调)组件

 

学习要点:

  1.加载方式

  2.属性列表

  3.事件列表

  4.方法列表

 

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

这个组件是其他微调组件的基础组件,所以一般不会直接使用这个组件

 

一.加载方式

Spinner(微调)组件是其他两款高级微调组件的基础组件,默认情况下无法微调。这个 组件不支持 class 加载方式。

html

<input id="box" value="2">

JS 加载调用

spinner()将一个元素执行微调组件

$(function () {
    $('#box').spinner({
        required: true,
    });
});

 

二.属性列表

第二百一十六节,jQuery EasyUI,Spinner(微调)组件_第1张图片

width   number 组件宽度。默认值 auto。

$(function () {
    $('#box').spinner({
        width: 200,
        height:30
    });
});

 

height   number 组件高度。默认值22。

$(function () {
    $('#box').spinner({
        width: 200,
        height:30
    });
});

 

value   string 默认值。

$(function () {
    $('#box').spinner({
        width: 200,
        height:30,
        value:5
    });
});

 

min   string 允许的最小值。默认值 null。单独使用没有效果

$(function () {
    $('#box').spinner({
        width: 200,
        height:30,
        min:5,
        max:50
    });
});

 

max   string 允许的最大值。默认值 null。单独使用没有效果

$(function () {
    $('#box').spinner({
        width: 200,
        height:30,
        min:5,
        max:50
    });
});

 

increment   number 在点击微调按钮的时候的增量值。默认值1。单独使用没有效果

$(function () {
    $('#box').spinner({
        width: 200,
        height:30,
        increment:5     //在点击微调按钮的时候的增量值。默认值1
    });
});

 

editable   boolean 定义用户是否可以直接输入值到字段。默认值 true。

$(function () {
    $('#box').spinner({
        width: 200,
        height:30,
        editable:false     
    });
});

 

disabled   boolean 定义是否禁用字段。默认值 false。

$(function () {
    $('#box').spinner({
        width: 200,
        height:30,
        disabled:true
    });
});

 

spin   function(down) 在用户点击微调按钮的时候调用的函数。'down'参数对应用户点击的向下按钮。可以判断用户点击微调的上按钮还是下按钮,点击下按钮返回true,点击上按钮返回false

 

$(function () {
    $('#box').spinner({
        width: 200,
        height:30,
        spin:function (down) {
            alert(down);
        }
    });
});

 

 

 

三.事件列表

第二百一十六节,jQuery EasyUI,Spinner(微调)组件_第2张图片

onSpinUp none 在用户点击向上微调按钮的时候触发

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30,
        onSpinUp: function () {     //在用户点击向上微调按钮的时候触发
            //当用户点击上按钮时,获取到输入框的值加1,在赋值给输入框
            $('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) + 1);
        },
        onSpinDown: function () {   //在用户点击向下微调按钮的时候触发
            //当用户点击下按钮时,获取到输入框的值减1,在赋值给输入框
            $('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) - 1);
        },
    });
});

 

onSpinDown none 在用户点击向下微调按钮的时候触发

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30,
        onSpinUp: function () {     //在用户点击向上微调按钮的时候触发
            //当用户点击上按钮时,获取到输入框的值加1,在赋值给输入框
            $('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) + 1);
        },
        onSpinDown: function () {   //在用户点击向下微调按钮的时候触发
            //当用户点击下按钮时,获取到输入框的值减1,在赋值给输入框
            $('#box').spinner('setValue', parseInt($('#box').spinner('getValue')) - 1);
        },
    });
});

 

 

四.方法列表

第二百一十六节,jQuery EasyUI,Spinner(微调)组件_第3张图片

第二百一十六节,jQuery EasyUI,Spinner(微调)组件_第4张图片

options   none 返回属性对象。

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    alert($('#box').spinner('options'));
});

 


destroy   none 销毁微调组件。

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    $('#box').spinner('destroy');
});

 


resize   width 返回组件宽度。通过'width'参数重写原始宽度。重写或者重置组件

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    $('#box').spinner('resize',100);  //重写宽度
});

 


enable   none 启用组件。

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    $('#box').spinner('disable');
    $('#box').spinner('enable');
});

 


disable   none 禁用组件。

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    $('#box').spinner('disable');
    $('#box').spinner('enable');
});

 


getValue   none 获取组件值。

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    alert($('#box').spinner('getValue'));  //获取组件值
});

 


setValue   value 设置组件值。

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    $('#box').spinner('setValue',500);
});

 


clear   none 清空组件值。

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    $('#box').spinner('clear');
});

 


reset   none 重置组件值。

$(function () {
    $('#box').spinner({
        width: 200,
        height: 30
    });
    $('#box').spinner('reset');
});

 

 

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

你可能感兴趣的:(javascript,ViewUI)