5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="stylesheet" href="themes/default/" />
7 <script src="js/jquery.js"></script>
8 <script src="js/"></script>
9 <script src="theme.js"></script>
10 <script src="js/jquery.mobile.forms.button.extension.js"></script>
14 <div data-role="page" id="ButtonDemo" data-add-back-btn="true" >
15 <div data-role="header" data-position="fixed">
18 <div data-role="content">
20 <div data-role="button">Button</div>
22 <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button">Button</div></textarea>
24 *Inline Button, Inline Button With Icon<br/>
25 <div data-role="button" data-inline="true">DataInline True</div>
26 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
27 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
28 <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
29 <div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div><br/>
31 <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-inline="true">DataInline True</div>
32 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="right">Icon Text</div>
33 <div data-role="button" data-inline="true" data-icon="call" data-iconpos="left">Icon Text</div>
34 <div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg"></div>
35 <div data-role="button" data-inline="true" data-icon="send" data-style="circle"></div></textarea><br/><br/>
36 *Default Button (A tag)
37 <a href="#buttonTest" data-role="button">A Tag Button</a>
39 <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><a href="#buttonTest" data-role="button">A Tag Button</a></textarea>
41 *Button Icon Position top, bottom (with inline)
42 <div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div><br/>
43 <div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div><br/>
44 <div data-role="button" data-icon="reveal" data-iconpos="top" data-inline="true">PositionTop</div>
45 <div data-role="button" data-icon="reveal" data-iconpos="bottom" data-inline="true">PositionBottom</div><br/>
47 <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-icon="call" data-iconpos="top">PositionTop</div>
48 <div data-role="button" data-icon="call" data-iconpos="bottom">PositionBottom</div>
49 <div data-role="button" data-icon="reveal" data-iconpos="top" data-inline="true">PositionTop</div>
50 <div data-role="button" data-icon="reveal" data-iconpos="bottom" data-inline="true">PositionBottom</div></textarea><br/><br/>
52 <div data-role="button" data-inline="true" data-icon="test">Custom</div>
53 <div data-role="button" data-inline="true" data-icon="test" data-iconpos="top">Custom Top</div>
54 <div data-role="button" data-inline="true" data-icon="test" data-iconpos="bottom">Custom Bottom</div>
55 <div data-role="button" data-inline="true" data-icon="test" style="width:150px;height:150px">Custom width,height</div>
56 <div data-role="button" data-inline="true" data-icon="test2" data-style="circle"></div><br/>
58 <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><div data-role="button" data-inline="true" data-icon="test">Custom</div>
59 <div data-role="button" data-inline="true" data-icon="test" data-iconpos="top">Custom Top</div>
60 <div data-role="button" data-inline="true" data-icon="test" data-iconpos="bottom">Custom Bottom</div>
61 <div data-role="button" data-inline="true" data-icon="test" style="width:150px;height:150px">Custom width,height</div>
62 <div data-role="button" data-inline="true" data-icon="test2" data-style="circle"></div></textarea>
64 <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset">.ui-icon-test{
65 background-size: 100% 100%;
66 background-image: url(test.png);
70 background-position:0% 0%;
71 background-size:50% 50%;
72 background-image: url(test.png);
74 *Input Type = "Button"
75 <input type="button" value="test button"/>
77 <textarea style="width:100%;padding:1em;background-color:whitesmoke;color:black;border-witth:3px;border-style:inset"><input type="button" value="test button"/></textarea>
80 <div data-role="footer">