JQuery Mobile Tutorial: Automatic Enhanced design of buttons

Article Introduction: in this article, we will automatically enhance the HTML code before and after the contrast button, intuitive to let you have a deep understanding of jquery mobile How to automatically enhance the design of buttons!

In this article, we will automatically enhance the HTML code before and after the contrast button, intuitive to let you have a deep understanding of jquery mobile How to automatically enhance the design of buttons!
1, first look at the link button:

The code we write on the page:

 I am the link button 	   

Let's take a look at the Automatically enhanced:

 		 			 I is link button  		 	

Icon:

2. Take another look at the real button:

The code we write on the page:

Let's take a look at the automatic enhancements:

Omit some custom attributes that are not relevant to the subject of this article 	
  
 		 			button 		 		button 	
  

Icon:

Now let's take a look at the internal style details of several jquery.mobile-1.1.0.css

1, ui-btn

#1743. ui-btn{ 	Display:block; 	Text-align:center; 	Cursor:pointer; 	position:relative; 	Margin:.5em 5px; 	

2, Ui-btn-inner

#701. ui-btn-inner{ 	border-top:1px solid #fff; 	Border-color:rgba (255,255,255,.3); }  //#1745. ui-btn-inner{ 	padding:.6em 20px; 	min-width:.75em; 	Display:block; 	text-overflow:ellipsis;    Did overflow processing Oh! 	Overflow:hidden; 	White-space:nowrap; 	position:relative; 	

Description
1, pay attention to unit settings, because consider moving the scene, try to use EM these units 2, do overflow processing, but need to support text-overflow:ellipsis

3, Ui-btn-text

#1759. ui-btn-text{ 	position:relative; 	width:100%; 	

4, Ui-btn-hidden

#1746. ui-btn input,. ui-btn button{ 	Z-index:2;}//#1802. ui-btn-hidden{ 	Position:absolute; 	top:0; 	left:0; 	width:100%; 	height:100%; 	-webkit-appearance:button; 	opacity:.1; 	Filter:alpha (opacity=.0001); 	Cursor:pointer; 	Background: #fff; 	Background:rgba (255,255,255,0); 	font-size:1px; 	Border:none; 	text-indent:-9999px; }	 

Description
1, the use of absolute positioning + opacity + z-index (1 higher than the Ui-btn-text, set to 2) 2, the use of-webkit-appearance:button 3, Border:none settings 4, the text used Text-indent : -9999px This old means

5, Ui-btn-corner-all

#977. ui-btn-corner-all{ 	-moz-border-radius:1em; 	-webkit-border-radius:1em; 	Border-radius:1em; }//#1000. ui-btn-corner-all{ 	-moz-background-clip:padding-box; 	-webkit-background-clip:padding-box; 	

Description
1, about Border-radius can view here
2, about Background-clip can view here

Do you remember the inline link button that we said earlier?

Set a data-inline= "true" for a

Icon:

We see the difference is one more style rule ui-btn-inline, let's look at the source code:

#1747. ui-btn-inline{ 	

Do you remember the icon button we said before?

Set a data-icon= "home" for a

Icon:

We've seen two changes.
1, part A has added a rule ui-btn-icon-left
2, the most inner span with one sibling node

#1761. Ui-btn-icon-left. ui-btn-inner{ 	padding-left:40px}  /******* and so on to know the other 3 locations of the rules below start*********/  //#1762. Ui-btn-icon-right. ui-btn-inner{ 	padding-right:40px;  #1763. Ui-btn-icon-top. ui-btn-inner{ 	padding-top:40px}  #1764. Ui-btn-icon-bottom. ui-btn-inner{ 	padding-bottom:40px}  /******* and so on to know the other 3 position rules are as follows end*********/  //#1121. ui-icon{ 	width:18px; 	height:18px; }  //#1779. Ui-btn-icon-left. Ui-btn-inner. ui-icon{ 	Position:absolute; 	top:50%; 	margin-top:-9px; }  //#1781. Ui-btn-icon-left. ui-icon{ 	left:10px} 	 #794. ui-icon{ 	background: #666; 	Background:rgba (0,0,0,.4); 	Background-image:url (images/icon-18-white.png); 	Background-repeat:no-repeat; 	-moz-border-radius:9px; 	-webkit-border-radius:9px; 	border-radius:9px; }  //#885. ui-icon-home{