sponsored links
Bootstrap 轻量级后台管理系统模板ACE使用介绍
在上一篇基于Bootstrap介绍了一个免费的后台管理模板Charisma UI。
参见链接：
基于Jquery、Bootstrap的后台管理免费UI框架推荐--Charisma UI
今天继续分享一个轻量级的后台管理系统模板，当然了也基于强大的Bootstrap。
百度网盘下载地址：
/s/1gdgMsAf
Demo预览地址：
http://***/code/ace/&
基于Bootstrap3，拥有强大的功能组件以及UI组件，基本能满足后台管理系统的需求，
而且能根据不同设备适配显示，而且还有四个主题可以切换。ACE模板图示：
文件说明：
assets包含了ace使用的js &css及图片信息。
网页图标全采用FontAwesome，除Bootstrap,jQuery UI使用到的第三方插件有：
jQuery 2.0.3
jQuery UI 1.10.3 (Custom Build)
Twitter Bootstrap 3.0.0
FontAwesome 3.2.1
Google "Open Sans" Font
jQuery Flot Charts 0.8.1
jQuery Sparklines 2.1.2
Easy Pie Chart 1.2.5
jQuery Knob 1.2.0
jQuery Validate 1.11.1
FuelUX 2.3.0 (Spinner & Wizard & Treeview)
FullCalendar 1.6.4
jQuery ColorBox 1.4.27
jQuery dataTables 1.9.4
jQuery Chosen 1.0
jQuery Masked Input 1.3.1
jQuery Input Limiter 1.3.1
jQuery AutoSize 1.17.7
Bootstrap Colorpicker
Bootstrap Datepicker
Bootstrap Timepicker v0.2.3
Bootstrap DateRange Picker 1.2
Bootbox.js 4.0.0
jQuery Gritter 1.7.4
jQuery slimScroll 1.1.1
Spin.js 1.3.0
jQuery UI Touch Punch 0.2.2
Google Code Prettify
ExplorerCanvas
Mindmup Wysiwyg Editor
Toopay Markdown Editor 1.1.4
X-editable 1.4.6
Select2 3.4.2
Bootstrap Tags 2.2.5
jQuery Mobile 1.3.2 (Custom Build)
jqGrid 4.5.2
Dropzone.js 3.0
Nestable lists plugin
浏览器兼容：
Firefox 5+
Google Chrome 14+
Internet Explorer 8
Internet Explorer 9
Bootstrap兼容：
Bootstrap 2.2.x
Bootstrap 2.3.x
Bootstrap 3.0.x
大部分的 Web 应用和动态网站都需要一个后台管理系统用于管理前台界面的信息展示以及用户信息.管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,这样使用后台管理系统的人员才能够方便的进行操作和管理.下面收集了十款非常漂亮的网站后台管理系统模板分享给大家,欢迎免费下载使用. 您可能还喜欢 34个漂亮的应用程序后台管理界面设计(一) ...
大部分的 Web 应用和动态网站都需要一个后台管理系统用于管理前台界面的信息展示以及用户信息.管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,这样使用后台管理系统的人员才能够方便的进行操作和管理.下面收集了十款非常漂亮的网站后台管理系统模板分享给大家,欢迎免费下载使用. Admin Panel Template 这个后台管理模 ...
虽然转移.但好东西不应该是沉默 原文地址:/lhb25/archive//10-free-html-admin-templates.html 免费下载点:http://download.csdn.net/detail/yangwei4845 Admin Panel Tem ...
网站或者应用系统的管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,下面分享的这个后台管理模板的设计非常漂亮,特别是导航部分,头部还有未读的短消息和提醒的条数显示.赶紧下载吧:) 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附 ...
后台管理模板收藏:/zhengzhou_seo1/blog/static//技术交流QQ群：
jquery特效
javascript特效
html5_css3特效
>推荐一款全新高大上的Bootstrap响应式后台管理系统模版漂亮的Ace-admin模版下载
推荐一款全新高大上的Bootstrap响应式后台管理系统模版漂亮的Ace-admin模版下载
日运行环境：IE6 IE7 IE8及以上 Firefox
推荐一款全新高大上的Bootstrap响应式后台管理系统模版漂亮的Ace-admin模版下载,bootstrap网站模版,后台管理系统模版,ace admin模版,响应式网站模版,扁平化风格网站模版
上一篇：已经是最后一篇了
热门网页特效
友情链接：&& &&
版权声明:本站资源均来自互联网，如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
公众号: zhaotexiao新人问个问题，正常bootstrap都是点击菜单然后刷新整个页面_bootstrap吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：13,983贴子：
新人问个问题，正常bootstrap都是点击菜单然后刷新整个页面收藏
正常bootstrap都是点击菜单然后刷新整个页面有没有方式可以做到 类似于easy ui那种
点击菜单 每个模块可以按照浏览器选项卡 呈现在系统
选项卡 很好做，点击 菜单也能实现
现在遇到的问题就是：如果要在选项卡加载页面 就得用ifream
不过 不喜欢用这个，ifream如果 不用js控制高度 就会出现 我不想遇到的滚动条有没有大神来指点下？比较终于 那种 各个功能模块 以选项卡的方式 ，我用的C# MVC 目前 站点已经实现了
就是 想改版 成那种 选项卡的
有没有前辈来指导下？
江苏盘锦天燃气模温机，一台省得让你怀疑人生的燃气锅炉
发布了截图
通过ajax获取后台返回网页代码，然后javascript创建一个选项卡，吧获取的页面代码塞进去。说起来简单，做起来感觉很麻烦。
Ajax 比frame 简单多了，不管维护还是建置，frame 在跨浏览器各家规范本不一呈现效果不一，并且你js 代码无法跨frame 获取dom
顺带一提router, 也是这个概念的东西
登录百度帐号推荐应用基于bootstrap的jQuery多级列表树插件
当前位置： >
> 基于bootstrap的jQuery多级列表树插件
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。
浏览器兼容性
bootstrap-treeview是一款效果非常酷的基于bootstrap的多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。
Bootstrap v3.0.3
jQuery v2.0.3
以上两个外部依赖文件已经经过测试可以正常使用，其他版本的Bootstrap需要另行测试。该插件不支持bootstrap 2。
首先要在页面中引入依赖文件和 bootstrap-treeview.js文件。
&!-- Required Stylesheets --&
&link href="./css/bootstrap.css" rel="stylesheet"&
&!-- Required Javascript --&
&script src="./js/jquery.js"&&/script&
&script src="./js/bootstrap-treeview.js"&&/script&
可以使用任何HTML DOM元素来作为该列表树的容器：
&div id="tree"&&/div&
该列表树插件最基本的调用方法如下：
function getTree() {
// Some logic to retrieve, or generate tree structure
$('#tree').treeview({data: getTree()});
为了创建树的继承结构，需要为该列表树插件提供一个嵌套结构的js对象。例如：
var tree = [
text: "Parent 1",
text: "Child 1",
text: "Grandchild 1"
text: "Grandchild 2"
text: "Child 2"
text: "Parent 2"
text: "Parent 3"
text: "Parent 4"
text: "Parent 5"
最简单的树结构可以只有一个节点，使用一个带text属性的js对象来实现即可：
text: "Node 1"
如果你需要自定义更多的内容，可以参考下面：
text: "Node 1",
icon: "glyphicon glyphicon-stop",
selectedIcon: "glyphicon glyphicon-stop",
color: "#000000",
backColor: "#FFFFFF",
href: "#node-1",
selectable: true,
checked: true,
disabled: true,
expanded: true,
selected: true
tags: ['available'],
下面的参数可用于树节点的属性定义，如节点的文本、颜色和标签等。
String(必选项)
列表树节点上的文本，通常是节点右边的小图标。
String(可选项)
列表树节点上的图标，通常是节点左边的图标。
selectedIcon
String(可选项)
当某个节点被选择后显示的图标，通常是节点左边的图标。
String(可选项)
结合全局enableLinks选项为列表树节点指定URL。
selectable
Boolean. Default: true
指定列表树的节点是否可选择。设置为false将使节点展开，并且不能被选择。
Object(可选项)
一个节点的初始状态。
state.checked
Boolean，默认值false
指示一个节点是否处于checked状态，用一个checkbox图标表示。
state.disabled
Boolean，默认值false
指示一个节点是否处于disabled状态。（不是selectable，expandable或checkable）
state.expanded
Boolean，默认值false
指示一个节点是否处于展开状态。
state.selected
Boolean，默认值false
指示一个节点是否可以被选择。
String. Optional
节点的前景色，覆盖全局的前景色选项。
String. Optional
节点的背景色，覆盖全局的背景色选项。
Array of Strings. Optional
通过结合全局showTags选项来在列表树节点的右边添加额外的信息。
参数可以定制treeview的默认外观和行为。参数使用一个对象来在插件初始化时传入：
// Example: initializing the treeview
// expanded to 5 levels
// with a background color of green
$('#tree').treeview({
data: data,
// data is not optional
levels: 5,
backColor: 'green'
Array of Objects
列表树上显示的数据。
，Default: inherits from Bootstrap.css。
设置所有列表树节点的背景颜色。
borderColor
，Default: inherits from Bootstrap.css。
设置列表树容器的边框颜色，如果不想要边框可以设置showBorder属性为false。
checkedIcon
String：class名称
定义的 "glyphicon glyphicon-check"
设置处于checked状态的复选框图标。
collapseIcon
String：class名称
定义的 "glyphicon glyphicon-minus"
设置列表树可收缩节点的图标。
，Default: inherits from Bootstrap.css。
设置列表树所有节点的前景色。
String：class名称
定义的"glyphicon"。
设置列表树中没有子节点的节点的图标。
enableLinks
是否使用当前节点的文本作为超链接。超链接的href值必须在每个节点的data结构中给出。
expandIcon
String：class名称
定义的 "glyphicon glyphicon-plus"
设置列表树可展开节点的图标。
highlightSearchResults
是否高亮搜索结果。
highlightSelected
当选择节点时是否高亮显示。
onhoverColor
， Default: '#F5F5F5'。
设置列表树的节点在用户鼠标滑过时的背景颜色。
Default: 2
设置继承树默认展开的级别。
multiSelect
是否可以同时选择多个节点。
String：class名称
定义的 "glyphicon glyphicon-stop"
设置所有列表树节点上的默认图标。
selectedIcon
String：class名称
定义的 "glyphicon glyphicon-stop"
设置所有被选择的节点上的默认图标。
searchResultBackColor
， Default: undefined, inherits。
设置搜索结果节点的背景颜色。
searchResultColor
， Default: '#D9534F'
设置搜索结果节点的前景颜色。
selectedBackColor
， Default: '#428bca'
设置被选择节点的背景颜色。
selectedColor
， Default: '#FFFFFF'。
设置列表树选择节点的背景颜色。
showBorder
是否在节点上显示边框。
showCheckbox
是否在节点上显示checkboxes。
是否显示节点图标。
是否在每个节点右边显示tags标签。tag值必须在每个列表树的data结构中给出。
uncheckedIcon
String：class名称
定义的 "glyphicon glyphicon-unchecked"
设置图标为未选择状态的checkbox图标。
你可以通过两种方式来调用方法：
1、插件包装器：插件的包装器可以作为访问底层方法的代理。
$('#tree').treeview('methodName', args)
多个参数必须使用数组对象来传入。
2、直接使用treeview：你可以通过下面两种方法中的一种来获取treeview对象实例。
//该方法返回一个treeview的对象实例
$('#tree').treeview(true)
.methodName(args);
//对象实例也保存在DOM元素的data中，
//可以使用'treeview'的id来访问它。
$('#tree').data('treeview')
.methodName(args);
treeview方法列表
checkAll(options)：选择所有的节点。
$('#tree').treeview('checkAll', { silent: true });
触发nodeChecked事件，传入silent来阻止其它事件。
checkNode(node | nodeId, options)：选择指定的节点，接收节点或节点ID。
$('#tree').treeview('checkNode', [ nodeId, { silent: true } ]);
触发nodeChecked事件，传入silent来阻止其它事件。
clearSearch()：清空以前的搜索结果。例如清除它们的高亮状态。
$('#tree').treeview('clearSearch');
触发searchCleared事件。
collapseAll(options)：折叠所有的节点，折叠整个树。
$('#tree').treeview('collapseAll', { silent: true });
触发nodeCollapsed事件，传入silent来阻止其它事件。
collapseNode(node | nodeId, options)：折叠指定节点和它的子节点。如果不想折叠子节点，可以设置{ ignoreChildren: true }。
$('#tree').treeview('collapseNode', [ nodeId, { silent: true, ignoreChildren: false } ]);
触发nodeCollapsed事件，传入silent来阻止其它事件。
disableAll(options)：禁用所有的节点。
$('#tree').treeview('disableAll', { silent: true });
触发nodeDisabled事件，传入silent来阻止其它事件。
disableNode(node | nodeId, options)：禁用指定的节点，接收节点或节点ID。
$('#tree').treeview('disableNode', [ nodeId, { silent: true } ]);
触发nodeDisabled事件，传入silent来阻止其它事件。
enableAll(options)：启用所有的节点。
$('#tree').treeview('enableAll', { silent: true });
触发nodeEnabled事件，传入silent来阻止其它事件。
enableNode(node | nodeId, options)：启用指定的节点，接收节点或节点ID。
$('#tree').treeview('enableNode', [ nodeId, { silent: true } ]);
触发nodeEnabled事件，传入silent来阻止其它事件。
expandAll(options)：展开所有的树节点。也可以展开任何给定级别的树节点。
$('#tree').treeview('expandAll', { levels: 2, silent: true });
触发nodeExpanded事件，传入silent来阻止其它事件。
expandNode(node | nodeId, options)：展开指定的树节点，接收节点或节点ID。也可以展开任何给定级别的树节点。
$('#tree').treeview('expandNode', [ nodeId, { levels: 2, silent: true } ]);
触发nodeExpanded事件，传入silent来阻止其它事件。
getCollapsed()：返回折叠节点的数组。例如state.expanded = false。
$('#tree').treeview('getCollapsed', nodeId);
getDisabled()：返回被禁用节点的数组。
$('#tree').treeview('getDisabled', nodeId);
getEnabled()：返回可用节点的数组。
$('#tree').treeview('getEnabled', nodeId);
getExpanded()：返回所有展开节点的数组。
$('#tree').treeview('getExpanded', nodeId);
getNode(nodeId)：返回给定节点ID的单一节点对象。
$('#tree').treeview('getNode', nodeId);
getParent(node | nodeId)：返回给定节点的父节点，如果没有则返回undefined。
$('#tree').treeview('getParent', node);
getSelected()：返回所有被选择节点的数组，例如：state.selected = true。
$('#tree').treeview('getSelected', nodeId);
getSiblings(node | nodeId)：返回给定节点的兄弟节点的数组，如果没有则返回undefined。
$('#tree').treeview('getSiblings', node);
getUnselected()：返回没有被选择节点的数组。例如：state.selected = false。
$('#tree').treeview('getUnselected', nodeId);
remove()：移除列表树容器。移除附加的事件、附加对象和额外的html元素。
$('#tree').treeview('remove');
revealNode(node | nodeId, options)：显示一个树节点，展开从这个节点开始到根节点的所有节点。
$('#tree').treeview('revealNode', [ nodeId, { silent: true } ]);
触发nodeExpanded事件，传入silent来阻止其它事件。
search(pattern, options)：搜索匹配是非常的指定树节点，并高亮它们。返回配平节点的数组。
$('#tree').treeview('search', [ 'Parent', {
ignoreCase: true,
// case insensitive
exactMatch: false,
// like or equals
revealResults: true,
// reveal matching nodes
触发searchComplete事件。
selectNode(node | nodeId, options)：选择一个给定的树节点，接收节点或节点ID。
$('#tree').treeview('selectNode', [ nodeId, { silent: true } ]);
触发nodeSelected事件，传入silent来阻止其它事件。
toggleNodeChecked(node | nodeId, options)：切换节点的Check状态。
$('#tree').treeview('toggleNodeChecked', [ nodeId, { silent: true } ]);
触发nodeChecked事件或nodeUnchecked事件，传入silent来阻止其它事件。
toggleNodeDisabled(node | nodeId, options)：切换一个节点的可用和不可用状态。
$('#tree').treeview('toggleNodeDisabled', [ nodeId, { silent: true } ]);
触发nodeDisabled事件或nodeEnabled事件，传入silent来阻止其它事件。
toggleNodeExpanded(node | nodeId, options)：切换一个节点的展开和折叠状态。
$('#tree').treeview('toggleNodeExpanded', [ nodeId, { silent: true } ]);
触发nodeExpanded事件或nodeCollapsed事件，传入silent来阻止其它事件。
toggleNodeSelected(node | nodeId, options)：切换一个节点的选择状态。
$('#tree').treeview('toggleNodeSelected', [ nodeId, { silent: true } ]);
触发nodeSelected事件或nodeUnselected事件，传入silent来阻止其它事件。
uncheckAll(options)：Uncheck所有的节点。
$('#tree').treeview('uncheckAll', { silent: true });
触发nodeUnchecked事件，传入silent来阻止其它事件。
uncheckNode(node | nodeId, options)：Uncheck一个给定的节点，接收节点或节点ID。
$('#tree').treeview('uncheckNode', [ nodeId, { silent: true } ]);
触发nodeUnchecked事件，传入silent来阻止其它事件。
unselectNode(node | nodeId, options)：不选择指定的节点，接收节点或节点ID。
$('#tree').treeview('unselectNode', [ nodeId, { silent: true } ]);
触发nodeUnselected事件，传入silent来阻止其它事件。
你可以在参数中使用回调函数来绑定任何事件，或者使用标准的jQuery .on()方法来绑定事件。
在参数中调用的示例：
$('#tree').treeview({
// The naming convention for callback's is to prepend with `on`
// and capitalize the first letter of the event name
// e.g. nodeSelected -> onNodeSelected
onNodeSelected: function(event, data) {
// 事件代码...
使用jQuery .on方法：
$('#tree').on('nodeSelected', function(event, data) {
// 事件代码...
可用事件列表
nodeChecked (event, node)：一个节点被checked。
nodeCollapsed (event, node)：一个节点被折叠。
nodeDisabled (event, node)：一个节点被禁用。
nodeEnabled (event, node)：一个节点被启用。
nodeExpanded (event, node)：一个节点被展开。
nodeSelected (event, node)：一个节点被选择。
nodeUnchecked (event, node)：一个节点被unchecked。
nodeUnselected (event, node)：取消选择一个节点。
searchComplete (event, results)：搜索完成之后触发。
searchCleared (event, results)：搜索结果被清除之后触发。
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。}