index.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>首页</title>
  6. <link rel="stylesheet" type="text/css" href="css/font.css">
  7. <link rel="stylesheet" type="text/css" href="css/ui.css">
  8. <script type="text/javascript" src="js/jquery.min.js"></script>
  9. <script type="text/javascript" src="laydate/laydate.js"></script>
  10. <script type="text/javascript" src="js/ui.js"></script>
  11. <style type="text/css">
  12. body>p {font-size: 16px;font-weight: bold;color: #000;margin: 10px 0;}
  13. hr {margin: 10px 0;}
  14. body {padding: 50px;padding-bottom: 500px;}
  15. </style>
  16. </head>
  17. <body>
  18. <div class="c666">一般型文字</div>
  19. <div class="cccc">辅助型文字</div>
  20. <div class="cf00">警告型文字</div>
  21. <p>展开按钮</p>
  22. <div class="btn_expand"></div>
  23. <p>收缩按钮</p>
  24. <div class="btn_contract"></div>
  25. <p>默认状态</p>
  26. <label><span>网站名称:</span><input class="input" type="text" name="" placeholder="默认状态"></label>
  27. <!-- <p>选中状态</p>
  28. <label><span>网站名称:</span><input class="input focus" type="text" name="" placeholder="选中状态"></label> -->
  29. <p>输入错误</p>
  30. <label><span>网站名称:</span><input class="input error" type="text" name="" placeholder="输入错误"></label>
  31. <p>禁止输入</p>
  32. <label><span>网站名称:</span><input class="input" type="text" name="" placeholder="禁止输入" disabled="disabled"></label>
  33. <p>文本域</p>
  34. <label><span>网站名称:</span><textarea class="textarea" name="" cols="200" rows="4" placeholder="建议代码写到模板里 , 这里放内容即可 , <br/> 换行"></textarea></label>
  35. <p>单选</p>
  36. <label><span>网站名称:</span><label class="radio"><input type="radio" name="">未选中</label>
  37. <label class="radio"><input type="radio" name="" checked="checked">选中</label></label>
  38. <p>按钮默认</p>
  39. <button class="btn" type="button">提交</button>
  40. <!-- <p>按钮鼠标经过</p>
  41. <button class="btn hover" type="button">提交</button> -->
  42. <p>按钮不可提交</p>
  43. <button class="btn disabled" type="button" disabled="disabled">提交</button>
  44. <p>下拉框</p>
  45. <div class="select">
  46. <div>请选择</div>
  47. <input type="hidden" name="" value="">
  48. <ul>
  49. <li><span>请选择</span></li>
  50. <li><span>下拉菜单一</span>
  51. <ul>
  52. <li><span>二级菜单</span>
  53. <ul>
  54. <li><span>三级菜单</span></li>
  55. <li><span>三级菜单</span>
  56. <ul>
  57. <li><span>四级菜单</span></li>
  58. </ul>
  59. </li>
  60. <li><span>三级菜单</span></li>
  61. </ul>
  62. </li>
  63. </ul>
  64. </li>
  65. <li><span>下拉菜单二</span>
  66. <ul>
  67. <li><span>二级菜单</span></li>
  68. </ul>
  69. </li>
  70. </ul>
  71. </div>
  72. <script type="text/javascript">
  73. ui.select($('.select'));
  74. </script>
  75. <p>辅助按钮</p>
  76. <button class="btn_aux" type="button">查询</button>
  77. <p>分页</p>
  78. <div class="page">
  79. <div class="page_fonts">共有23条, 每页显示: 20条</div>
  80. <a class="page_first" href="javascript:;">&laquo;</a>
  81. <a class="page_prev" href="javascript:;">&lsaquo;</a>
  82. <a class="pages in" href="javascript:;">1</a>
  83. <a class="pages" href="javascript:;">2</a>
  84. <a class="page_next" href="javascript:;">&rsaquo;</a>
  85. <a class="page_last" href="javascript:;">&raquo;</a>
  86. </div>
  87. <p>标题栏</p>
  88. <div class="title_bar">
  89. 基本信息
  90. </div>
  91. <p>提示</p>
  92. <div class="ui_prompt">提示:尊敬的admin(管理员),欢迎您的使用,您的上次登录时间为 2014-12-16 16:23:44,登录IP为 127.0.0.1</div>
  93. <p>标题</p>
  94. <div class="title">
  95. <span>基本设置</span>
  96. </div>
  97. <p>提示错误</p>
  98. <a class="btn" href="javascript:;" onclick="ui.prompt(0);">按钮</a>
  99. <p>提示成功</p>
  100. <a class="btn" href="javascript:;" onclick="ui.prompt(1);">按钮</a>
  101. <p>信息提示</p>
  102. <a class="btn" href="javascript:;" onclick="dialog_text()">按钮</a>
  103. <script type="text/javascript">
  104. function dialog_text () {
  105. ui.dialog({
  106. // text : '<span>111111</span><p>2222222</p>',//提示文字 可不填
  107. confirm : function () {
  108. alert('点击确定回调');
  109. },
  110. cancel : function () {
  111. alert('点击取消回调');
  112. }
  113. });
  114. }
  115. </script>
  116. <p>提示2</p>
  117. <a class="btn" href="javascript:;" onclick="ui.dialog_check()">按钮</a>
  118. <p>表格</p>
  119. <div class="table">
  120. <table>
  121. <thead>
  122. <tr>
  123. <th width="50"><input type="checkbox" name=""></th>
  124. <th class="sort" width="80"><span>编号</span></th>
  125. <th class="sort" width="200"><span>联系人</span></th>
  126. <th width="250"><span>联系方式</span></th>
  127. <th class="sort"><span>内容</span></th>
  128. <th width="200"><span>留言IP</span></th>
  129. <th class="sort" width="200"><span>留言时间</span></th>
  130. </tr>
  131. </thead>
  132. <tbody>
  133. <tr>
  134. <td><input type="checkbox" name=""></td>
  135. <td>1</td>
  136. <td>d</td>
  137. <td>3</td>
  138. <td>啊啊啊</td>
  139. <td>5</td>
  140. <td>2016-07-05 20:10:55</td>
  141. </tr>
  142. <tr>
  143. <td><input type="checkbox" name=""></td>
  144. <td>2</td>
  145. <td>z</td>
  146. <td>3</td>
  147. <td>啧啧啧</td>
  148. <td>5</td>
  149. <td>2016-07-02 20:10:55</td>
  150. </tr>
  151. <tr>
  152. <td><input type="checkbox" name=""></td>
  153. <td>3</td>
  154. <td>a</td>
  155. <td>3</td>
  156. <td>嘎嘎嘎</td>
  157. <td>5</td>
  158. <td>2016-07-04 20:10:55</td>
  159. </tr>
  160. <tr class="last_tr">
  161. <td><input type="checkbox" name=""></td>
  162. <td class="tal" colspan="6"><a class="btn_aux" href="javascript:;" onclick="ui.dialog()">删除</a></td>
  163. </tr>
  164. </tbody>
  165. </table>
  166. </div>
  167. <script type="text/javascript">
  168. ui.table($('.table'));
  169. </script>
  170. <p>时间</p>
  171. <label><span>时间:</span><input class="input laydate-icon" type="text" name="" placeholder="选择时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"></label>
  172. </body>
  173. </html>