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.css
and define a customroundbtn
class 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.html
and 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...