Design examples of theme buttons in jquery Mobile page Development _c language

The translucent black circle behind the white icon ensures that the picture is clearly visible under any background color, and also makes it work well in the jquery Mobile theme system. Here are some examples of icon buttons under different theme styles

The icon button data-theme= "A" under the "a" theme

<div data-role= "Content" > <div data-role= "controlgroup" data-type= "horizontal" > <a href= "index.html" D
 ata-role= "button" data-icon= "Bars" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a> <a href= "index.html" data-role= "button" data-icon= "edit" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a> <a href= "index.html" data-role= "button" data-icon= "Arrow-l" data-iconpos= "Notext" Data-theme= "A" data-inline= "true" >my button</a> <a href= "index.html" button "data-role=" Arrow-r "data-iconpos=" Notext "Data-theme=" a "data-inline=" true ">my button</a> <a" href= " data-role= "button" data-icon= "Arrow-u" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a > <a href= "index.html" data-role= "button" data-icon= "arrow-d" data-iconpos= "Notext" Data-theme= "a" data-inline= "True" >my button</a> <a href= "index.html" data-role= "button" Data-icon= "Delete" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a> <a href= "index.html"
 data-role= "button" data-icon= "Plus" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a> <a href= "index.html" data-role= "button" data-icon= "Minus" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a> <a href= "index.html" data-role= "button" data-icon= "Check" data-iconpos= "Notext" Data-theme = "a" data-inline= "true" >my button</a> </div> <div data-role= "Controlgroup" data-type= "Horizontal" > <a href= "index.html" data-role= "button" data-icon= "Gear" data-iconpos= "Notext" Data-theme= "a" data-inline= " True ' >my button</a> <a href= ' index.html ' data-role= ' button ' data-icon= ' Refresh ' data-iconpos= ' Notext ' Data-theme= "A" data-inline= "true" >my button</a> <a href= "index.html" button "data-role=" Forward "data-iconpos=" Notext "Data-theme=" a "data-inline=" true ">my Button</a> <a href= "index.html" data-role= "button" data-icon= "Back" data-iconpos= "Notext" Data-theme= "a" Data-inline= "true" >my button</a> <a href= "index.html" data-role= "button" data-icon= "Grid" data-iconpos= " Notext "Data-theme=" a "data-inline=" true ">my button</a> <a href=" index.html "data-role=" button "Data-icon = "Star" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a>-<a href= "index.html"
 data-role= "button" data-icon= "alert" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a> <a href= "index.html" data-role= "button" data-icon= "info" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a> <a href= "index.html" data-role= "button" data-icon= "Home" data-iconpos= "Notext" data-theme= "A" data-inline= "true" >my button</a> <a href= "index.html" data-role= "button" data-icon= "Search" data-iconpos= "Notext" Data-theme= "a" data-inline= "true" >my button</a> </div> </div>
 

"B" under the theme of the icon button data-theme= "B"

The icon button under the "C" theme Data-theme= "C"

Theme Buttons

Query mobile has a rich theme system that gives you complete control over how the button is styled. When a link is added to a container, it is automatically assigned to a sample of the theme of the parent container with a visual integration button that matches its parent stick or content box, just like a chameleon. So a button placed on the content with the theme "One" (black in the default theme) will automatically assign the button to the theme "A" (charcoal in the default theme). A is black, B is gray bottom blue, C is gray base ash, D white bottom white, e yellow bottom yellow. This is the default theme to the theme of the button example. All buttons have the same HTML tag:

<div data-role= "Content" > 
 <div class= "Ui-body ui-body-a" > 
 

Assigning System Styles Data-theme

Add the Data-theme= "letter" attribute to the button, you can manually give the button style, so that the button does not have to match the style of the parent container

<div data-role= "Content" > 
 <a href= "index.html" data-role= "button" Data-theme= "a" data-icon= "Arrow-l" Data-inline= "true" >swatch a</a>
 <a href= "index.html" data-role= "button" Data-theme= "B" data-icon= " Arrow-l "data-inline= true" >swatch b</a> <a href= "
 index.html" data-role= "button" Data-theme= "C" data-icon= "Arrow-l" data-inline= "true" >swatch c</a> <a "href=" index.html "
 button" Data-theme= "D" data-icon= "Arrow-l" data-inline= "true" >swatch d</a> "<a href=" index.html "data-role="
 Button "Data-theme=" E "data-icon=" Arrow-l "data-inline=" true ">swatch e</a>
</div>

Change of subject Ui-body

By default there are five sets of styles, ui-body-a,ui-body-b,ui-body-c,ui-body-d,ui-body-e

<div class= "Ui-body ui-body-a" >
 <a href= "index.html" data-role= "button" Data-theme= "a" data-icon= " Arrow-l "data-inline= true" >swatch a</a> <a href= "index.html" data-role= "
 button" Data-theme= "B" data-icon= "Arrow-l" data-inline= "true" >swatch b</a> <a "href=" index.html "
 button" Data-theme= "C" data-icon= "Arrow-l" data-inline= true ">swatch c</a> <a href=" index.html "data-role="
 Button "Data-theme=" D "data-icon=" Arrow-l "data-inline=" true ">swatch d</a>-<a href=
 " index.html " data-role= "button" Data-theme= "E" data-icon= "Arrow-l" data-inline= "true" >swatch e</a>
</div>

<div class= "Ui-body ui-body-b" >
 <a href= "index.html" data-role= "button" Data-theme= "a" data-icon= " Arrow-l "data-inline= true" >swatch a</a> <a href= "index.html" data-role= "
 button" Data-theme= "B" data-icon= "Arrow-l" data-inline= "true" >swatch b</a> <a "href=" index.html "
 button" Data-theme= "C" data-icon= "Arrow-l" data-inline= true ">swatch c</a> <a href=" index.html "data-role="
 Button "Data-theme=" D "data-icon=" Arrow-l "data-inline=" true ">swatch d</a>-<a href=
 " index.html " data-role= "button" Data-theme= "E" data-icon= "Arrow-l" data-inline= "true" >swatch e</a>
</div>