Button Designing in Jquery UI

Date Published: 05/05/2020Published By: JaiSchool

We use button() method to design the button in jquery UI. This method contains some options to customize the button like inserting icons, set icon positions, etc.

Example:-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Button</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

  <button class="btn">Button</button>

<script>
  $(document).ready(function(){
    $(".btn").button();
  });
</script>
</body>
</html>

Options of button() method in jquery UI

PropertyValue
icon"icon_name"
iconPosition"top", "bottom", "left", "right"
showLabeltrue or false

icon Option

To insert an icon in a button using jquery UI, you need to use the icon option of button() widget. You can not change font size, color, etc. because Jquery UI inserts these icons as an image. Get icons name from here.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Button</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

  <button class="btn">Button</button>

<script>
  $(document).ready(function(){
    $(".btn").button({
      icon:"ui-icon-extlink",
    });
  });
</script>
</body>
</html>

iconPosition Option

You can set icon in the left, right, top and bottom position in the button.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Button</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

  <button class="btn">Button</button>

<script>
  $(document).ready(function(){
    $(".btn").button({
      icon:"ui-icon-extlink",
      iconPosition:"bottom",
    });
  });
</script>
</body>
</html>

showLabel Option

When you give its value false, the text inside the button will not be displayed. Icon will be displayed.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Button</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

</head>
<body>

  <button class="btn">Button</button>

<script>
  $(document).ready(function(){
    $(".btn").button({
      icon:"ui-icon-extlink",
      iconPosition:"bottom",
      showLabel:false,
    });
  });
</script>
</body>
</html>

Publish A Comment

Leave a Reply

Your email address will not be published.