123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <title>首页</title>
- <link rel="stylesheet" type="text/css" href="css/font.css">
- <link rel="stylesheet" type="text/css" href="css/ui.css">
- <script type="text/javascript" src="js/jquery.min.js"></script>
- <script type="text/javascript" src="laydate/laydate.js"></script>
- <script type="text/javascript" src="js/ui.js"></script>
- <style type="text/css">
- body>p {font-size: 16px;font-weight: bold;color: #000;margin: 10px 0;}
- hr {margin: 10px 0;}
- body {padding: 50px;padding-bottom: 500px;}
- </style>
- </head>
- <body>
- <div class="c666">一般型文字</div>
- <div class="cccc">辅助型文字</div>
- <div class="cf00">警告型文字</div>
- <p>展开按钮</p>
- <div class="btn_expand"></div>
- <p>收缩按钮</p>
- <div class="btn_contract"></div>
- <p>默认状态</p>
- <label><span>网站名称:</span><input class="input" type="text" name="" placeholder="默认状态"></label>
- <!-- <p>选中状态</p>
- <label><span>网站名称:</span><input class="input focus" type="text" name="" placeholder="选中状态"></label> -->
- <p>输入错误</p>
- <label><span>网站名称:</span><input class="input error" type="text" name="" placeholder="输入错误"></label>
- <p>禁止输入</p>
- <label><span>网站名称:</span><input class="input" type="text" name="" placeholder="禁止输入" disabled="disabled"></label>
- <p>文本域</p>
- <label><span>网站名称:</span><textarea class="textarea" name="" cols="200" rows="4" placeholder="建议代码写到模板里 , 这里放内容即可 , <br/> 换行"></textarea></label>
- <p>单选</p>
- <label><span>网站名称:</span><label class="radio"><input type="radio" name="">未选中</label>
- <label class="radio"><input type="radio" name="" checked="checked">选中</label></label>
-
- <p>按钮默认</p>
- <button class="btn" type="button">提交</button>
- <!-- <p>按钮鼠标经过</p>
- <button class="btn hover" type="button">提交</button> -->
- <p>按钮不可提交</p>
- <button class="btn disabled" type="button" disabled="disabled">提交</button>
- <p>下拉框</p>
- <div class="select">
- <div>请选择</div>
- <input type="hidden" name="" value="">
- <ul>
- <li><span>请选择</span></li>
- <li><span>下拉菜单一</span>
- <ul>
- <li><span>二级菜单</span>
- <ul>
- <li><span>三级菜单</span></li>
- <li><span>三级菜单</span>
- <ul>
- <li><span>四级菜单</span></li>
- </ul>
- </li>
- <li><span>三级菜单</span></li>
- </ul>
- </li>
- </ul>
- </li>
- <li><span>下拉菜单二</span>
- <ul>
- <li><span>二级菜单</span></li>
- </ul>
- </li>
- </ul>
- </div>
- <script type="text/javascript">
- ui.select($('.select'));
- </script>
- <p>辅助按钮</p>
- <button class="btn_aux" type="button">查询</button>
- <p>分页</p>
- <div class="page">
- <div class="page_fonts">共有23条, 每页显示: 20条</div>
- <a class="page_first" href="javascript:;">«</a>
- <a class="page_prev" href="javascript:;">‹</a>
- <a class="pages in" href="javascript:;">1</a>
- <a class="pages" href="javascript:;">2</a>
- <a class="page_next" href="javascript:;">›</a>
- <a class="page_last" href="javascript:;">»</a>
- </div>
- <p>标题栏</p>
- <div class="title_bar">
- 基本信息
- </div>
- <p>提示</p>
- <div class="ui_prompt">提示:尊敬的admin(管理员),欢迎您的使用,您的上次登录时间为 2014-12-16 16:23:44,登录IP为 127.0.0.1</div>
- <p>标题</p>
- <div class="title">
- <span>基本设置</span>
- </div>
-
- <p>提示错误</p>
- <a class="btn" href="javascript:;" onclick="ui.prompt(0);">按钮</a>
- <p>提示成功</p>
- <a class="btn" href="javascript:;" onclick="ui.prompt(1);">按钮</a>
- <p>信息提示</p>
- <a class="btn" href="javascript:;" onclick="dialog_text()">按钮</a>
- <script type="text/javascript">
- function dialog_text () {
- ui.dialog({
- // text : '<span>111111</span><p>2222222</p>',//提示文字 可不填
- confirm : function () {
- alert('点击确定回调');
- },
- cancel : function () {
- alert('点击取消回调');
- }
- });
- }
- </script>
- <p>提示2</p>
- <a class="btn" href="javascript:;" onclick="ui.dialog_check()">按钮</a>
- <p>表格</p>
- <div class="table">
- <table>
- <thead>
- <tr>
- <th width="50"><input type="checkbox" name=""></th>
- <th class="sort" width="80"><span>编号</span></th>
- <th class="sort" width="200"><span>联系人</span></th>
- <th width="250"><span>联系方式</span></th>
- <th class="sort"><span>内容</span></th>
- <th width="200"><span>留言IP</span></th>
- <th class="sort" width="200"><span>留言时间</span></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><input type="checkbox" name=""></td>
- <td>1</td>
- <td>d</td>
- <td>3</td>
- <td>啊啊啊</td>
- <td>5</td>
- <td>2016-07-05 20:10:55</td>
- </tr>
- <tr>
- <td><input type="checkbox" name=""></td>
- <td>2</td>
- <td>z</td>
- <td>3</td>
- <td>啧啧啧</td>
- <td>5</td>
- <td>2016-07-02 20:10:55</td>
- </tr>
- <tr>
- <td><input type="checkbox" name=""></td>
- <td>3</td>
- <td>a</td>
- <td>3</td>
- <td>嘎嘎嘎</td>
- <td>5</td>
- <td>2016-07-04 20:10:55</td>
- </tr>
- <tr class="last_tr">
- <td><input type="checkbox" name=""></td>
- <td class="tal" colspan="6"><a class="btn_aux" href="javascript:;" onclick="ui.dialog()">删除</a></td>
- </tr>
- </tbody>
- </table>
- </div>
- <script type="text/javascript">
- ui.table($('.table'));
- </script>
-
- <p>时间</p>
- <label><span>时间:</span><input class="input laydate-icon" type="text" name="" placeholder="选择时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"></label>
- </body>
- </html>
|