1.1.1 通用general

说明: 用来增强页面效果,提高用户体验度

按钮button

<button class="xui_btn xui_btn_default">默认按钮</button>
<button disabled class="xui_btn xui_btn_default">默认按钮禁止</button>
<button class="xui_btn xui_btn_cancel">取消按钮</button>
<button disabled class="xui_btn xui_btn_cancel">取消按钮</button>

说明:没看够? 戳我动感十足的按钮

输入框input

<div class="xui_item">
    <label>默认输入框: </label>
    <div class="xui_content">
        <input type="text" class="xui_input" placeholder="请输入关键字" />
    </div>
</div>
<div class="xui_item">
    <label>只读输入框: </label>
    <div class="xui_content">
        <input type="text" readonly="readonly" class="xui_input" placeholder="请输入关键字" />
    </div>
</div>
<div class="xui_item">
    <label>禁止输入框: </label>
    <div class="xui_content">
        <input type="text" disabled class="xui_input" placeholder="请输入关键字" />
    </div>
</div>
<div class="xui_item">
    <label class="xui_input_required">必选项: </label>
    <div class="xui_content">
        <input type="text" class="xui_input" placeholder="请输入关键字" />
    </div>
</div>
<div class="xui_item">
    <label>搜索框: </label>
    <div class="xui_content xui_input_search">
        <input type="text" class="xui_input" placeholder="请输入关键字" />
    </div>
</div>

单选框radio

<input class="xui_radio" id="radio_1" type="radio" name="radio" />
<label for="radio_1" class="xui_radio_box">单选1</label>
<input class="xui_radio" id="radio_2" type="radio" name="radio" />
<label for="radio_2" class="xui_radio_box">单选2</label>
<input class="xui_radio" id="radio_3" type="radio" name="radio" />
<label for="radio_3" class="xui_radio_box">单选3</label>
<input disabled class="xui_radio" id="radio_4" type="radio" name="radio" />
<label for="radio_4" class="xui_radio_box">单选4</label>

多选框checkbox

<input class="xui_checkbox" id="checkbox_1" type="checkbox" checked="checked" name="checkbox" />
<label for="checkbox_1" class="xui_checkbox_box">多选1</label>
<input class="xui_checkbox" id="checkbox_2" type="checkbox" name="checkbox" />
<label for="checkbox_2" class="xui_checkbox_box">多选2</label>
<input class="xui_checkbox" id="checkbox_3" type="checkbox" name="checkbox" />
<label for="checkbox_3" class="xui_checkbox_box">多选3</label>
<input disabled class="xui_checkbox" id="checkbox_4" type="checkbox" name="checkbox" />
<label for="checkbox_4" class="xui_checkbox_box">多选4</label>
<input disabled class="xui_checkbox" id="checkbox_5" type="checkbox" checked="checked" name="checkbox" />
<label for="checkbox_5" class="xui_checkbox_box">多选5</label>

下拉框select

<select class="xui_select">
    <option value="1">hello</option>
    <option value="2">world</option>
    <option value="3">选项一</option>
    <option value="4">选项二</option>
    <option value="5">选项三</option>
    <option value="6">选项四</option>
</select>

多行文本框textarea

<textarea class="xui_textarea"></textarea>

开关switch

开关的可配置属性在label标签上,分别是on和off. 默认可以不加这个2个属性

//默认无文字
<input id="xui_switch" class="xui_switch" type="checkbox">
<label for="xui_switch" class="xui_switch_box"></label>
//显示开,关二字
<input id="xui_switch_1" class="xui_switch" type="checkbox">
<label for="xui_switch_1" on="开" off="关" class="xui_switch_box"></label>
//显示√,× 打开状态
<input checked id="xui_switch_2" class="xui_switch" type="checkbox">
<label for="xui_switch_2" on="√" off="×" class="xui_switch_box"></label>
//禁止开关
<input disabled id="xui_switch_3" class="xui_switch" type="checkbox">
<label for="xui_switch_3" on="√" off="×" class="xui_switch_box"></label>
//显示on,off 打开状态
<input checked id="xui_switch_4" class="xui_switch" type="checkbox">
<label for="xui_switch_4" on="on" off="off" class="xui_switch_box"></label>

上传文件button

上传文件原理很简单,就是把input设置为透明,盖在一个好看的button上,是不是感觉被骗了!

如果你发现在谷歌浏览器下点击上传文件按钮很卡,那么请把accept里面设置修改一下,默认为*,意思是匹配所有的文件.详情Chrome 文件选择延迟 Bug

<div class="xui_upload">
    <input type="file" class="xui_file" accept="*" />
    <button class="xui_btn xui_btn_default">上传文件</button>
</div>
<div class="xui_upload">
    <input type="file" class="xui_file" accept="image/jpeg, image/jpg, image/png, image/bmp" />
    <button class="xui_btn xui_btn_default">上传文件</button>
</div>

表格table

表格的一个重要的类目是xui_table_wrap, 如果文字过多就省略用...表示, 不加则会换行全部显示.

当加上xui_table_wrap时,请务必在该标签上加一个title属性,以显示完整信息.

<table class="xui_table">
    <thead>
        <tr>
            <th>姓名</th>
            <th>到达时间</th>
            <th>qq</th>
            <th>籍贯</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>王五</td>
            <td>2017</td>
            <td>1161231233</td>
            <td>我是一只来自北方的狼,为了填饱肚子来到西伯利亚去找喜羊羊吃,可是找了半天还没找到,然后我就饿死了</td>
        </tr>
    </tbody>
</table>
<table class="xui_table xui_table_wrap">
    <thead>
        <tr>
            <th>姓名</th>
            <th>到达时间</th>
            <th>qq</th>
            <th>籍贯</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>王五</td>
            <td>2017</td>
            <td>1161231233</td>
            <td>我是一只来自北方的狼,为了填饱肚子来到西伯利亚去找喜羊羊吃,可是找了半天还没找到,然后我就饿死了</td>
        </tr>
    </tbody>
</table>