jQuery Split Button Example - with menu items
Hi Everyone,
In this I'm going to show how to create a jQuery Split Button.
Add bellow mentioned script files.
<script src="jQuery/jquery-1.7.2.js" type="text/javascript"></script>
<script src="jQuery/ui/jquery-ui-1.8.21.custom.js" type="text/javascript"></script>
<script type="text/javascript" src="jQuery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jQuery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jQuery/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="jQuery/ui/jquery.ui.position.js"></script>
Step 02
Add bellow mentioned styles/style sheets.
<link href="jQuery/themes/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet"
type="text/css" />
<link href="jQuery/demos/demos.css" rel="stylesheet" type="text/css" />
<style>
.ui-menu /* menu style */
{
position: absolute;
width: 100px;
}
</style>
* You can get these style sheets from jQuery site.
Step 03
Add bellow mentioned jQyery script code.
<script type="text/javascript">
$(function () {
$("#btn1")
.button({
disabled: false,
text: true,
label: "Click Me",
icons: { primary: 'ui-icon-gear' }
})
.click(function () {
alert("You clicked Click Me button...");
})
$("#btn2")
.button({
disabled: false,
text: false,
icons: { primary: 'ui-icon-triangle-1-s' }
})
.click(function () {
var menu = $(this).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$(document).one("click", function () {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});
</script>
Step 04
Finally add bellow mentioned html in to </form> tag.
<div class="demo">
<div>
<div>
<button id="btn1">
button text
</button>
<button id="btn2">
button text
</button>
</div>
<ul>
<li><a href="#" onclick="javascript:alert('You clicked Open button...');">Open...</a></li>
<li><a href="#" onclick="javascript:alert('You clicked Save button...');">Save</a></li>
<li><a href="#" onclick="javascript:alert('You clicked Delete button...');">Delete</a></li>
</ul>
</div>
</div>
Complete Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Split Button</title>
</head>
<script src="jQuery/jquery-1.7.2.js" type="text/javascript"></script>
<script src="jQuery/ui/jquery-ui-1.8.21.custom.js" type="text/javascript"></script>
<script type="text/javascript" src="jQuery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jQuery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jQuery/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="jQuery/ui/jquery.ui.position.js"></script>
<link href="jQuery/themes/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet"
type="text/css" />
<link href="jQuery/demos/demos.css" rel="stylesheet" type="text/css" />
<style>
.ui-menu /* menu style */
{
position: absolute;
width: 100px;
}
</style>
<script type="text/javascript">
$(function () {
$("#btn1")
.button({
disabled: false,
text: true,
label: "Click Me",
icons: { primary: 'ui-icon-gear' }
})
.click(function () {
alert("You clicked Click Me button...");
})
$("#btn2")
.button({
disabled: false,
text: false,
icons: { primary: 'ui-icon-triangle-1-s' }
})
.click(function () {
var menu = $(this).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$(document).one("click", function () {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});
</script>
<body>
<form id="form1" runat="server">
<div class="demo">
<div>
<div>
<button id="btn1">
button text
</button>
<button id="btn2">
button text
</button>
</div>
<ul>
<li><a href="#" onclick="javascript:alert('You clicked Open button...');">Open...</a></li>
<li><a href="#" onclick="javascript:alert('You clicked Save button...');">Save</a></li>
<li><a href="#" onclick="javascript:alert('You clicked Delete button...');">Delete</a></li>
</ul>
</div>
</div>
</form>
</body>
</html>
Happy Coding !! :)
Add a comment