主框架布局之:Menu
参考示例:
主框架布局之:Menu
一:创建界面布局
<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
<div class="header" region="north" height="70" showSplit="false" showHeader="false">
</div>
<div title="south" region="south" showSplit="false" showHeader="false" height="30" >
</div>
<div title="center" region="center" bodyStyle="overflow:hidden;">
<!--Splitter-->
<div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
<div size="180" maxSize="250" minSize="100" showCollapseButton="true">
</div>
<div showCollapseButton="false">
</div>
</div>
</div>
</div>
其中,Layout实现上、中、下布局;Splitter实现左、右折叠布局。
二:创建Menu
创建Menu控件,放入顶部区域,作为功能操作项。
<ul id="menu1" class="mini-menubar" style="width:100%;"
url="../data/listTree.txt" onitemclick="onItemClick"
textField="text" idField="id" parentField="pid" >
</ul>
url从服务端返回JSON格式如下:
[
{id: "base", text: "Base", expanded: false},
{id: "ajax", text: "Ajax", pid: "base"},
{id: "json", text: "JSON", pid: "base"},
{id: "date", text: "Date", pid: "base"},
{id: "control", text: "Control", pid: "base"},
......
]
通过 "id" 和 "pid" 组成树形结构,在创Tree时注意设置 "idField" 、 "parentField" 属性。
三:创建Tabs
创建Tabs控件,放入Splitter右侧区域,作为主操作区域。
<!--Tabs-->
<div id="mainTabs" class="mini-tabs bg-toolbar" activeIndex="0" style="width:100%;height:100%;"
bodyStyle="border:0;background:white;">
<div title="首页" url="../../docs/api/overview.html" >
</div>
</div>
四:监听处理"itemclick"事件
function showTab(node) {
var tabs = mini.get("mainTabs");
var id = "tab$" + node.id;
var tab = tabs.getTab(id);
if (!tab) {
tab = {};
tab.name = id;
tab.title = node.text;
tab.showCloseButton = true;
tab.url = node.url;
tabs.addTab(tab);
}
tabs.activeTab(tab);
}
function onItemClick(e) {
var item = e.item;
var isLeaf = e.isLeaf;
if (isLeaf) {
showTab(item);
}
}
分享到:
相关推荐
MiniUI 提供了良好的可配置性和扩展性,简化了网页开发过程,让开发者能够更专注于业务逻辑,而非繁琐的页面布局和交互设计。 **MiniUI 主要特点** 1. **组件丰富**:MiniUI 包含了大量的前端组件,如表格(Table...
jQuery MiniUI 是一个基于jQuery的轻量级Web UI框架,主要设计用于快速开发企业级的Web应用。这个框架提供了一套完整的组件,包括表格、树形结构、对话框、按钮、表单等,使得开发者可以方便地构建用户界面,而无需...
【标题】:“基于jQuery和MiniUI的前端快速开发框架” 在Web开发领域,前端框架扮演着至关重要的角色,它们能够帮助开发者快速构建交互性强、用户体验良好的网页应用。本主题聚焦于一个特定的前端框架——基于...
jQuery MiniUI - 快速开发WebUI。 它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。 使用MiniUI,开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、...
MiniUI 是一个基于 jQuery 的高性能前端界面框架,专为开发企业级 Web 应用而设计。这个名为 "miniui_java_myeclipse.rar" 的压缩包包含了一整套用于 Java 开发者的 MiniUI 资源,特别适配于 MyEclipse 开发环境。...
总之,jQuery MiniUI 是一款优秀的前端框架,它简化了企业级 Web 应用的开发流程,提供了丰富的组件和便捷的交互方式。通过深入学习和理解 MiniUI,开发者能够构建出高效、响应式的界面,提升整体应用的质量和用户...
jQuery miniUI 是一个基于 jQuery 的轻量级前端开发框架,专为 PHP 开发者设计,提供了一系列强大的组件,如表格、表单、按钮、对话框等,帮助开发者快速构建用户界面。它简化了网页交互,提高了开发效率,并且具有...
jQuery miniUI 是一款基于jQuery开发的轻量级Web UI组件库,它提供了丰富的控件,使得开发人员可以快速地构建出具有专业外观的Web应用程序。本文主要讲述的是在jQuery miniUI中如何应用表格控件来合并单元格。 合并...
MiniUI - 专业WebUI控件库 1.快速开发,减少50%代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。 2.丰富组件库,高性能、低内存 3.支持 IE6+、FireFox、Chrome
JQuery基础教程之第五章后面章节请看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery...
JQuery基础教程之第四章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
JQuery基础教程之第八章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
JQuery基础教程之第七章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...
jQuery MiniUI 是一款基于 jQuery 的轻量级 Web UI 框架,专为快速开发高效、美观的 Web 应用程序而设计。标题中的“3.0”指的是该框架的一个重要版本,通常会包含一系列增强的功能和改进。MiniUI 致力于帮助开发者...
jQuery MiniUI 是一个专为Web应用设计的专业UI控件库,旨在帮助开发者高效地构建用户界面,减少前端开发的工作量,让开发者能够更加集中精力于服务端和业务逻辑的实现。MiniUI 的核心理念是提供一套简洁、易用且功能...
jqueryui界面框架_sitemesh布局框架
jQuery MiniUI 是一款基于 jQuery 的轻量级前端开发框架,主要用于构建企业级 Web 应用。MiniUI 3.3 版本是该框架的一个重要更新,它在原有的基础上优化了性能、增强了功能,并修复了一些已知问题。本文将详细讲解 ...
JQuery基础教程之第六章后续章节看我后续资源jquery全套教程: JQuery基础教程之前言和前三章:http://download.csdn.net/source/745869 JQuery基础教程之第四章:http://download.csdn.net/source/745907 JQuery基础...