master

分支 (1)

管理

管理

master

hdjs
/
index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="hdjs/hdui/css/base.css"/>
    <link rel="stylesheet" href="hdjs/hdui/css/btn.css"/>
    <link rel="stylesheet" href="hdjs/hdui/css/size.css"/>
    <link rel="stylesheet" href="hdjs/hdui/css/form.css"/>
    <link rel="stylesheet" href="hdjs/hdui/css/table.css"/>
    <link rel="stylesheet" href="hdjs/hdui/css/menu-list.css"/>
    <link rel="stylesheet" href="hdjs/hdui/css/confirm.css"/>
    <link rel="stylesheet" href="hdjs/hdui/css/alert.css"/>
    <script type="text/javascript" src="hdjs/hdui/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="hdjs/hdui/js/confirm.js"></script>
    <script type="text/javascript" src="hdjs/hdui/js/alert.js"></script>
    <style type="text/css">
        body {
            background: #f7f7f7;
            padding-bottom: 100px;
        }

        h2 {
            font-size: 18px;
            background: #E8E8E8;
            color: #333333;
            border-bottom: solid 1px #dcdcdc;
            margin: 20px 0px 10px 0px;
        }
    </style>
</head>
<body>
<h1>后盾网HDJS前端库</h1>

<h2>按钮样式</h2>
<!--按钮Start-->
<button class="hd-btn hd-btn-primary hd-btn-lg">Large button</button>
<button class="hd-btn hd-btn-danger hd-btn-lg">Large button</button>
<button class="hd-btn hd-btn-success hd-btn-lg">Large button</button>
<button class="hd-btn hd-btn-default hd-btn-lg">Large button</button>
<br/><br/>

<button class="hd-btn hd-btn-primary">Default button</button>
<button class="hd-btn hd-btn-danger">Default button</button>
<button class="hd-btn hd-btn-success">Default button</button>
<button class="hd-btn hd-btn-default">Default button</button>
<br/><br/>

<button class="hd-btn hd-btn-primary hd-btn-sm">Small button</button>
<button class="hd-btn hd-btn-danger hd-btn-sm">Small button</button>
<button class="hd-btn hd-btn-success hd-btn-sm">Small button</button>
<button class="hd-btn hd-btn-default hd-btn-sm">Small button</button>
<br/><br/>

<button class="hd-btn hd-btn-primary hd-btn-xm">Extra small button</button>
<button class="hd-btn hd-btn-danger hd-btn-xm">Extra small button</button>
<button class="hd-btn hd-btn-success hd-btn-xm">Extra small button</button>
<button class="hd-btn hd-btn-default hd-btn-xm">Extra small button</button>
<br/><br/>

<!--按钮End-->
<!--尺寸Start-->
<h2>尺寸</h2>

<p>
    hdjs中定义了常用的宽度与高度，比如使用class='hd-w100'表示设置宽度为100px.
    从10px到500px以10px为间隔，从500px到1000px是以50px为间隔。
</p>
<textarea class='hd-w800 hd-h100'>设置了 class='hd-w800 hd-h100'</textarea>
<!--尺寸End-->
<!--浮动样式-->
<h2>浮动与清除</h2>

<p>
    左浮动：class='hd-float-left'，右浮动：class='hd-float-right'，清除浮动：class='hd-float-clean'
</p>
<!--表格与表单Start-->
<h2>表单表格</h2>
<table class="hd-form hd-table hd-table-form">
    <tr>
        <th width="100">列表框</th>
        <td>
            <select name="pid">
                <option value="0">后盾网PHP培训</option>
                <option value="1">HDJS前端库</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>文本框</th>
        <td>
            <input type="text"/>
        </td>
    </tr>
    <tr>
        <th>文本域</th>
        <td>
            <textarea name="" class="hd-w500 hd-h280"></textarea>
        </td>
    </tr>
    <tr>
        <th>单选框</th>
        <td>
            <label><input type="radio" name="sex"/> 男</label>
            <label><input type="radio" name="sex"/> 女</label>
        </td>
    </tr>
    <tr>
        <th>复选框</th>
        <td>
            <label><input type="checkbox" name="sex"/> 加油</label>
            <label><input type="checkbox" name="sex"/> 喜欢</label>
        </td>
    </tr>
</table>
<!--表格与表单End-->
<!--.hd-table-list列表表格Start-->
<h2>列表表格</h2>
<table class="hd-form hd-table hd-table-list">
    <thead>
    <tr>
        <td>ID</td>
        <td>标题</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>
            后盾网 人人做后盾
        </td>
    </tr>
    </tbody>
</table>
<!--.hd-table-list列表表格End-->
<h2>标题块</h2>

<div class="hd-title-header">
    hd-title-header
</div>
<h2>菜单导航</h2>

<div class="hd-menu-list">
    <ul>
        <li class="active"><a href="#">栏目列表</a></li>
        <li><a href="#">添加栏目</a></li>
        <li><a href="#">更新栏目缓存</a></li>
    </ul>
</div>
<h2>确认对话框</h2>
<a href="javascript:hd_confirm_test()">弹出对话框</a>
<script>
    //确认对话框实例
    function hd_confirm_test() {
        hd_confirm({
            title: '提示',//标题
            message: '确定要关闭吗',//提示信息
            success: function () {//点击确定后的事件
                alert('你点了确定');
            },
            cancel: function () {//点击关闭后的事件
                alert('你点了关闭');
            }
        });
    }
</script>
<h2>气泡提示信息</h2>
<a href="javascript:hd_alert_test();">弹出气泡</a>
<script>
    //气泡提示信息实例
    function hd_alert_test() {
        hd_alert({
            message: '欢迎你',//显示内容
            timeout: 1,//显示时间
            success: function () {//这是回调函数
                alert('我已经消失了');
            }
        })
    }
</script>
</body>
</html>