Easyui 生成layout
Easyui 生成layout
var $tabs; var $body; var $south; function appendLayout(title, href) { if (!$body)
$body = $(document.body); if (!$body.hasClass('layout')) { var $centerHtml = $("<div>", { "id": "center", "style": "height:'100%',overflow:auto", "data-options": "region:'center',split:true,collapsible:true" }); $body.children().wrapAll($centerHtml); // 页面上的内容用 easyui layout center 包住 $tabs = $("<div>", { "id": 'tabs', "data-options": "tools:'#tab-tools'" }); $south = $("<div>", { "id": "south", "style": "height:280px;", "data-options": "region:'south',split:true" }).append($tabs); var aBtn = $("<a>", { 'style': '', "href": "javascript:void(0);", 'class': 'layout-button-down' }); var tools = $("<div>", { 'id': 'tab-tools', 'class': 'panel-tool' }).append(aBtn); $body.append($south).append(tools).layout(); aBtn.on('click', function () { closeLayout(true); }); $tabs.tabs({ fit: true, border: false, onClose: function (title, index) { var num = $(this).tabs('tabs').length; if (num == 0)//所有的tab 都关闭时隐藏面板
{
closeLayout();
} }
}); $south.data('isExpand', true);
} addTab(title, 1, href, null); } function addTab(title, id, href, text) { if (!$south.data('isExpand')) {
openLayout();
}
var key = title + "<a style='display:none'>" + id + "</a>"
if ($tabs.tabs('exists', key)) {
$tabs.tabs('select', key);
}
else {
var html;
if (text) {
html = text;
}
else {
html = '<iframe id="zlifm-' + id + '" src="' + href + '" width="100%" height="100%" class="main-content-itme" frameborder="0" style="border:0px; margin-bottom:-20px" />';
}
$tabs.tabs("add", { title: key, content: html, closable: true });
}
} function closeAllTab() { var tts = $tabs.tabs("tabs"); var arr = new Array(); for (var i = 0; i < tts.length; i++) {
arr.push(tts[i].panel("options").title);
}
for (var i = 0; i < arr.length; i++) {
$tabs.tabs("close", arr[i]);
}
} //打开面板
function openLayout() {
if (!$south.data('isExpand'))
$body.layout('expand', 'south');
$south.data('isExpand', true);
} //关闭面板
function closeLayout(close) { var isExpand = $south.data('isExpand') || !!close; if (isExpand)
$body.layout('collapse', 'south'); $south.data('isExpand', !isExpand);
}
Easyui 生成layout的更多相关文章
- 经历:easyui的layout自适应高度布局
在使用easyui的layout布局的时候,在某种情况下,我们会在后续的逻辑中修改一下layout的某个region的高度,那么该怎么做呢? 我就遇到了这样的情况,今天需求经理提出了一个需求:认证用 ...
- CI 笔记3 (easyui 的layout布局,最小化layout原型)
在做easyui的layout的布局时,最小化一个原型,分2步,一个是div的父标签,一个是body做父标签,全屏的. 步骤分别为: 在设置的5个区中,div的最后一个,必须是data-options ...
- easyui生成合并行,合计计算价格
easyui生成合并行,合计计算价格 注:本文来源: 原创 一:图样你效果图 二:代码实现 1:datagrid 列展示: window.dataGrid = $("#dataGrid&qu ...
- ASP.NET页面使用JQuery EasyUI生成Dialog后台取值为空
原因: JQuery EasyUI生成Dialog后原来的文档结构发生了变化,原本在form里的内容被移动form外面,提交到后台后就没有办法取值了. 解决办法: 在生成Dialog后将它append ...
- EasyUI之Layout布局和Tabs页签的使用
1.JQuery EasyUI之LayOut布局 EasyUI是一款基于JQuery开发的前端框架,它集成很多漂亮的样式和相应的功能,大大方便了我们对前端开发的难度.对于web项目而言,主页面的一定是 ...
- 关于EasyUI的Layout总结
版权声明:本文为博主原创文章,未经博主允许不得转载. 1.layout以html标签方式建立的 <div id="content" region="center&q ...
- 第二百零二节,jQuery EasyUI,Layout(布局)组件
jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...
- jQuery EasyUI API - Layout - Layout[原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- java web前端easyui(layout+tree+双tabs)布局+树+2个选项卡tabs
1.列出要实现的样式: 2.实现的代码: 分三大部分: 1):页面主体部分:mian.vm <html> <head> <title>Ks UI</title ...
随机推荐
- [AngularJS] Introduction to ui-router
Introduce to basic $stateProvider.state() with $stateParams services. Understand how nested router w ...
- Java 计算两个日期相差月数
package com.myjava; import java.text.ParseException;import java.text.SimpleDateFormat;import java.ut ...
- MapReduce原理讲解
简介 本文主要介绍MapReduce V2的基本原理, 也是笔者在学习MR的学习笔记整理. 本文首先大概介绍下MRV2的客户端跟服务器交互的两个协议, 然后着重介绍MRV2的核心模块MRAppMast ...
- xcode 3.x版本中的Executables 到xcode 4.x中怎么找不到了?
转自:http://zhidao.baidu.com/question/327868169.html 1 在Scheme处选择Edit Scheme 2 点击Run(Debug) 3 在Argumen ...
- Eclipse的java代码出错:The import org.apache cannot be resolved
Eclipse中,折腾java代码. 把之前在android中的代码拿过来使用. 结果出现The import org.apache cannot be resolved的错误: [解决过程] 1.这 ...
- Java中数组的快排
描述输入三个字符(可以重复)后,按各字符的ASCII码从小到大的顺序输出这三个字符. 输入 第一行输入一个数N,表示有N组测试数据.后面的N行输入多组数据,每组输入数据都是占一行,有三个字符组成, ...
- nodejs的mysql模块学习(四)断开数据库连接
断开连接有两种方式 end()函数 在这种情况下 所有先前排队的查询 仍然可以继续继续发送到服务器,但是如果在执行到断开连接的命令之前发生了致命的错误,那么end()将不会被执行 connection ...
- 用户 'NT AUTHORITY\NETWORK SERVICE' 登录失败/OLE DB 错误: OLE DB 或 ODBC 错误 :
用户 'NT AUTHORITY\NETWORK SERVICE' 登录失败/OLE DB 错误: OLE DB 或 ODBC 错误 : 2012-2-23 上午 ,弄SAAS时,发现在生成多维数据集 ...
- Codeforces Round #190 (Div. 2) 水果俩水题
后天考试,今天做题,我真佩服自己... 这次又只A俩水题... orz各路神犇... 话说这次模拟题挺多... 半个多小时把前面俩水题做完,然后卡C,和往常一样,题目看懂做不出来... A: 算是模拟 ...
- [改善Java代码]异步运算考虑使用Callable接口
多线程有两种实现方式: 一种是实现Runnable接口,另一种是继承Thread类,这两种方式都有缺点,run方法没有返回值,不能抛出异常(这两个缺点归根到底是Runable接口的缺陷,Thread也 ...