The jQuery Mobile framework allows you to add custom controls to the header of a page. This recipe shows you how to add a custom round button to the header of your application.
Copy the full code of this recipe from the code/03/round-button-header sources folder. This code can be launched using the URL http://localhost:8080/03/round-button-header/main.html.
- Create a new stylesheet called
jqm.cssand define a customroundbtnclass in it:.roundbtn { width: 40px; height: 40px; margin-top: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; } - Create
main.htmland include the previous stylesheet in the<head>tag:<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <link rel="stylesheet" href="jqm.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> - Add an
Aboutbutton to the header of the#mainpage using the newly definedroundbtnstyle, as shown in the following code:<div id="main" data-role="page" > <div data-role="header" style="height: 50px" > <h1 style="margin: 15px">Custom Round Button</h1> <a href="#about" data-rel="dialog" data-role="button" class="roundbtn ui-btn ui-shadow ui-btn-up-c ui-btn-left"> <br>About</a> </div> <div data-role="content"> This page has a Round button in the Header </div> </div>
- Add the
#aboutdialog as, in the following code:<div id="about" data-role="page" > <div data-role="header" > <h1>About</h1> </div> <div data-role="content"> Round Button Demo </div> </div>
Create the jqm.css stylesheet and define a new class roundbtn with width, height, and border-radius properties as shown in the previous code. To create a round button set the border-radius property value to exactly half the value of the width property. Finally, add the vendor specific properties for border-radius to ensure that the border radius works well on various browsers.
Create main.html and include the link to the above stylesheet after including the link to the jquery.mobile.css file as shown in the previous code. Next create the #main page and add a header with <h1> text to it. Set the height of the header to 50px using the style attribute to ensure the round button with 40px height (as specified in the CSS) fits properly in the header. Next add an anchor link in the header with attributes data-role="button" and data-rel="dialog" to open the "#about" page as a dialog. Add the roundbtn style to this button using the class attribute. Also add the other classes that are added by the framework while enhancing an anchor link to a button. You can obtain this list of classes by inspecting the anchor element using your browser's developer tools. You have to add these classes manually to ensure that the round button gets the proper style as it has been customized.
Finally, define the #about page as given in the previous code. When you launch the application, a round button is now displayed in the header as shown in the following screenshot. Clicking on the round button will open the #about dialog.
Your browser should support the border-radius or the corresponding vendor specific prefix border-radius property in the CSS. If it does not, you will see a rectangular button instead of a round button.