1.1.1 通用general
说明: 用来增强页面效果,提高用户体验度
按钮button
html
<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
html
<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
html
<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
html
<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
html
<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
html
<textarea class="xui_textarea"></textarea>开关switch
开关的可配置属性在
label标签上,分别是on和off. 默认可以不加这个2个属性
html
//默认无文字
<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
html
<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属性,以显示完整信息.
| 姓名 | 到达时间 | 籍贯 | |
|---|---|---|---|
| 张三 | 2017 | 1161231233 | 来自北京海淀区 |
| 李四 | 2018 | 65498433654 | 来自上海 |
| 王五 | 2017 | 1161231233 | 我是一只来自北方的狼,为了填饱肚子来到西伯利亚去找喜羊羊吃,可是找了半天还没找到,然后我就饿死了 |
| 姓名 | 到达时间 | 籍贯 | |
|---|---|---|---|
| 张三 | 2017 | 1161231233 | 来自北京海淀区 |
| 李四 | 2018 | 65498433654 | 来自上海 |
| 王五 | 2017 | 1161231233 | 我是一只来自北方的狼,为了填饱肚子来到西伯利亚去找喜羊羊吃,可是找了半天还没找到,然后我就饿死了 |
html
<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>