In the navigation bar used in example 5-4, the icon has been styled for the button, but there is no way to describe the button's icon at the time. The following intercepts the code in the navigation bar section of example 5-4:
1<divdata-role="Footer">2<div data-role="NavBar"Data-grid="C">3<ul>4<li><a id="Chat"href="#"data-icon="Custom"></a></li>5<li><a id="Email"href="#"data-icon="Custom"> Contacts </a></li>6<li><a id="Skull"href="#"data-icon="Custom"> Find Friends </a></li>7<li><a id="Beer"href="#"data-icon="Custom"> Settings </a></li>8</ul>9</div>Ten</div>
The navigation bar section is shown in style 6-2.
Figure 6-2 Style of the navigation bar
At that time, I mentioned that the default icon for the button was used, and the icon was determined by the property data-icon= "Custom", which is one of the default icons that jquery Mobile has prepared for developers. The next step is to show how to control the icons of buttons on the page with the Data-icon property.
"Example 6-2 adds an icon to the trailing bar button"
1<! DOCTYPE html> <!--declaration html5-234<meta http-equiv="Content-type"Content="text/html; Charset=utf-8"/>5<title>fixed positioning example</title>6<meta name="Viewport"Content="Width=device-width, initial-scale=1">7<link rel="stylesheet"href="Jquery.mobile.min.css"/>8<script src="Jquery-1.7.1.min.js"></script>9<script src= "Jquery.mobile.min.js" ></script>Ten One<body> A<div data-role="page"> -<div data-role="Header"data-position="fixed"data-fullscreen="true"> -<a href="#"> Back </a> the -<a href="#"> Settings </a> -</div> -<div data-role="content"> +<a href="#"data-role="Button"> This is a button </a> -<!--can add icons, but do not make any changes to them here first- +<a href="#"data-role="Button"> This is a button </a> A<a href="#"data-role="Button"> This is a button </a> at<a href="#"data-role="Button"> This is a button </a> -<a href="#"data-role="Button"> This is a button </a> -<a href="#"data-role="Button"> This is a button </a> -<a href="#"data-role="Button"> This is a button </a> -<a href="#"data-role="Button"> This is a button </a> -<a href="#"data-role="Button"> This is a button </a> in<a href="#"data-role="Button"> This is a button </a> -<a href="#"data-role="Button"> This is a button </a> to<a href="#"data-role="Button"> This is a button </a> +<a href="#"data-role="Button"> This is a button </a> -</div> the<div data-role="Footer"data-position="fixed"data-fullscreen="true"> *<div data-role="NavBar"> $<ul>Panax Notoginseng<li><a id="Chat"href="#"data-icon="Info"></a></li> -<!--Add an icon here data-icon= "Info"-- the<li><a id="Email"href="#"data-icon="Home"> Contacts </a></li> +<!--data-icon= "Home" icon style is "homepage"-- A<li><a id="Skull"href="#"data-icon="Star"> Find Friends </a></li> the<!--data-icon= "star" icon style "star"-- +<li><a id="Beer"href="#"data-icon="Gear"> Settings </a></li> -<!--data-icon= "gear" icon style is "gears"-- $</ul> $</div><!--/navbar-- -</div><!--/footer-- -</div> the</body> -Run result 6-3 as shown.
Figure 6-3 icon for the button
Although there is a big gap with the well-designed icons, it lot better a lot more than the bare cross forks of the past. These icons are some of the most suitable icons for the current button text in several sets of charts given by jquery Mobile, and in addition to these icons, JQuery Mobile has prepared other icons for developers in 17 different styles, which I've sorted out in table 6-1.
Jquerymobile availability is getting higher, the entry threshold is low, and you can write less code to create a mobile-friendly interface. "Building cross-platform App:jquery Mobile mobile app" This book uses an instance-driven approach to introduce app development under Jquerymobile, which provides more than 70 practical cases to teach readers to develop mobile Finally, through 6 small projects to review and consolidate the knowledge points learned. To communicate with the author, add Q Group: 348632872, the author is here waiting for you to come.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
