Here’s how to create a split button with jQuery-ui
$( “#mySplitButton” ).splitButton();
This blog demonstrates how to create a split button with jQuery-ui.
jQuery-ui Split Button plugin code:
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
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
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)
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….