博客

EasyUI jQuery numberbox Widget

  • Post category:jquery

EasyUI是一款基于jQuery实现的UI库。其中numberbox Widget是easyUI的一个数字输入框组件。下面我将为大家介绍该组件的完整攻略。

1. 引入EasyUI和jQuery

在使用numberbox之前，需要先引入EasyUI和jQuery库文件。在head标签中加入如下代码即可：

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/themes/icon.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/jquery.easyui.min.js"></script>

2. 使用numberbox

基本用法

EasyUI的numberbox可以由input标签转换而来。第一步，定义一个input标签，加入class=”easyui-numberbox”属性，在js中使用以下代码即可生成numberbox：

<input class="easyui-numberbox" name="example" value="0" />

数值范围

numberbox支持数值范围，可以通过设置min和max属性来控制数值范围。

<input class="easyui-numberbox" name="example" value="0" min="0" max="10"/>

精度和步长

numberbox还支持精度和步长，可以通过设置precision和increment属性来控制。precision属性可以控制数值的小数点后位数，increment属性可以控制数值的增减步长。

<input class="easyui-numberbox" name="example" value="0" precision="2" increment="0.1"/>

事件处理

numberbox还支持多种事件，包括onValueChange、onChange等。可以在js中通过设置事件处理函数来处理这些事件。

下面是一个简单的示例：

<input class="easyui-numberbox" name="example" value="0" onValueChange="valueChangeHandler" />

<script>
function valueChangeHandler(newValue, oldValue) {
  console.log('new value: ' + newValue);
  console.log('old value: ' + oldValue);
}
</script>

3. 示例说明

示例1

下面是一个完整的示例代码，用于生成一个设置数值范围和步长的numberbox：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>EasyUI Numberbox Widget</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/themes/icon.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/jquery.easyui.min.js"></script>
</head>
<body>
  <input class="easyui-numberbox" name="example" value="0" min="0" max="10" precision="2" increment="0.1"/>
</body>
</html>

示例2

下面是一个完整的示例代码，用于生成一个numberbox并处理onValueChange事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>EasyUI Numberbox Widget</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/themes/icon.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easyui/1.9.12/jquery.easyui.min.js"></script>
</head>
<body>
  <input class="easyui-numberbox" name="example" value="0" onValueChange="valueChangeHandler" />

  <script>
    function valueChangeHandler(newValue, oldValue) {
      console.log('new value: ' + newValue);
      console.log('old value: ' + oldValue);
    }
  </script>
</body>
</html>

在其中，我们通过设置onValueChange事件和valueChangeHandler处理函数来演示对事件的处理。

Tags: