JQuery EasyUI(26)_jquery easyui spinner onspinup-优快云博客

本文详细介绍了EasyUI中Spinner组件的使用方法，包括加载方式、属性、事件和方法列表，以及如何通过JS调用来定制组件行为。

第二十六章：Spinner（微调）组件

学习要点：

加载方式
属性列表
事件列表
方法列表

一、加载方式：

Spinner（微调）组件是其他两款高级微调组件的基础组件，默认情况下无法微调，这个组件不支持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" value="2">
 </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').spinner({
      required:ture,
  });
});

二、属性列表：

Spinner属性，扩展自ValidateBox（验证框）组件
属性名	值	说明
width	number	组件宽度。默认值auto。
height	number	组件高度。默认值22。
value	string	默认值
min	string	允许的最小值。默认值null。
max	string	允许的最大值。默认值null。
increment	number	在点击微调按钮的时候的增量值。默认值1。
editable	boolean	定义用户是否可以直接输入值到字段。默认值true。
disable	boolean	定义用户是否禁用该字段。默认值false。
spin	function(down)	在用户点击微调按钮的时候调用的函数。‘down’参数对应用户点击的向下按钮。

<!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').spinner({
      required:ture,

      //width:300,
      //height:40,
    
      value:2,
      min:1,
      max:500,
      increment:1,
      editable:false,
      spin:function(down){
        alert(down);
   }
  });
});

三、事件列表：

Spinner事件
事件名	事件属性	说明
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').spinner({
        onSpinUp:function(){ 
          $.('#box').spinner('setValue',parseInt($('#box').spinner('getValue'))+1);
     },

        onSpinDown:function(){ 
          $.('#box').spinner('setValue',parseInt($('#box').spinner('getValue'))-1);
     },
   });
});

四、方法列表：

Spinner方法，扩展自ValiDateBox（验证框）
方法名	传参	说明
options	none	返回属性对象。
destroy	none	销毁微调组件。
resize	width	返回组件宽度。通过‘width’参数重写原始宽度。
enable	none	启用组件
disable	none	禁用组件
getValue	none	获取组件值
setValue	value	设置组件值
clear	none	清空组件值
reset	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').spinner({
        //返回属性对象
        console.log($('#box').spinner('options'));

        //销毁组件
        $('#box').spinner('destroy');

        //调整到新宽度，第二参数不填，则调整到初始宽度
        $('#box').spinner('resize',200);

        //禁用启用
        $('#box').spinner('disable');
        $('#box').spinner('unable');

        //赋值取值
        $('#box').spinner('setValue',200);
        $('#box').spinner('getValue');

        //赋值取值
        $('#box').spinner('clear');
        $('#box').spinner('reset');

   });
});

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

作者：Roger_CoderLife

链接：https://blog.youkuaiyun.com/Roger_CoderLife/article/details/102957426

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