组件

项目中各种通用的 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>

验证状态