easyui学习索引页

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>复杂的布局</title>
<link rel="stylesheet" id="easyuiTheme" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.mobile.js"></script>
</head>
<style>
a{ color:Black; text-decoration:none;}
.easyui-accordion ul{list-style-type:none;margin:0px; padding:10px;}
.easyui-accordion ul li{ padding:0px;}
.easyui-accordion ul li a{line-height:24px;}
.easyui-accordion ul li div{margin:2px 0px;padding-left:10px;padding-top:2px;}
.easyui-accordion ul li div:hover{border:1px solid #99BBE8; background:#E0ECFF;cursor:pointer;}
.easyui-accordion ul li div:hover a{color:#416AA3;}
.icon-add-extend{background:url('img/plugin_edit.png') no-repeat;width:18px; line-height:18px;display:inline-block;}
.icon-table-extend{background:url('img/table.png') no-repeat;width:18px; line-height:18px;display:inline-block;}
</style>
<body class="easyui-layout" id='el'>
<div data-options="region:'north',split:true,collapsible:false" style="background:#95B8E7;height:100px">
<h1>管理程序</h1>
</div>
<div data-options="region:'center'" style="padding:5px;background:#eee;">
<div id="tt" class="easyui-tabs" data-options="fit:true"></div>
</div>
</body>
<script>
$(function(){
//动态添加布局西部区域面板
$('#el').layout('add',{
region: 'west',
width: 220,
title: '示例程序',
split: true,
//点击折叠后的面板时，面板不会自动展开
expandMode:null,
//添加面板内容
content:"<div id='nav' class='easyui-accordion' "+
"data-options='border:false'></div>",
});
//初始化折叠面板
$("#nav").accordion();
//定义导航中的内容
var menu_content =
{"content":[
{"menuid":"1","menuname":"第1章",
"menus":[{"menuid":"11","menuname":"简单的注册页面","url":"c1/register.html"}]
},
{"menuid":"2","icon":"icon-extend-folder","menuname":"第2章",
"menus":[{"menuid":"21","menuname":"登录验证","url":"c2/validateLogin.html"},
{"menuid":"22","menuname":"服务器验证","url":"c2/remoteValidate.html"},
{"menuid":"23","menuname":"格式化组合框内容","url":"c2/comboboxFormat.html"},
{"menuid":"24","menuname":"服务器端过滤组合框内容","url":"c2/comboboxFilter.html"},
{"menuid":"25","menuname":"日期框","url":"c2/dateboxCHN.html"},
{"menuid":"26","menuname":"日期框复用","url":"c2/shareCalendar.html"},
{"menuid":"27","menuname":"文件上传","url":"c2/uploadFile.html"}
]
},
{"menuid":"3","menuname":"第3章",
"menus":[{"menuid":"31","menuname":"容器内拖放","url":"c3/innerDraggable.html"},
{"menuid":"32","menuname":"授权拖放的组件","url":"c3/droppable.html"},
{"menuid":"34","menuname":"购物车的拖放","url":"c3/shoppingCart.html"}]
},
{"menuid":"4","menuname":"第4章",
"menus":[{"menuid":"41","menuname":"服务器初始化折叠面板","url":"c5/accordion.html"},
{"menuid":"42","menuname":"动态添加标签页","url":"c5/addtabs.html"},
{"menuid":"43","menuname":"自适应高度布局","url":"c5/fitLayout.html"}
]
},
{"menuid":"5","menuname":"第5章",
"menus":[{"menuid":"51","menuname":"服务器初始化折叠面板","url":"c5/accordion.html"},
{"menuid":"52","menuname":"动态添加标签页","url":"c5/addtabs.html"},
{"menuid":"53","menuname":"自适应高度布局","url":"c5/fitLayout.html"}
]
},
{"menuid":"6","menuname":"第6章",
"menus":[{"menuid":"61","menuname":"创建起止日期框","url":"c6/example.html"},
{"menuid":"62","menuname":"使用起止日期框插件","url":"c6/start_end.html"},
]
},
{"menuid":"7","menuname":"第7章",
"menus":[{"menuid":"71","menuname":"创建产品","url":"c7/createProduct.html"},
{"menuid":"72","menuname":"冻结数据网格列","url":"c7/frozenColumns.html"},
{"menuid":"73","menuname":"创建数据网格页脚摘要","url":"c7/datagridFooter.html"},
{"menuid":"74","menuname":"数据网格检索","url":"c7/search.html"},
{"menuid":"75","menuname":"数据网格行编辑","url":"c7/editorRow.html"},
{"menuid":"76","menuname":"数据网格单元格编辑","url":"c7/editorCell.html"},
{"menuid":"77","menuname":"数据网格服务器分页","url":"c7/remotepagination.html"},
{"menuid":"78","menuname":"组合网格","url":"c7/comboGrid.html"},
{"menuid":"79","menuname":"异步树","url":"c7/asyncTree.html"},
{"menuid":"710","menuname":"树的操作","url":"c7/operateTree.html"},
{"menuid":"711","menuname":"复杂的树形网格","url":"c7/treeGrid.html"},
]
},
{"menuid":"8","menuname":"第8章",
"menus":[{"menuid":"81","menuname":"创建简单的CRUD应用","url":"c8/basicCRUD.html"},
{"menuid":"82","menuname":"创建CRUD数据网格","url":"c8/datagridCRUD.html"},
{"menuid":"83","menuname":"自动增加网格行数据","url":"c8/expandRow.html"},
]
},
{"menuid":"9","menuname":"第9章",
"menus":[{"menuid":"91","menuname":"移动端登录界面","url":"c9/t1.html"},
{"menuid":"92","menuname":"选项卡","url":"c9/t2.html"},
]
},
{"menuid":"10","menuname":"第10章",
"menus":[{"menuid":"101","menuname":"改变主题风格","url":"c10/changeTheme.html"},
]
},
{"menuid":"11","menuname":"第11章",
"menus":[{"menuid":"111","menuname":"详细内容视图","url":"c11/detailView.html"},
{"menuid":"112","menuname":"分组视图","url":"c11/groupView.html"},
{"menuid":"113","menuname":"缓存视图","url":"c11/bufferView.html"},
{"menuid":"114","menuname":"虚拟滚动视图","url":"c11/scrollview.html"},
{"menuid":"115","menuname":"卡片视图","url":"c11/cardView.html"},
{"menuid":"116","menuname":"可编辑的树","url":"c11/editableTree.html"},
{"menuid":"117","menuname":"数据网格列拖动","url":"c11/columns-ext.html"},
{"menuid":"118","menuname":"数据网格本地过滤","url":"c11/localFilter.html"},
{"menuid":"119","menuname":"数据网格服务器端过滤","url":"c11/remoteFilter.html"},
{"menuid":"1110","menuname":"数据分析器","url":"c11/pivotGrid.html"},
{"menuid":"1111","menuname":"Ribbon","url":"c11/ribbon.html"},
{"menuid":"1112","menuname":"文本编辑器","url":"c11/texteditor.html"},
]
}]
};
//将导航内容动态的添加到折叠面板中
$.each(menu_content.content, function(i, n) {
var menulist ='';
menulist +='<ul>';
$.each(n.menus, function(j, o) {
menulist += '<li><div><a id="'+o.menuid+'" href="#" ><span class="'+
o.icon+'" > </span><span class="nav" url='+o.url+'>' +
o.menuname + '</span></a></div></li> ';
});
menulist += '</ul>';
//动态添加折叠面板中的元素
$('#nav').accordion('add', {
title: n.menuname,
content: menulist,
iconCls: 'icon ' + n.icon,
});
});
//导航栏中元素被点击时
$('.nav').click(function(){
var $p = $(this);
var title = $p.html();
//检查标签是否已被加载
var which = $('#tt').tabs('getTab',title);
//which指的是标签对象，返回null代表该标签不存在
if(which){
//如果该标签存在的话就在选项卡中选中它
$('#tt').tabs('select',title);
}
else{
//动态添加标签
/*$('#tt').tabs('add',{
//设置标签标题
title:title,
//为标签添加一个可关闭的按钮
closable:true,
//远程加载标签内容
href:$p.attr('url'),
//对加载后的数据进行过滤，仅保留<body>标签内的内容
extractor: function(data){
var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
var matches = pattern.exec(data);
if (matches){
return "<div style='margin:20px'>"+matches[1]+"</div>";
} else {
return data;
}
}
});*/
$('#tt').tabs('add',{
title: title,
href: $p.attr('url'),
//iconCls: iconCls,
closable: true,
onLoadError:function(data){
// 这里对于非200状态码的都会加载不出来界面，而需要在这里手动处理
var tab = $('#tt').tabs('getSelected');
var body = tab.panel('body');
if(data.status == 401){
body.html(data.responseText)
}else{
body.html('<h1>加载出错</h1>');
}
}
});
}
});
});
</script>
</html>

easyui学习索引页的更多相关文章

SQL索引学习-索引结构
前一阵无意中和同事讨论过一个SQL相关的题(通过一个小问题来学习SQL关联查询),很惭愧一个非常简单的问题由于种种原因居然没有回答正确,数据库知识方面我算不上技术好,谈起SQL知识的学习我得益于200 ...
PostgreSQL内部结构与源代码研究索引页
磨砺技术珠矶,践行数据之道,追求卓越价值 luckyjackgao@gmail.com 返回顶级页:PostgreSQL索引页本页记录所有本人所写的PostgreSQL的内部结构和源代码研究相关文摘 ...
PostgreSQL基础知识与基本操作索引页
磨砺技术珠矶,践行数据之道,追求卓越价值返回顶级页:PostgreSQL索引页 luckyjackgao@gmail.com 本页记录所有本人所写的PostgreSQL的基础知识和基本操作相关文摘和 ...
PostgreSQL集群方案相关索引页
磨砺技术珠矶,践行数据之道,追求卓越价值返回顶级页:PostgreSQL索引页本页记录所有本人所写的PostgreSQL的集群方案相关文摘和文章的链接: pgpool-II: 1 pgpool-I ...
PostgreSQL统计信息索引页
磨砺技术珠矶,践行数据之道,追求卓越价值返回顶级页:PostgreSQL索引页本页记录所有本人所写的PostgreSQL的统计信息相关文摘和文章的链接: pg_stats: --------- ...
布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
Asp.Net MVC4 + Oracle + EasyUI 学习序章
Asp.Net MVC4 + Oracle + EasyUI 序章 -- 新建微软实例本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1. 简 ...
为什么不能访问django自带的索引页
通过HTTP://192.168.160.128:8000访问虚拟机上的django索引页出现“ 无法访问此网站 192.168.160.128 拒绝了我们的连接请求. ” 是什么原因呢?费了好大一番 ...
MYSQL 索引页结构图
create table t( a ) not ) default null,primary key(a)); mysql> select * from t; +----+------+ | a ...

