<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>LayOut</title> <script src="../jquery.min.js" type="text/javascript"></script> <script src="../jquery.easyui.min.js" type="text/javascript"></script> <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../themes/icon.css" rel="stylesheet" type="text/css" /> <script language="JavaScript"> $(document).ready(function () { //绑定右键菜单事件 function tabCloseEven() { //关闭当前 $('#mm-tabclose').click(function () { var currtab_title = $('#mm').data("currtab"); $('#tabs').tabs('close', currtab_title); }) //全部关闭 $('#mm-tabcloseall').click(function () { $('.tabs-inner span').each(function (i, n) { var t = $(n).text(); $('#tabs').tabs('close', t); }); }); //关闭除当前之外的TAB $('#mm-tabcloseother').click(function () { var currtab_title = $('#mm').data("currtab"); $('.tabs-inner span').each(function (i, n) { var t = $(n).text(); if (t != currtab_title) $('#tabs').tabs('close', t); }); }); //关闭当前右侧的TAB $('#mm-tabcloseright').click(function () { var nextall = $('.tabs-selected').nextAll(); if (nextall.length == 0) { //msgShow('系统提示','后边没有啦~~','error'); alert('后边没有啦~~'); return false; } nextall.each(function (i, n) { var t = $('a:eq(0) span', $(n)).text(); $('#tabs').tabs('close', t); }); return false; }); //关闭当前左侧的TAB $('#mm-tabcloseleft').click(function () { var prevall = $('.tabs-selected').prevAll(); if (prevall.length == 0) { alert('到头了,前边没有啦~~'); return false; } prevall.each(function (i, n) { var t = $('a:eq(0) span', $(n)).text(); $('#tabs').tabs('close', t); }); return false; }); //退出 $("#mm-exit").click(function () { $('#mm').menu('hide'); }) } }); function addPanel(url,tabTitle){ $('.easyui-accordion li div').removeClass("selected"); addTab(tabTitle, url); $(this).parent().addClass("selected"); } function addTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title: subtitle, content: createFrame(url), closable: true, width: $('#mainPanle').width() - 10, height: $('#mainPanle').height() - 26 }); tabClose(); } else { $('#tabs').tabs('select', subtitle); } } function createFrame(url) { var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>'; return s; } function tabClose() { /*双击关闭TAB选项卡*/ $(".tabs-inner").dblclick(function () { var subtitle = $(this).children("span").text(); $('#tabs').tabs('close', subtitle); }) $(".tabs-inner").bind('contextmenu', function (e) { $('#mm').menu('show', { left: e.pageX, top: e.pageY, }); var subtitle = $(this).children("span").text(); $('#mm').data("currtab", subtitle); return false; }); } </script> <style> .footer { width: 100%; text-align: center; line-height: 35px; } .top-bg { background-color: #d8e4fe; height: 80px; } </style> </head> <body class="easyui-layout"> <div region="north" border="true" split="true" style="overflow: hidden; height: 80px;"> <div class="top-bg"></div> </div> <div region="south" border="true" split="true" style="overflow: hidden; height: 40px;"> </div> <div region="west" split="true" title="导航菜单" style="width: 200px;"> <div id="aa" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;"> <div title="博文管理" iconcls="icon-save" style="overflow: auto; padding: 10px;"> <ul class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a onclick="addPanel('http://www.baidu.com','百度')" href="javascript:void(0)">百度</a></span> </li> <li> <span><a onclick="addPanel('http://www.qq.com','QQ')" href="javascript:void(0)">QQ</a></span> </li> <li> <span>File 13</span> </li> </ul> </li> <li> <span>File 2</span> </li> <li> <span>File 3</span> </li> </ul> </li> <li> <span><a href="#">File21</a></span> </li> </ul> </div> <div title="新闻管理" iconcls="icon-reload" selected="true" style="padding: 10px;"> content2 </div> <div title="资源管理"> content3 </div> </div> </div> <div id="mainPanle" region="center" style="overflow: hidden;"> <div id="tabs" class="easyui-tabs" fit="true" border="false"> <div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home"> <h1>Welcome to jQuery UI!</h1> </div> </div> </div> </body> </html>
效果图:
发表评论
-
jquery.pagination.js
2016-05-03 20:13 336使用jquery.pagination.js做ajax ... -
arguments、callee
2014-09-24 11:44 543argument代表当前函数的参数数组 arguments ... -
scrollTop offsetHeight scrollHeight
2014-03-15 11:43 539scrollTop <div style=" ... -
编写更好的jquery代码
2014-02-08 09:56 506缓存变量 DOM遍历是昂贵的,所以尽量将会重用的元素缓存。 ... -
js 实现继承
2014-01-14 14:42 489在开始摆弄代码之前,应该搞清楚使用继承的目的和能带来什 ... -
html5本地文件系统
2014-01-14 11:50 0阿双方都是 -
HTML5新特性
2014-01-09 15:46 576特性一:正则表达式 相信大家都会非常喜欢这个特性,无 ...
相关推荐
EasyUI1.4.4 + zTree3.5.19 完美结合框架布局:tree+tab,zTree的使用(简单数据格式,标准数据格式),我重新组织整理了:EasyUI1.4.4的使用示例,zTree的使用示例。
JQ EasyUI1.4.4示例 + zTree3.5.19 完美的 tree +tab 框架布局(修正菜单) 看图介绍!http://blog.csdn.net/cyy11/article/details/50449918 之前下载过的与我联系。
ssm easyui框架+MYSQLssm easyui框架+MYSQLssm easyui框架+MYSQL
EasyUI datagrid+tree右键+window弹出层综合运用
EasyUI1.4+zTree3.5.16完美结合框架布局,都是最新的,如果好的话请点评下,有什么意见也可以提出来
springMVC+Mybatis+spring+easyui+zTree+ueditor+higchart IT信息管理系统,需要tomcat+sqlsever+jdk1.6,源代码提供了数据库模型,数据库备份文件,以及服务启动注意事项。系统模块有:权限管理、用户管理、部门...
jQuery+EasyUI+1.2.4+API+中文文档
相关代码很有参考价值,部分代码可直接引入自己项目。 ASP.NET MVC+EasyUI 框架+通用权限管理系统 + 源码。
ASP.NET MVC4+EasyUI+三层工厂模式 实现权限管理系统 其中Entity为模型实体层类库;DAL为数据访问层类库,主要负责数据库操作;BLL为业务逻辑类库,Common为公共帮助类库,WebUI为用户层。
企业管理框架使用 easyUI+mvc+ef+asp.net 等实现的,是一个企业级管理系统的 一个MVC4 框架的使用实例
easyui+servlet+jdbc实现的异步增删改查,适合初学者学习
【ASP.NET编程知识】EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例.docx
struts2+ajax+easyui+json+datagrid增,删,改,查,分页,排序,有数据库
OA项目,使用SSM框架开发,使用EASYUI前端AJAX的JSON传值实现,对数据进行合理封装。
php+easyui DataGrid+ajax实例开发 完成数据库的增删查改
基于SSM+EasyUI+Mysql的个人博客系统项目源码.zip 基于SSM+EasyUI+Mysql的个人博客系统项目源码.zip 基于SSM+EasyUI+Mysql的个人博客系统项目源码.zip 基于SSM+EasyUI+Mysql的个人博客系统项目源码.zip 基于SSM+...
easyui 1.5 + jquery 1.11,前端使用easyui会所需要的依赖包
easyui前台+spring + hibernate 后台 + 权限等.. 孙宇制作,本人只是参考,借鉴,谢谢!
JQueryEasyui1.3.6+电子书文档+14套主题