JQuery EasyUI(23)

最新推荐文章于 2024-06-19 21:34:23 发布

Roger_CoderLife

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量123

点赞数

分类专栏： WEB - jQuery EasyUI

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

版权

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

第二十三章：NumberBox（数值输入框）组件

学习要点：

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

一、加载方式：

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 type="text" id="box" class="easyui-numberbox">
 </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>
     <inpu id="box"">
 </body>
</html>

$(function(){

   $('#box').numberbox({
      value:500,
  });
});

二、属性列表：

NumberBox属性，扩展自ValidateBox属性
属性名	值	说明
disabled	boolean	是否禁用该字段。默认值false。
value	number	默认值
min	number	最小值
max	number	最大值
precision	number	在十进制分隔符之后显示的最大精度。（即小数点后的显示精度）默认值0
decimalSeparator	string	使用哪一种十进制字符分隔数字的整数和小数部分。默认值为小数点。
groupSeparator	string	使用哪一种字符分隔整数组，以显示成千上万的数据。（比如：99,999,999.00中的‘，’就是该分隔符设置）。
prefix	string	前缀字符。（比如：金额的$或者￥）
suffix	string	后缀字符。（比如：后置的欧元符号€）
filter	function（e）	定义如何过滤按键，当返回true时则允许输入，反之禁止。
formatter	function（v）	用于格式化数组的函数。返回字符串值以显示到输入框中。
parser	function（s）	用于解析字符串的函数。

三、事件列表：

NumberBox事件
事件名	事件属性	说明
onChange	newValue,oldValue	当字段值更改的时候触发。

四、方法列表：

NumberBox方法，扩展自ValidateBox(验证框)
方法名	传参数	说明
options	none	返回数值输入框属性
destroy	none	销毁数值输入框对象
disable	none	禁用字段
enable	none	启用字段
fix	none	将输入框职中的值修正为有效的值。
setValue	value	设置数值输入框的值
getValue	none	获取数值输入框的值
clear	none	清除数值输入框的值
reset	none	重置数值输入框的值

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

<!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>
     <inpu id="box"">
 </body>
</html>

$(function(){

   $('#box').numberbox({
      //value:500,
      //min:5,
      //max:500,
      precision:2,
      //decimalSeparator:':',
      //groupSeparator:',',
      //prefix:'$',
      //suffix:'€',

      /*
      filter:function(){
         return:true,
      },
 
      formater:function(value){
       return:'111,'+ value;
      },

      parser:function(s):{
        return:'111,'+ s;
      },

      onChange:function(newValue,oldValue){
          alert(newValue + '|' + oldValue);
     },
     */

  });

    $(document).click(function(){
      //$('#box').numberbox('fix');
      //console.log($('#box').numberbox('getValue'));
      $('#box').numberbox('setValue',666);
  });
});

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/103007189

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