Posted on by John

jQuery-UI Split Button

Here’s how to create a split button with jQuery-ui

$( “#mySplitButton” ).splitButton();

JQuery-ui split button

This blog demonstrates how to create a split button with jQuery-ui.

jQuery-ui Split Button plugin code:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(function ($) {
$.fn.extend({
splitButton: function () {
return this.each(function () {
var defButton = $(this).find('button:eq(0)');
$(defButton).removeClass('ui-corner-all');
$(defButton).css('margin-right', '0px');
$(defButton).css('border-right', 'none');
var menuButton = $(this).find('button:eq(1)');
$(menuButton).removeClass('ui-corner-all');
$(menuButton).css('margin-left', '0px');
 
var menu = $(this).find('ul:first');
$(menu).data.visible = false;
$(menu).menu();
$(menu).css('position', 'absolute');
$(menu).css('display', 'none');
$(menu).css('z-index', '1000'); //Increase this if the menu is behind things
$(menu).css('min-width', parseInt($(menuButton).outerWidth(true) + $(defButton).outerWidth(true)) + "px");
 
$(menuButton).click(function () {
$(menu).fadeIn('fast');
return false;
});
 
//close menu when clicked outside
$(document).mouseup(function (e) {
if ($(menu).has(e.target).length === 0 || $(menuButton).has(e.target).length === 0) {
$(menu).fadeOut('fast');
}
});
 
//close menu when escape key pressed
$(document).keyup(function (e) {
if (e.keyCode == 27) {    // esc key
$(menu).fadeOut('fast');
}
});
 
});
}
});
})(jQuery);

 

jQuery-ui Split Button markup

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--
This outer div is part of the required markup
Can be any element
-->
<div id="mySplitButton" >
<button class="ui-corner-tl ui-corner-bl" id="myCoolButton">Split Me!</button><button class="ui-corner-tr ui-corner-br">
<span class="ui-icon ui-icon-triangle-1-s" style="display:inline-block" ></span></button>
<ul class="closeOnMouseClickedOutside">
<li><a id="mymenuLink1" href="">Link 1</a></li>
<li><a id="mymenuLink2" href="">Link 2</a></li>
<li><a id="mymenuLink3" href="">Link 2</a></li>
</ul>
</div>

 

jQuery-ui Split Button usage

JavaScript
1
2
3
4
5
//demo setup
$('button').button(); //requires that the buttons involved be .button()'ed first
 
//create the split button. On the div. The markup structure needs to be as in the example
$( "#mySplitButton" ).splitButton();

 

Notes

  • NB: – If the font-size of the main button is too small the menu button will be larger than the main button. The reason is that the triangle icon does not resize. Consider using twitter bootstrap / font awesome icons if it’s an issue. See this blog for more on that.
  • The plugin assumes that .button() has previously been called
  • The markup needs to be pretty much as it is in the example above. The outer div can be any element.

 

Full Code Example (no dependencies)

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" type="text/css">
<script type="text/javascript">
/*
jQuery plugin to create a split button from specific markup.
The markup needs to look like this where
1) The container id="mySplitButton" can be anything.
2) The content of the id="mySplitButton" must be the same structure as below.
 
(The plugin assumes that .button() has been called on the buttons already)
 
<div id="mySplitButton">
<button class="ui-corner-tl ui-corner-bl" id="myCoolButton">Split Me!</button><button class="ui-corner-tr ui-corner-br">
<span class="ui-icon ui-icon-triangle-1-s" style="display:inline-block" ></span></button>
<ul class="closeOnMouseClickedOutside">
<li><a id="mymenuLink1" href="">Link 1</a></li>
<li><a id="mymenuLink2" href="">Link 2</a></li>
<li><a id="mymenuLink3" href="">Link 2</a></li>
</ul>
</div>
 
Use as so:
$(document).ready( function(){
$( ".splitButton" ).splitButton();
});
 
NB: -   Note that the two <button>'s are joined rather than having a new-line / carriage-return between them
This is to eliminate any white space between the buttons
 
NB2: - The plugin assumes that .button() has been called on the buttons previously
*/
(function ($) {
$.fn.extend({
splitButton: function () {
return this.each(function () {
var defButton = $(this).find('button:eq(0)');
$(defButton).removeClass('ui-corner-all');
$(defButton).css('margin-right', '0px');
$(defButton).css('border-right', 'none');
var menuButton = $(this).find('button:eq(1)');
$(menuButton).removeClass('ui-corner-all');
$(menuButton).css('margin-left', '0px');
 
var menu = $(this).find('ul:first');
$(menu).data.visible = false;
$(menu).menu();
$(menu).css('position', 'absolute');
$(menu).css('display', 'none');
$(menu).css('z-index', '1000'); //Increase this if the menu is behind things
$(menu).css('min-width', parseInt($(menuButton).outerWidth(true) + $(defButton).outerWidth(true)) + "px");
 
$(menuButton).click(function () {
$(menu).fadeIn('fast');
return false;
});
 
//close menu when clicked outside
$(document).mouseup(function (e) {
if ($(menu).has(e.target).length === 0 || $(menuButton).has(e.target).length === 0) {
$(menu).fadeOut('fast');
}
});
 
//close menu when escape key pressed
$(document).keyup(function (e) {
if (e.keyCode == 27) {    // esc key
$(menu).fadeOut('fast');
}
});
 
});
}
});
})(jQuery);
/*
* End plugin
*/
 
$(document).ready( function(){
//demo setup
$('button').button(); //.splitButton() requires that the buttons involved be .button()'ed first
 
//create the split button. On the div. The markup structure needs to be as in the example
$( "#mySplitButton" ).splitButton();
 
//do stuff with the button and menu item. For demonstration purposes only. Nothing to do with creating the split button
$('#myCoolButton, #mymenuLink1').click(function(){
alert('doing default functionality');
return false;
});
 
$('#mymenuLink2').click(function(){
alert('doing other stuff 2');
return false;
});
 
$('#mymenuLink3').click(function(){
alert('doing other stuff 3');
return false;
});
 
$('.cbClass').click( function() {
alert('c');
});
 
});
 
</script>
<style type="text/css">
body {
/*
NB: - If the font-size of the main button is too small the menu button will be larger than the main button.
The reason is that the triangle icon does not resize.
Consider using twitter bootstrap / font awsome icons if it's an issue.
*/
font-size:1em;
padding:50px;
}
 
#footer {
height: 500px;
border-top:1px solid #dedede;
background:#eaeaea;
}
 
.pt20px {
padding-top:20px;
}
</style>
</head>
<body>
 
<!--
This outer div is part of the required markup
Can be any element
-->
<div id="mySplitButton" >
<button class="ui-corner-tl ui-corner-bl" id="myCoolButton">Split Me!</button><button class="ui-corner-tr ui-corner-br">
<span class="ui-icon ui-icon-triangle-1-s" style="display:inline-block" ></span></button>
<ul class="closeOnMouseClickedOutside">
<li><a id="mymenuLink1" href="">Link 1</a></li>
<li><a id="mymenuLink2" href="">Link 2</a></li>
<li><a id="mymenuLink3" href="">Link 2</a></li>
</ul>
</div>
 
<div class="pt20px" >
Stuff under Stuff under Stuff under Stuff under Stuff under Stuff under Stuff under Stuff under
Stuff under Stuff under Stuff under Stuff under Stuff under
Stuff under Stuff under Stuff under Stuff under Stuff under
Stuff under Stuff under Stuff under Stuff under Stuff under
<br/><br/><br/><br/><br/><br/>
</div>
 
<div id="footer">
Footer....
</div>
 
</body>
</html>

 

Comments always welcome….