主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

 

  1 <!DOCTYPE html>

  2 <html>

  3 <head>

  4     <meta charset="utf-8">

  5     <title>Jquery Mobile Web Page</title>

  6     <link href="~/Content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css" rel="stylesheet" />

  7     <link href="~/Content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" />

  8     <script src="~/Content/js/jquery.js"></script>

  9     <script src="~/Content/js/jquery.mobile-1.4.0-beta.1.js"></script>

 10 </head>

 11 <body>

 12 

 13     <div data-role="page" id="page">

 14         <h1>对话框效果</h1>

 15         <div data-role="content">

 16             <ul data-role="listview">

 17                 <li><a href="#dialog" data-rel="dialog" data-transition="pop">默认是 pop 效果</a></li>

 18                 <li><a href="#dialog" data-rel="dialog" data-transition="slide">slide 效果</a></li>

 19                 <li><a href="#dialog" data-rel="dialog" data-transition="fade">fade 效果</a></li>

 20                 <li><a href="#dialog" data-rel="dialog" data-transition="flip">flip 效果</a></li>

 21                 <li><a href="#dialog" data-rel="dialog" data-transition="turn">turn 效果</a></li>

 22                 <li><a href="#dialog" data-rel="dialog" data-transition="flow">flow 效果</a></li>

 23                 <li><a href="#dialog" data-rel="dialog" data-transition="slidefade">slidefade 效果</a></li>

 24                 <li><a href="#dialog" data-rel="dialog" data-transition="slideup">slideup 效果</a></li>

 25                 <li><a href="#dialog" data-rel="dialog" data-transition="slidedown">slidedown 效果</a></li>

 26                 <li><a href="#dialog" data-rel="dialog" data-transition="none">none 效果</a></li>

 27             </ul>

 28         </div>

 29 

 30         <h1>按钮效果</h1>

 31         <button>普通按钮</button>

 32         <input value="Input" type="button" />

 33         <input value="提交" type="submit" />

 34         <input value="重置" type="reset" />

 35 

 36         <a href="default" data-role="button">超链接标签按钮</a>

 37 

 38         <a href="default" data-role="button" data-inline="true">内联按钮</a>

 39         <br />

 40         <a href="default" data-role="button" data-theme="a" data-inline="true">A</a>

 41         <a href="default" data-role="button" data-theme="b" data-inline="true">B</a>

 42 

 43         <br />

 44         <a href="default" data-role="button" data-mini="true">Data-Mini</a>

 45         <a href="default" data-role="button" data-mini="true" data-inline="true">小内联按钮</a>

 46         <br />

 47         <p><strong>Bars</strong> - data-icon="bars"</p>

 48         <a href="default" data-role="button" data-icon="bars" data-mini="true" data-inline="true">按钮</a>

 49         <p><strong>Edit</strong> - data-icon="edit"</p>

 50         <a href="default" data-role="button" data-icon="edit" data-mini="true" data-inline="true">按钮</a>

 51         <p><strong>Left arrow</strong> - data-icon="arrow-l"</p>

 52         <a href="default" data-role="button" data-icon="arrow-l" data-mini="true" data-inline="true">按钮</a>

 53         <p><strong>Right arrow</strong> - data-icon="arrow-r"</p>

 54         <a href="default" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true">按钮</a>

 55         <p><strong>Up arrow</strong> - data-icon="arrow-u"</p>

 56         <a href="default" data-role="button" data-icon="arrow-u" data-mini="true" data-inline="true">按钮</a>

 57         <p><strong>Down arrow</strong> - data-icon="arrow-d"</p>

 58         <a href="default" data-role="button" data-icon="arrow-d" data-mini="true" data-inline="true">按钮</a>

 59         <p><strong>Delete</strong> - data-icon="delete"</p>

 60         <a href="default" data-role="button" data-icon="delete" data-mini="true" data-inline="true">按钮</a>

 61         <p><strong>Plus</strong> - data-icon="plus"</p>

 62         <a href="default" data-role="button" data-icon="plus" data-mini="true" data-inline="true">按钮</a>

 63         <p><strong>Minus</strong> - data-icon="minus"</p>

 64         <a href="default" data-role="button" data-icon="minus" data-mini="true" data-inline="true">按钮</a>

 65         <p><strong>Check</strong> - data-icon="check"</p>

 66         <a href="default" data-role="button" data-icon="check" data-mini="true" data-inline="true">按钮</a>

 67         <p><strong>Gear</strong> - data-icon="gear"</p>

 68         <a href="default" data-role="button" data-icon="gear" data-mini="true" data-inline="true">按钮</a>

 69         <p><strong>Refresh</strong> - data-icon="refresh"</p>

 70         <a href="default" data-role="button" data-icon="refresh" data-mini="true" data-inline="true">按钮</a>

 71         <p><strong>Forward</strong> - data-icon="forward"</p>

 72         <a href="default" data-role="button" data-icon="forward" data-mini="true" data-inline="true">按钮</a>

 73         <p><strong>Back</strong> - data-icon="back"</p>

 74         <a href="default" data-role="button" data-icon="back" data-mini="true" data-inline="true">按钮</a>

 75         <p><strong>Grid</strong> - data-icon="grid"</p>

 76         <a href="default" data-role="button" data-icon="grid" data-mini="true" data-inline="true">按钮</a>

 77         <p><strong>Star</strong> - data-icon="star"</p>

 78         <a href="default" data-role="button" data-icon="star" data-mini="true" data-inline="true">按钮</a>

 79         <p><strong>Alert</strong> - data-icon="alert"</p>

 80         <a href="default" data-role="button" data-icon="alert" data-mini="true" data-inline="true">按钮</a>

 81         <p><strong>Info</strong> - data-icon="info"</p>

 82         <a href="default" data-role="button" data-icon="info" data-mini="true" data-inline="true">按钮</a>

 83         <p><strong>Home</strong> - data-icon="home"</p>

 84         <a href="default" data-role="button" data-icon="home" data-mini="true" data-inline="true">按钮</a>

 85         <p><strong>Search</strong> - data-icon="search"</p>

 86         <a href="default" data-role="button" data-icon="search" data-mini="true" data-inline="true">按钮</a>

 87         <br />

 88         <a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true">Bars</a>

 89         <a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="b" data-inline="true">Edit</a>

 90         <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">Arrow left</a>

 91         <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">Arrow right</a>

 92         <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">Arrow up</a>

 93         <a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">Arrow down</a>

 94         <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">Delete</a>

 95         <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">Plus</a>

 96         <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">Minus</a>

 97         <a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">Check</a>

 98         <a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">Gear</a>

 99         <a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">Refresh</a>

