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
| Property | Value |
|---|---|
| icon | "icon_name" |
| iconPosition | "top", "bottom", "left", "right" |
| showLabel | true 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