随机推荐

Python分析盘点2019全球流行音乐：是哪些歌曲榜单占领了我们？
写在前面:圣诞刚过,弥留者节日气息的大家是否还在继续学习呐~在匆忙之际也不忘给自己找几首好听的歌曲放松一下,缠绕着音乐一起来看看关于2019年流行音乐趋势是如何用Python分析的吧! 昨天下午没事儿 ...
Linux - Shebang(#!)
1. Shebang这个符号通常在Unix系统的脚本中第一行开头中写到,它指明了执行这个脚本文件的解释程序.
[CISCN2019 华北赛区 Day1 Web1]Dropbox
0x01 前言通常我们在利用反序列化漏洞的时候,只能将序列化后的字符串传入unserialize(),随着代码安全性越来越高,利用难度也越来越大.但在不久前的Black Hat上,安全研究员Sam ...
SQL 查询每组的第一条记录
CREATE TABLE [dbo].[test1]( [program_id] [int] NULL, [person_id] [int] NULL ) ON [PRIMARY] /*查询每组分组中 ...
splash-简介及入门
splash 1. splash简介 Splash是一个JavaScript渲染服务,是一个带有HTTP API的轻量级浏览器,同时它对接了Python中的Twisted和QT库.利用它,我 ...
C#多个泛型约束问题
多个约束之间使用逗号隔开,但不重复T约束. 1. private void AddControl<T>(TabPage tabPage, T userControl) where T: U ...
java web第一次课堂测试1
---恢复内容开始--- 要求如图: 本程序包括四个文件,一个显示界面的jsp文件,一个dao层文件,一个servlet层文件一个连接数据库的文件下面依次附上代码: 前端界面: <%@ pa ...
leetcode 0216
目录 ✅ 893. 特殊等价字符串组描述解答 cpp py ✅ 811. 子域名访问计数描述解答 cpp py ✅ 509. 斐波那契数描述解答 cpp py ✅ 521. 最长特殊序列 ...
自身经历 .NET转Java 的一些分享
原因楼主在二线城市从事.NET开发8年,当薪资达到15k想往20k跳的时候,发现一个残酷的现实.在招聘信息上给出这个薪资的一共10家,其中:2~3家给出的是假的薪资范围(吸引面试者),2家是总人数不 ...
pikachu-字符型注入(get) #手工注入
1.检测注入类型 http://127.0.0.1/pikachu-master/vul/sqli/sqli_str.php?name=1&submit=%E6%9F%A5%E8%AF%A2 ...

easyui学习索引页

easyui学习索引页的更多相关文章

随机推荐

热门专题