Edit This Code:
See Result »
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>Split Buttons Example</h2> <ul data-role="listview" data-inset="true" data-split-theme="b"> <li data-role="divider" data-theme="a">Browsers</li> <li> <a href="tryit.asp-filename=tryjqmob_themes_split.html#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p> </a> <a href="tryit.asp-filename=tryjqmob_themes_split.html#download" data-rel="dialog" data-transition="pop">Download Browser</a> </li> <li> <a href="tryit.asp-filename=tryjqmob_themes_split.html#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox is a web browser from Mozilla. Released in 2004.</p> </a> <a href="tryit.asp-filename=tryjqmob_themes_split.html#download" data-rel="dialog" data-transition="pop">Download Browser</a> </li> </ul> </div> </div> <div data-role="page" id="download"> <div data-role="main" class="ui-content"> <h3>Split Button Example</h3> <p>The buttons below are for demonstration purposes only.</p> <a href="tryit.asp-filename=tryjqmob_themes_split.html#" class="ui-btn ui-btn-b ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-check ui-btn-icon-left" data-rel="back">Download</a> <a href="tryit.asp-filename=tryjqmob_themes_split.html#" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-mini ui-icon-delete ui-btn-icon-left" data-rel="back">Cancel</a> </div> </div> </body> </html>
Result: