Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

EasyUI jQuery linkbutton widget

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

EasyUI is an 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 link button using jQuery EasyUI. The link button is used to create a hyperlink button. It is a representation of a normal <a> tag. It can display both an icon and text or only the icon or text.

Downloads for EasyUI for jQuery:


<div class="linkbutton">


  • width: The width of this component.
  • height: The height of this component.
  • id: The id attribute of this component.
  • disabled: True to disable the button.
  • toggle: True to enable the user to switch its state to selected or unselected.
  • selected: Defines if the button’s state is selected.
  • group: The group name that indicates what buttons belong to.
  • plain: True to show a plain effect.
  • text: The button text.
  • iconCls: A CSS class to display a 16×16 icon on left.
  • iconAlign: Position of the button icon.
  • size: The button size.


  • onClick: Fires when the button is clicked.


  • options: Return options property.
  • resize: Resize the button.
  • disable: Disable the button.
  • enable: Enable the button.
  • select: Select the button.
  • unselect: Unselect the button.

CDN Link: 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=””> </script>



<!doctype html> 
        <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"
        <link rel="stylesheet" type="text/css"
        <link rel="stylesheet" type="text/css"
        <!--jQuery library -->
        <script type="text/javascript" src="jquery.min.js"
        <!--jQuery libraries of EasyUI -->
        <script type="text/javascript"
        <!--jQuery library of EasyUI Mobile -->
        <script type="text/javascript"
    <script type="text/javascript"
      $(document).ready(function (){ 
              text: "GeeksforGeeks"
        <h3>EasyUI jQuery linkbutton widget</h3>
        <a href=
"" id="gfg" class="easyui-linkbutton">



My Personal Notes arrow_drop_up
Last Updated : 31 Mar, 2021
Like Article
Save Article
Similar Reads