JQuery EasyUI(27)

最新推荐文章于 2025-08-11 13:57:57 发布

翻译最新推荐文章于 2025-08-11 13:57:57 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

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

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍了EasyUI框架中的NumberSpinner组件的使用方法，包括加载方式、属性、事件和方法列表。学习如何通过class加载和JS调用来实现数字微调功能，掌握组件的宽度、高度、默认值、最小值、最大值等属性设置。

第二十七章：NumberSpinner（数字微调）组件

学习要点：

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

一、加载方式：

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-numberspinner">
 </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').numberspinner({
     value:10,
     increment:10,
     min:10,
     max:500,
  });
});

二、属性列表：

NumberSpinner（数字微调）组件继承自Spinner（微调）组件。

NumberSpinner属性
属性名	值	说明
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').numberspinner({
      required:ture,

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

三、事件列表：

NumberSpinner（数字微调）组件继承自Spinner（微调）组件。

NumberSpinner事件
事件名	事件属性	说明
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').numberspinner({

        value:10,
        increment:5,
        min:10,
        max:500,

        onSpinUp:function(){ 
          alert('up');
     },

        onSpinDown:function(){ 
         alert('down');
     },
   });
});

四、方法列表：

NumberSpinner（数字微调）组件继承自Spinner（微调）组件。

NumberSpinner方法
方法名	传参	说明
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').numberspinner({
        //返回属性对象
        console.log($('#box').numberspinner('options'));

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

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

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

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

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

   });
});

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

作者：Roger_CoderLife

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

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