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!
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{