100         <a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">Forward</a>

101         <a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">Back</a>

102         <a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">Grid</a>

103         <a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">Alert</a>

104         <a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">Info</a>

105         <a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">Home</a>

106         <a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">Search</a>

107         <br />

108 

109         <a href="default" data-role="button" data-icon="arrow-l" data-iconpos="left" data-mini="true" data-inline="true">上一页</a>

110         <a href="default" data-role="button" data-icon="arrow-r" data-iconpos="right" data-mini="true" data-inline="true">下一页</a>

111         <br />

112         <a href="default" data-role="button" data-icon="arrow-u" data-iconpos="top" data-mini="true">返回顶部</a>

113         <a href="default" data-role="button" data-icon="arrow-d" data-iconpos="bottom" data-mini="true">查看更多</a>

114 

115         <br />

116         垂直按钮组

117         <div data-role="controlgroup">

118             <a href="#" data-role="button">按钮I</a>

119             <a href="#" data-role="button">按钮II</a>

120             <a href="#" data-role="button">按钮III</a>

121         </div>

122         水平按钮组

123         <div data-role="controlgroup" data-type="horizontal">

124             <a href="#" data-role="button">按钮I</a>

125             <a href="#" data-role="button">按钮II</a>

126             <a href="#" data-role="button">按钮III</a>

127         </div>

128         迷你水平按钮组

129         <div data-role="controlgroup" data-type="horizontal" data-mini="true">

130             <a href="#" data-role="button">按钮I</a>

131             <a href="#" data-role="button">按钮II</a>

132             <a href="#" data-role="button">按钮III</a>

133         </div>

134         <br />

135         <a href="#" class="ui-btn ui-state-disabled">UI禁用按钮</a>

136         <button disabled="">禁用按钮</button>

137     </div>

138 

139     <div data-role="page" id="dialog">

140         <div data-role="header">

141             <h1>用于对话框效果测试</h1>

142         </div>

143         <div data-role="content">

144             用于内容效果测试

145         </div>

146         <div data-role="footer">

147             <h4>Asp.Net Mvc 4.0 +JqueryMobile 1.4.0-beta 1</h4>

148         </div>

149     </div>

150 

151 

152 </body>

153 </html>

 

 

 

你可能感兴趣的:(JQuery Mobile)