Widget Box 容器
Widget Box
<div class="widget-box">
<div class="widget-header"></div>
<div class="widget-body"></div>
</div>
Widget Box Options 选项
颜色
.widget-color-blue、.widget-color-blue2、.widget-color-blue3
、.widget-color-green、.widget-color-red
<div class="widget-box widget-color-blue">
...
</div>
透明 .transparent
<div class="widget-box transparent">
...
</div>
边框 .light-border
<div class="widget-box widget-color-dark light-border">
...
</div>
折叠 .collapsed
<div class="widget-box collapsed">
...
</div>
Widget Header 头部
<div class="widget-header">
<h4 class="widget-title smaller">title!</h4>
<div class="widget-toolbar"></div>
</div>
.widget-header-small 小
.widget-header-large 大
.widget-header-flat 禁用渐变背景
控件工具栏
<div class="widget-toolbar">
<a data-action="settings" href="#"><i class="ace-icon fa fa-bars"></i></a>
<a data-action="reload" href="#"><i class="ace-icon fa fa-refresh"></i></a>
<a data-action="fullscreen" class="orange2" href="#"><i class="ace-icon fa fa-expand"></i></a>
<a data-action="collapse" href="#"><i class="ace-icon fa fa-chevron-up"></i></a>
<a data-action="close" href="#"><i class="ace-icon fa fa-times"></i></a>
</div>
- settings
- reload
- fullscreen
- collapse
- close
可以有多个 工具栏
<div class="widget-header">
<h4 class="widget-title"></h4>
<div class="widget-toolbar no-border"></div>
<div class="widget-toolbar"></div>
</div>
工具栏 无边框线.no-border
容器菜单 .widget-menu
<div class="widget-toolbar">
<a data-action="reload" href="#"><i class="ace-icon fa fa-refresh"></i></a>
<div class="widget-menu">
<a data-toggle="dropdown" data-action="settings" href="#"><i class="ace-icon fa fa-bars"></i></a>
<ul class="dropdown-menu dropdown-menu-right dropdown-light-blue dropdown-caret dropdown-closer">
<li><a href="#dropdown1" data-toggle="tab">Option#1</a></li>
<li><a href="#dropdown2" data-toggle="tab">Option#2</a></li>
</ul>
</div>
</div>
容器选项卡 .nav-tabs
<div class="widget-header widget-header-small">
<h5 class="widget-title">Tabbed</h5>
<div class="widget-toolbar no-border">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#info" data-toggle="tab">Info</a></li>
</ul>
</div>
</div>
<div class="widget-body">
<div class="widget-main">
<!-- tab content here -->
</div>
</div>
widget-body 主体
<div class="widget-body">
<div class="widget-toolbox"> ... </div>
<div class="widget-main"> ... </div>
<div class="widget-toolbox padding-8"> ... </div>
</div>
.widget-main 、.widget-toolbox(底部工具栏)可以添加.no-padding
<div class="widget-body">
<div class="widget-main no-padding">
<table class="table table-striped table-bordered table-hover">
<thead class="thin-border-bottom">
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
.widget-toolbox 可以在 .widget-main 前面或者后面
<div class="widget-toolbox">
<div class="btn-toolbar">
...
</div>
</div>
<div class="widget-main">
...
</div>
<div class="widget-toolbox padding-8 clearfix">
<button class="btn btn-xs btn-danger pull-left">
<i class="ace-icon fa fa-times"></i>
I don't accept
</button>
<button class="btn btn-xs btn-success pull-right">
I accept
<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
</button>
</div>
Functions & Events 方法、事件
toggle 关闭
hide 隐藏
show 显示
reload 刷新
fullscreen 全屏
$('#my-widget').widget_box('toggle');
$('#my-widget').widget_box('show');
$('#my-widget').widget_box('close');
$('#my-widget').widget_box('reload');
触发前 事件
show.ace.widget
hide.ace.widget close.ace.widget reload.ace.widget fullscreen.ace.widget setting.ace.widget
$('#my-widget').on('close.ace.widget reload.ace.widget', function(event) {
if(waitingForContent) {
event.preventDefault();//action will be cancelled, widget box won't close
}
});
setting.ace.widget 没有触发后事件，可以用来弹出自定义dialog
$('#my-widget').on('setting.ace.widget', function(ev) {
//launch a modal (settings box) or other appropriate action
});
触发后 事件
shown.ace.widget hidden.ace.widget closed.ace.widget reloaded.ace.widget fullscreened.ace.widget
$('#my-widget').on('shown.ace.widget', function(event) {
//$(this).doSomething();
});
reloaded.ace.widget 可以加载内容
$('#my-widget').on('reload.ace.widget', function(ev) {
$.ajax({url: 'remote-data.php'}).done(function(content) {
//use content
//when ready ...
$('#my-widget').trigger('reloaded.ace.widget');
});
});
Widget Drag & Drop 可拖拽(移动)
<div class="row">
<div class="col-sm-6 widget-container-col">
<div class="widget-box">
...
</div>
</div>
<div class="col-sm-6 widget-container-col">
<div class="widget-box">
...
</div>
</div>
</div>
$('.widget-container-col').sortable({
connectWith: '.widget-container-col',
items: '> .widget-box',
opacity: 0.8,
revert: true,
forceHelperSize: true,
placeholder: 'widget-placeholder',
forcePlaceholderSize: true,
tolerance: 'pointer',
start: function(event, ui){
//when an element is moved, its parent (.widget-container-col) becomes empty with almost zero height
//we set a "min-height" for it to be large enough so that later we can easily drop elements back onto it
ui.item.parent().css({'min-height': ui.item.height()})
},
update: function(event, ui) {
//the previously set "min-height" is not needed anymore
//now the parent (.widget-container-col) should take the height of its child (.wiget-box)
ui.item.parent({'min-height':''})
}
});