本文介绍了AdminLTE2中的关键组件，包括MainHeader、Sidebar、ControlSidebar、Box和InfoBox等，详细阐述了它们的功能、典型用法及定制选项。
AdminLTE 2提供了如下组件Component :
Main HeaderSidebarControl SidebarBoxInfo BoxDirect Chat
组件 Main Header
Main Header 包含 logo 和 navbar，位于页面顶部。Main Header 的主要功能区是 navbar。
Admin LTE 2基于 bootstrap 3, 但 Admin LTE 2 navbar 和 bootstrap navbar不同，它还包含了 bootstrap navbar 没有的其他组件。
AdminLTE 2 navbar 有两种用法, 常规用法和布局Top Nav Layout用法
典型用法
常规用法应用要点举例 :
<body class="..."> <!--注意，这里body的布局class 是 Top Nav Layout 之外的其他布局-->
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a class="logo">
<!-- logo的内容-->
</a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- navbar 的内容-->
</nav>
</header>
</body>
布局Top Nav Layout用法
布局Top Nav Layout用法应用要点举例 :
<body class="... layout-top-nav"> <!--这里要指定布局为Top Nav Layout-->
<header class="main-header">
<nav class="navbar navbar-static-top">
<!--navbar 的内容-->
</nav>
</header>
官方文档
组件 Sidebar
Sidebar 一般位于页面左侧，通常包括用户面板user panel, 用于功能导航的侧边栏菜单sidebar menu，
或者也可以包含一个搜索功能区域。
典型用法
Sidebar典型用法要点举例 :
<!-- Left side column contains sidebar -->
<aside class="main-sidebar">
<!-- sidebar -->
<section class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel">
<!--用户面板内容，用户展示用户头像，当前状态等信息-->
</div>
<!-- Sidebar Menu -->
<ul class="sidebar-menu">
<!--侧边栏菜单，通常可以是一棵功能导航树-->
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
Sidebar 显示隐藏控制
左侧边栏Sidebar的显示和隐藏控制是通过Push Menu Plugin插件机制实现的。该插件可以通过data api方式或者jQuery方式应用。
Data API 方式
声明一个按钮，添加属性data-toggle="push-menu"，它用来控制左侧边栏的显示和隐藏。
<button class="btn btn-primary" data-toggle="push-menu">Toggle Sidebar</button>
jQuery 方式
在一个带有css类.sidebar-toggle-btn的元素上应用Push Menu Plugin插件，使该元素用来控制左侧边栏Sidebar的显示和隐藏。
// options 参数 :
// collapseScreenSize 类型:数字，缺省值 : 767, 意义 : 当屏幕宽度小于该像素数时折叠左侧边栏
// expandOnHover 类型:布尔变量, 缺省值 : false, 意义 : 鼠标悬停时是否切换Sidebar的显示隐藏状态
$('.sidebar-toggle-btn').pushMenu(options)
官方文档
组件 Control Sidebar
Control Sidebar 是右侧边栏，开发者可以根据自己的需求把它用出很多花样。
典型用法
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Content of control sidebar goes here -->
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
右侧边栏有两种显示/隐藏方式：
- 显示时浮在内容区的上面(指
z-index方向，而不是竖直方向),缺省模式； - 显示时将内容区向左推开，隐藏时内容区恢复原样。
这两种方式的切换使用Javascript选项设置来实现 :
// options 属性 slide:true 表示显示时浮在内容区上面,slide:false 表示显示时向左推开内容区显示自己;
// slide 不设置表示使用缺省值 slide:false
$("#my-toggle-button").controlSidebar(options);
控制Control Sidebar的现实和隐藏
Data Api HTML声明方式
<a href="#" data-toggle="control-sidebar">Toggle Control Sidebar</a>
jQuery 代码控制方式
$("#my-toggle-button").controlSidebar(options);
事件处理机制
| 事件 | 描述 |
|---|---|
expanded.controlsidebar | 展开后被触发 |
collapsed.controlsidebar | 折叠后被触发 |
事件处理例子:
$('#toggle-button').on('expanded.controlsidebar', handleExpandedEvent)
官方文档
组件Box盒子
Box盒子是Admin LTE 2模板中最常用的组件，你可以用它来显示任何东西，比如复杂的图表，或者是最简单的一个文本块。
Box盒子是页面内容中的一个矩形区域，并不是类似弹出消息框，模态对话框那样浮在页面内容上面的浮层矩形。
盒子缺省用法
// 此例子摘自AdminLTE 2官方文档
<div class="box"> // box 类表明这将是一个Box盒子
<div class="box-header with-border">
<h3 class="box-title">Default Box Example</h3>
<div class="box-tools pull-right">
<!-- Buttons, labels, and many other things can be placed here! -->
<!-- Here is a label for example -->
<span class="label label-primary">Label</span>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body">
The body of the box
</div>
<!-- /.box-body -->
<div class="box-footer">
The footer of the box
</div>
<!-- box-footer -->
</div>
<!-- /.box -->
Box盒子的变化用法
// 此例子摘自官方文档
<div class="box box-default">...</div>
<div class="box box-primary">...</div>
<div class="box box-info">...</div>
<div class="box box-warning">...</div>
<div class="box box-success">...</div>
<div class="box box-danger">...</div>
Solid Box 实体盒子/立体盒子
// 此例子摘自官方文档
// 在 box div 上增加 box-solid 类使该Box出现实物效果
<div class="box box-solid box-default">...</div>
<div class="box box-solid box-primary">...</div>
<div class="box box-solid box-info">...</div>
<div class="box box-solid box-warning">...</div>
<div class="box box-solid box-success">...</div>
<div class="box box-solid box-danger">...</div>
使用Box Tools操作Box
AdminLTE 的盒子Box设计成可以被折叠/展开或者删除。这个功能基于AdminLTE的插件Box Widget。
Data Api 方式
下面例子演示了如何让一个Box可以被关闭或者最小化 :
box-header中放入了box-tools;box-tools中有一个button data-widget="remove"用来操作Box盒子的删除;box-tools中有一个button data-widget="collapse"用来操作Box盒子的折叠和展开；
<div class="box box-default" data-widget="box-widget">
<div class="box-header">
<h3 class="box-title">Box Tools</h3>
<div class="box-tools">
<!-- This will cause the box to be removed when clicked -->
<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
<!-- This will cause the box to collapse when clicked -->
<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
jQuery方式
// 对目标盒子Box标签应用 Box Widget 插件
$('#my-box').boxWidget({
animationSpeed: 500,//动画速度,单位:毫秒
collapseTrigger: '#my-collapse-button-trigger',// jQuery selector,指定折叠/展开触发按钮
removeTrigger: '#my-remove-button-trigger',// jQuery selector,指定删除触发按钮
collapseIcon: 'fa-minus',// css类，指定折叠按钮图标
expandIcon: 'fa-plus',// css类，指定展开按钮图标
removeIcon: 'fa-times'// css类，指定删除按钮图标
})
事件处理机制
| 事件 | 描述 |
|---|---|
expanded.boxwidget | 展开后被触发 |
collapsed.boxwidget | 折叠后被触发 |
removed.boxwidget | 删除后被触发 |
事件处理例子 :
$('#my-box').on('expanded.boxwidget', handleExpandedEvent)
jQuery 方式操作Box盒子
例子 :
$('#my-box-widget').boxWidget('toggle')
| 方法 | 功能 |
|---|---|
toggle | 盒子在展开和折叠状态切换 |
expand | 展开盒子 |
collapse | 折叠盒子 |
remove | 删除盒子 |
Box盒子内容的异步刷新Box Refresh
AdminLTE 2提供了一个插件 Box Refresh 用来实现Box盒子内容的异步AJAX刷新。
当一个Box盒子上应用了Box Refresh插件，这个Box的内容就可以被异步刷新了。
Data Api方式应用Box Refresh插件到Box
在box div上增加属性data-widget="box-refresh"，并且提供需要的内容的地址data-source="/URL-TO-CONTENT"，在页面加载时插件就会自动地使用AJAX GET请求从指定地址加载内容到该Box的 .box-body区域。
如果想对AJAX请求得到的结果进行处理，则需要使用jQuery模式的Box Refresh。
jQuery方式应用Box Refresh插件到Box
以下代码演示了使用jQuery方式定制一个Box盒子的异步刷新特性。jQuery方式提供了更多的定制选项，比如结果类型的指定，和对结果的处理逻辑。
$("#my-box").refreshBox({
//用来取Box内容的URL地址
source: '',
// GET请求的参数 (例子: {search_term: 'layout'}, which renders to URL/?search_term=layout).
params: {},
// CSS selector，指定哪个按钮用来触发刷新
trigger: '.refresh-btn',
// CSS selector，用来指定获取的内容展示到哪里。该selector应该在当前box内部
content: '.box-body',
//是否自动加载内容
loadInContent: true,
// 响应内容类型 (example: 'json' or 'html')
responseType: '',
// ajax spinner(ajax请求过程中在该Box中展示当前正处于加载过程中的动画效果)的HTML template.
overlayTemplate: '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>',
// ajax请求前被调用
onLoadStart: function() {
// Do something before sending the request.
},
// the ajax request请求完成时被调用，此时结果已返回或者已经遇到错误失败
onLoadDone: function(response) {
// Do something after receiving a response.
}
})
jQuery方式刷新应用了Box Refresh插件的Box
$('#my-box-widget').boxRefresh('load')
Loading State 加载状态
如果想模拟一个加载状态，可以在box的结束标签前增加下面内容 :
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
官方文档
本文有关Box盒子的介绍全部来自其官方文档。针对上面的有些例子，官方文档提供了图片效果。
本文对Box盒子的介绍主要是抓其要点。
Box 官方文档
Box Widget官方文档
Box Refresh官方文档
组件 Info Box 信息盒
信息盒用来展示一些统计信息。
典型应用1
// 摘自官方文档
<div class="info-box">
<!-- Apply any bg-* class to to the icon to color it -->
<span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">93,139</span>
</div>
<!-- /.info-box-content -->
</div>
<!-- /.info-box -->
典型应用2
// 摘自官方文档
<!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-red">
<span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
<!-- The progress section is optional -->
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
<span class="progress-description">
70% Increase in 30 Days
</span>
</div>
<!-- /.info-box-content -->
</div>
扫一扫
1850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
