EasyUI jQuery numberspinner widget

EasyUI jQuery numberspinner widget

EasyUI是一个HTML5框架,用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能,为开发者节省大量时间。

在这篇文章中,我们将学习如何使用jQuery EasyUI设计一个数字旋转器。数字旋转器部件结合了一个可编辑的文本框和两个小按钮,让用户从一系列数值中选择。

EasyUI for jQuery的下载:

https://www.jeasyui.com/download/index.php

语法:

<input class="easyui-numberspinner">

属性:

  • width : 该组件的宽度。
  • height : 该组件的高度。
  • value : 初始化值。
  • min : 允许的最小值。
  • max :最大的允许值。
  • increment : 点击旋钮时的增量值。
  • editable : 定义用户是否可以直接在字段中输入数值。
  • disabled : 定义是否禁用该字段。
  • readonly : 定义该组件是否为只读。
  • spinAlign :定义了旋转按钮的排列。

方法:

  • options。返回选项对象。
  • setValue。设置数字旋钮的值。

属性:

  • onSpinUp。当用户点击向上旋转的按钮时启动。
  • onSpinDown:当用户点击向下旋转的按钮时发生火灾。

CDN链接:首先,添加你的项目需要的jQuery Easy UI脚本。

<script type=”text/javascript” src=”jquery.min.js”> </script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”>
</script> <!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”>
</script>

示例:

<!doctype html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="initial-scale=1.0, 
                    maximum-scale=1.0, user-scalable=no"> 
              
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css"
        href="themes/metro/easyui.css"> 
  
    <link rel="stylesheet" type="text/css"
        href="themes/mobile.css"> 
  
    <link rel="stylesheet" type="text/css"
        href="themes/icon.css"> 
  
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"> 
    </script> 
  
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
        src="jquery.easyui.min.js"> 
    </script> 
      
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js"> 
    </script> 
    <script type="text/javascript"> 
      (document).ready(function (){ 
        ('#gfg').numberspinner({ 
          min: 10,
            max: 100,
            editable: false
  
        }); 
      }); 
    </script> 
</head> 
<body>
  
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery numberspinner widget</h3>
    <input id="gfg" class="easyui-numberpinner">
</body>
</html>

输出:

EasyUI jQuery numberspinner widget

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程