组件

项目中各种通用的 UI 组件的示例

表单

展示所有具备向服务器提交数据功能的组件。

目录

文本框

组件来自 Bootstrap 3,使用方法参见官方文档

<!-- HTML -->

<form>
  <div class="form-group">
    <label for="formFieldExampleEmail">邮箱</label>
    <input type="email" placeholder="请输入邮箱" class="form-control" id="formFieldExampleEmail">
  </div>
</form>

文本框的视觉高度为 50px,由以下部分组成:

  • 内容高度 32px
  • 上下补白各 7px
  • 上下边框各 2px

其他参数为:

  • 字体大小为 14px
  • 行高为 1 倍
  • 字体颜色为 #666666
  • 占位符颜色为 #CDCDCD
  • 左右补白各 12px
  • 左右边框各 2px
  • 边框颜色正常状态时为 #ECF4FB,获取焦点时为 #7DC5FF
  • 圆角大小为 6px

带有图标的文本框

<!-- HTML -->

<form>
  <div class="form-group has-feedback">
    <label for="formFieldExampleFeedBack">比谷哥哥还强的搜索</label>
    <input type="search" placeholder="搜索「你知道图标在哪吗?」" class="form-control" id="formFieldExampleFeedBack">
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
  </div>
</form>

多选框和单选框

组件来自 iCheck,使用方法参见官方文档

该组件所使用的皮肤文件为 stylesheets/plugins/skins/flat/youyu.scss


<!-- HTML -->

<form>
  <!-- 多选框 -->
  <div class="checkbox">
    <label><input type="checkbox" value="1" data-role="icheck"></label>
  </div>
  <div class="checkbox">
    <label><input type="checkbox" value="2" data-role="icheck" checked="checked"></label>
  </div>
  <!-- 单选框 -->
  <div class="radio">
    <label><input type="radio" name="icheck-radio-example" value="1" data-role="icheck"></label>
  </div>
  <div class="radio">
    <label><input type="radio" name="icheck-radio-example" value="2" data-role="icheck" checked="checked"></label>
  </div>
</form>
// JavaScript

$("[data-role='icheck']").iCheck({
  checkboxClass: "icheckbox_flat-youyu",
  radioClass: "iradio_flat-youyu"
});

日期拾取器

组件来自 Bootstrap 3 Date/Time Picker,使用方法参见官方文档

<!-- HTML -->

<form>
  <div class="form-group">
    <input type="text" class="form-control" data-role="datetimepicker">
  </div>
</form>
// JavaScript

$("[data-role='datetimepicker']").datetimepicker();

通过点击图标激活

<!-- HTML -->

<form>
  <div class="form-group">
    <div class="input-group date" data-role="datetimepicker">
      <input type="text" class="form-control">
      <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
    </div>
  </div>
</form>

下拉列表

组件来自 Select2,使用方法参见官方文档

<!-- HTML -->

<select class="form-control" data-role="select2">
  <option value="chaixl">柴学梁</option>
  <option value="chenqh">陈清华</option>
  <option value="huangll">黄磊磊</option>
  <option value="luyj">陆云娇</option>
  <option value="gaogao">高友华</option>
  <option value="tengzhk">滕张坤</option>
  <option value="buxuan">卜璇</option>
</select>
// JavaScript

$("[data-role='select2']").select2();

可搜索的下拉列表

<!-- HTML -->

<select class="form-control" data-role="select2" multiple="multiple">
  <option value="chaixl" selected="selected">柴学梁</option>
  <option value="chenqh">陈清华</option>
  <option value="huangll">黄磊磊</option>
  <option value="luyj" selected="selected">陆云娇</option>
  <option value="gaogao">高友华</option>
  <option value="tengzhk">滕张坤</option>
  <option value="buxuan">卜璇</option>
</select>
// JavaScript

$("[data-role='select2']").select2();

文件上传

没有选择任何文件
没有选择任何文件
<!-- HTML -->

<div class="comp_uploader Uploader">
  <span class="comp_uploader-label">没有选择任何文件</span>
  <div class="Uploader-buttonset">
    <button class="Uploader-button Uploader-button--file" type="button">选择文件</button>
  </div>
</div>
<!-- 小按钮 -->
<div class="comp_uploader Uploader">
  <span class="comp_uploader-label">没有选择任何文件</span>
  <div class="Uploader-buttonset">
    <button class="Uploader-button Uploader-button--file Uploader-button--small" type="button">选择文件</button>
  </div>
</div>

Bootstrap 风格

组件来自 Bootstrap Filestyle,使用方法参见官方文档

<!-- HTML -->

<input class="filestyle" type="file" data-buttonText="选择文件">

富文本编辑器

组件来自 Simditor,使用方法参见官方文档

<!-- HTML -->

<textarea placeholder="请输入要编辑的内容" data-role="richeditor"></textarea>
// JavaScript

YouYu.richEditor($("[data-role='richeditor']"));

评分

<!-- HTML -->

<div class="Score-wrapper">
  <div class="Score--selectable">
    <!-- 第一颗星 -->
    <input type="radio" name="score-example" value="1" id="scoreExample1" class="Score-storage Score-storage-1">
    <a href="#" class="Score-level Score-level-1"><label for="scoreExample1">1</label></a>
    <!-- 重复前面的直到达到想要的星星数 -->
    ...
  </div>
</div>

如果完全用 HTML 写的话,简直可以说是「又臭又长」,通过在 HTML 上加入指定的属性就可以很省事地达到同样效果:

<!-- HTML -->

<div class="Score--selectable" data-highest="5"></div>

还可以直接调用脚本代码生成一个:

<!-- HTML -->

<div id="scoreWrapper"></div>
// JavaScript

YouYu.score($("#scoreWrapper"), {name: "score"});

详情请见 YouYu.score()

得分展示

60 分
<!-- HTML -->

<div class="Score-wrapper">
  <div class="Score">
    <span class="Score-level" style="width: 60%;">60 分</span>
  </div>
</div>

验证状态

组件来自 Bootstrap 3,使用方法参见官方文档

不能为空

<!-- HTML -->

<div class="form-group has-error">
  <input type="text" class="form-control" required="required">
  <p class="help-block">不能为空</p>
</div>