主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用
2016-04-26 14:20:14 来源: 阅读:
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>