jQuery_mobile 按钮学习
jQueryMobile1.4之前button的写法：
a标签用的是data-role的属性，并且他们默认是圆角的；（这样写就可以正常显示一个圆角的button了）
<a href="#" data-role="button">Anchor</a> <button>Button</button>
1.4之前的时候，添加一些属性都会用到data-... data-... 比如：data-inline=“true”,data-icon="back"等等，到1.4的时候全用一个class属性搞定，用 什么就往class里面添加，例如：class=“ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left”，之前button的写法在1.4中也支持
1.4中button的写法，代码：（默认不是圆角的）
<a href="#" class="ui-btn">Anchor</a> <button class="ui-btn">Button</button>
圆角的按钮：
<a href="#" class="ui-btn ui-corner-all">Anchor</a> <button class="ui-btn ui-corner-all">Button</button>
1.4按钮总结代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery-mobile-study</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="Css/CssMobile/jquery.mobile-1.4.2.css" rel="stylesheet"> <link href="Css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" /> <script src="Js/JsMobile/jquery-1.11.0.js"> </script> <script src="Js/JsMobile/jquery.mobile-1.4.2.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>页面学习</h1> </div> <div role="main" class="ui-content" style="background: red;"> <p>Basic markup</p> <!--Basic markup--> <a href="#" class="ui-btn">Anchor</a> <button class="ui-btn">Button</button> <p>Corners</p> <!--Corners--> <a href="#" class="ui-btn ui-corner-all">Anchor</a> <button class="ui-btn ui-corner-all">Button</button> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" >No text</a> <div id="custom-border-radius"> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">No text</a> </div> <p>shadow</p> <!--shadow--> <a href="#" class="ui-btn ui-shadow">Anchor</a> <button class="ui-btn ui-shadow">Button</button> <p>inline</p> <!--inline--> <a href="#" class="ui-btn ui-btn-inline ui-corner-all">Anchor</a> <button class="ui-btn ui-btn-inline ">Button</button> <p>Theme</p> <!--Theme--> <a href="#" class="ui-btn">Anchor - Inherit</a> <a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A</a> <a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B</a> <button class="ui-btn">Button - Inherit</button> <button class="ui-btn ui-btn-a">Button - Theme swatch A</button> <button class="ui-btn ui-btn-b">Button - Theme swatch B</button> <p>Mini</p> <!--Mini--> <a href="#" class="ui-btn ui-mini">Anchor</a> <button class="ui-btn ui-mini">Button</button> <p>Icons</p> <!--Icons--> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a> <button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button> <p>Icon position</p> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom</a> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Icon only</a> <a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-left">Left</a> <a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-right">Right</a> <a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-top">Top</a> <a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-bottom">Bottom</a> <a href="#" class="ui-btn ui-btn-inline ui-icon-delete ui-btn-icon-notext">Icon only</a> <p>Icon shadow</p> <a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon">Anchor</a> <p>Theme B:</p> <button class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon ui-btn-b">Button</button> <p>Disabled</p> <a href="#" class="ui-btn ui-state-disabled">Disabled anchor via class</a> <button disabled="">Button with disabled attribute</button> <p>Native button</p> <button data-role="none">Button</button> </div> <div data-role="footer"> <h3>页脚</h3> </div> </div> </body> </html>
input标签定义的按钮总结代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery-mobile-study</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="Css/CssMobile/jquery.mobile-1.4.2.css" rel="stylesheet"> <link href="Css/mobiscroll.custom-2.6.2.min.css" rel="stylesheet" type="text/css" /> <script src="Js/JsMobile/jquery-1.11.0.js"> </script> <script src="Js/JsMobile/jquery.mobile-1.4.2.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>jQuery-mobile button学习</h1> </div> <div role="main" class="ui-content"> <p>Input buttons</p> <form> <input type="button" value="Button"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form> <p>强大的扩展</p> <form> <div class="ui-input-btn ui-btn ui-corner-all ui-btn-inline ui-shadow"> <input type="button" data-enhanced="true" value="Input value"> Input value </div> </form> <p>Corners</p> <form> <input type="button" value="Has corners by default"> <input type="button" data-corners="false" value="Unset corners"> <div class="ui-input-btn ui-btn ui-corner-all"> Enhanced <input type="button" data-enhanced="true" value="Enhanced"> </div> </form> <p>delete icon button</p> <form> <input type="button" data-icon="delete" data-iconpos="notext" value="Icon only"> <div id="custom-border-radius"> <div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all"> Enhanced - Icon only <input type="button" data-enhanced="true" value="Enhanced - Icon only"> </div> </div> </form> </div> <p> Shadow</p> <form> <input type="button" value="Has shadow by default"> <input type="button" data-shadow="false" value="Unset shadow"> <div class="ui-input-btn ui-btn ui-shadow"> Enhanced <input type="button" data-enhanced="true" value="Enhanced"> </div> </form> <p>Inline</p> <form> <input type="button" data-inline="true" value="Input"> <div class="ui-input-btn ui-btn ui-btn-inline"> Enhanced <input type="button" data-enhanced="true" value="Enhanced"> </div> </form> <p>Theme</p> <form> <input type="button" value="Input - Inherit"> <input type="button" data-theme="a" value="Input - Theme swatch A"> <input type="button" data-theme="b" value="Input - Theme swatch B"> <div class="ui-input-btn ui-btn"> Enhanced - Inherit <input type="button" data-enhanced="true" value="Enhanced - Inherit"> </div> <div class="ui-input-btn ui-btn ui-btn-a"> Enhanced - Theme swatch A <input type="button" data-enhanced="true" value="Enhanced - Theme swatch A"> </div> <div class="ui-input-btn ui-btn ui-btn-b"> Enhanced - Theme swatch B <input type="button" data-enhanced="true" value="Enhanced - Theme swatch B"> </div> </form> <p>Mini</p> <form> <input type="button" data-mini="true" value="Input"> <div class="ui-input-btn ui-btn ui-mini"> Enhanced <input type="button" data-enhanced="true" value="Enhanced"> </div> </form> <p>Icon shadow</p> <input type="button" data-theme="b" data-icon="delete" data-iconshadow="true" value="Input"> <div class="ui-input-btn ui-btn ui-btn-b ui-icon-delete ui-btn-icon-left ui-shadow-icon"> Enhanced <input type="button" data-enhanced="true" value="Enhanced"> </div> <p>Disabled</p> <form> <input type="button" disabled="" value="Input button with disabled attribute"> <div class="ui-input-btn ui-btn ui-state-disabled"> Enhanced <input type="button" disabled="" data-enhanced="true" value="Enhanced"> </div> </form> <p>Native inputs</p> <form> <input type="button" data-role="none" value="Button"> <input type="submit" data-role="none" value="Submit"> <input type="reset" data-role="none" value="Reset"> </form> <div data-role="footer"> <h3>页脚</h3> </div> </div> </body> </html>