组件规范
小按钮
| 效果 | code |
|---|---|
| 编辑 | <a class="btn btn-info btn-mini"><i class="icon-edit"></i>编辑</a> |
| 受理 | <a class="btn btn-warning btn-mini"><i class="icon-edit"></i>受理</a> |
| 删除 | <a class="btn btn-danger btn-mini"><i class="icon-remove"></i>删除</a> |
| 取消 | <a class="btn btn-danger btn-mini"><i class="icon-remove"></i>取消</a> |
| 对照服务 | <a class="btn btn-info btn-mini"><i class="icon-edit"></i>对照服务</a> |
| 查看 | <a class="btn btn-info btn-mini"><i class="icon-search"></i>查看</a> |
| 维修 | <a class="btn btn-warning btn-mini"><i class="icon-wrench"></i>维修</a> |
| 售后 | <a class="btn btn-success btn-mini"><i class="icon-comments"></i>售后</a> |
大按钮
|
大按钮相比小按钮在a标签上取消了btn-mini的class，下面列举的大按钮的例子只是写出了所需要添加的icon对应的class |
|
保存 class="icon-save"
查询 class="icon-search"
返回 class="icon-reply"
回复 class="icon-edit"
|
状态描述
对应四种不同颜色的span来描述状态，仅添加class：badge的为灰色class="badge",其他分别为绿色class="badge badge-success",红色对应的class是class="badge badge-danger",黄色对应的class是class="badge badge-warning"
| 效果 | code |
|---|---|
| 已启用 | <span class="badge badge-success">已启用</span> |
| 未启用 | <span class="badge">未启用</span> |
| 未受理 | <span class="badge badge-warning">未受理</span> |
| 未审核 | <span class="badge badge-danger">未审核</span> |
提示框、确认框
在开始前我们必须引入这个js<script src="../../common/main/js/bootbox.js"></script>
//alert窗口
$(document).on("click", ".alert-box", function (e) {
bootbox.alert("Hello world!", function () {
//callback
});
});//confirm窗口
$(document).on("click", ".confirm", function (e) {
bootbox.confirm("Are you sure?", function (result) {
//callback
});
});//prompt窗口
$(document).on("click", ".prompt", function (e) {
bootbox.prompt("What is your name?", function (result) {
if (result === null) {
//callback
} else {
//callback
}
});
});//dialog窗口
$(document).on("click", ".dialog", function (e) {
bootbox.dialog("I am a custom dialog", [{
"label": "Success!",
"class": "btn-success",
"callback": function () {
}
}, {
"label": "Danger!",
"class": "btn-danger",
"callback": function () {
}
}]);
});
补充（弹出框2s后消失，图片弹出框）
//alert窗口
onClick="alertfade('2s后按钮消失了')"
//图片弹窗
onClick="popimg('../../admin/img/2asd.jpg')"
下拉框取值
//select和input在同一节点下
<div class="controls">
<select onChange="inputvalue(this,'posid')" ><option selected>请选择</option>
<option value='主治医师'>主治医师</option>
<option value='副主任医师'>副主任医师</option>
<option value='主任医师'>主任医师</option></select>
<input type='hidden' id="posId" value=''/>
</div>
//下面是JS已经添加在application.js
function inputvalue(selects,id){
var val=$(selects).val()
$("#"+id).val(val) ;
alert("隐藏input已获取值：" + val);
}
confirmation删除
//必要的js引入
<script src="../../common/main/js/bootstrap-confirmation-by-wj.js"></script>
//Html部分 注意部分：增加了btn-confirm为必须的class,data-toggle="confirmationw"为必须属性，可以通过data-loadong-text等设置执行过程文字提示，data-href为删除处理程序地址
<a class="btn btn-danger btn-mini btn-confirm" data-toggle="confirmation" data-loading-text="删除中..." data-failure-text="删除失败..." data-href="deleteurl">
<i class="icon-remove icon-white"></i>删除
</a>
© 2014 天创聚合