EasyUI jQuery textbox Widget

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

在这篇文章中，我们将学习如何使用jQuery EasyUI设计一个文本框。文本框是用来在一个表单中输入文本的。

EasyUI for jQuery的下载：

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

语法:

<input class="easyui-textbox">

属性:

width: 组件的宽度。
height。组件的高度。
cls:给文本框添加一个CSS类。
prompt。要显示在输入框中的提示信息。
value。默认值。
type。文本框的类型。
label。绑定到文本框的标签选择器。
labelWidth：标签宽度。
labelPosition。标签的位置。
labelAlign：标签对齐方式。
multiline。它定义了一个多行文本框。
editable。它定义了用户是否可以直接在该字段中输入文本。
disabled:它定义了该领域是否需要被禁用。
readonly: 它定义了该组件是否是只读的。
icons。附在文本框上的图标。
iconCls。显示在文本框上的背景图标。
iconAlign: 它定义了图标的位置。
iconWidth: 图标的宽度。
buttonText。连接到文本框的按钮的显示文本。
buttonIcon: 连接到文本框的按钮的显示图标。
buttonAlign：按钮的位置。

事件:

onChange : 当字段的值发生变化时，该事件就会发生。
onResize : 当文本框被调整大小时，该事件会发生。
onClickButton : 这个事件在用户点击按钮时发生。
onClickIcon : 当用户点击一个图标时，这个事件就会发生。

方法:

options。返回选项对象。
textbox。返回文本框对象。
button。返回按钮对象。
destroy。销毁文本框组件。
resize。调整组件的宽度。
disable:禁用该组件。
enable。启用该组件。
readonly:启用/禁用只读模式。
clear: 清除组件的值。
reset。重置组件值。
initValue。初始化组件的值。
setText:设置显示的文本值。
getText。获取显示的文本值。
setValue。设置组件的值。
getValue。获取组件的值。
getIcon: 获取指定的图标对象。

步骤:

首先，添加你的项目所需的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').textbox({
          buttonText:'Search'
      }); 
  }); 
    </script> 
</head> 
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery textbox widget</h3>
  
  Enter name : <input id="gfg" class="easyui-textbox">
  
</body>
</html>

输出:

EasyUI jQuery textbox Widget