EasyUI jQuery tagbox Widget
EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
In this article, we will learn how to design a tagbox using jQuery EasyUI. Tagbox allows the user to display tag labels instead of displaying values on the inputting box.
Downloads EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Syntax:
<input class="easyui-tagbox">
Properties:
- hasDownArrow: It returns boolean value true to show a down arrow button otherwise return false.
- tagFormatter: The function to return the formatted value.
- tagStyler: The tag styler function.
Event:
- onClickTag: Fires when the tag is clicked.
- onBeforeRemoveTag: Fires before removing a tag.
- onRemoveTag: Fires when you remove a tag.
Approach: First, add jQuery Easy UI scripts needed for your project.
<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>
Example:
HTML
<!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').tagbox({ hasDownArrow: true }); }); </script></head> <body> <h1>GeeksforGeeks</h1> <h3>EasyUI jQuery tagbox widget</h3> <input id="gfg" class="easyui-tagbox" value="jQuery,JavaScript,HTML" label="Add a tag"></body> </html> |
Output:
Reference: http://www.jeasyui.com/documentation/
Please Login to comment...