EasyUI jQuery linkbutton widget

Last Updated : 31 Mar, 2021

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:

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

Syntax:

<div class="linkbutton">
</div>

Properties:

  • 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 16x16 icon on left.
  • iconAlign: Position of the button icon.
  • size: The button size.

Events:

  • onClick: Fires when the button is clicked.

Methods:

  • 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="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').linkbutton({
              text: "GeeksforGeeks"
          }); 
      }); 
        </script> 
    </head> 

    <body>

        <h1>GeeksforGeeks</h1>
        <h3>EasyUI jQuery linkbutton widget</h3>
        <a href=
"https://www.geeksforgeeks.org/" id="gfg" class="easyui-linkbutton">
        </a>
    </body>
</html>

Output:

Reference: http://www.jeasyui.com/documentation/

Comment

Explore