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 ...

随机推荐

「POI2010」Bridges
传送门 Luogu团队题链接解题思路首先二分答案,然后在所有边权小于二分值的边和所有点组成的图中判欧拉回路. 由于可能出现混合图,所以要用到网络流. 把所有无向边钦定一个方向,那么原图就是一个有向 ...
python基础（一）--python介绍
1. Python语言 1.1 编程语言语言是人类最重要的交际工具,是人类之间进行信息交换的主要表达方式. 编程语言是用来定义计算机程序的语言,用来向计算机发出指令. 1.2 Python语言 Py ...
BeautifulReport底层框架的解析以及html报告页面元素的更改
利用BeautifulReport 模块生成html报告 import BeautifulReport as br#引入包,之后设置一下别名 br = br.BeautifulReport(test_ ...
zabbix邮件脚本报警
#启动邮箱服务 systemctl start postfix.service #配置用户的邮箱发送邮件 vim /etc/mail.rc set from="xxx@xxx.com&quo ...
【代码审计】PHPCMS2008任意代码执行漏洞
很老的漏洞了,但很经典~ 在 phpcms2008/include/global.func.php eval 可以执行命令在这里我们看一下是谁调用跟进string2array函数 yp/web/ ...
es 分词器介绍
按照单词切分,不做处理 GET _analyze { "analyzer": "standard", "text": "2 run ...
cf 76 div2
传送门题意 t组样例 n个学生, x最多交换次数 a交换的第一个位置 b交换的第二个位置最多是交换n-1次,不懂的话可以找个数列自己模拟一下: 然后其他的就是abs(a-b)+x;两个位置之间的距 ...
map或者对象转换
map或者对象转换为具有相同字段的对象 List<Example> errorCodeExcelBeanList = JSONObject.parseArray(((JSONObject) ...
吴裕雄 python 神经网络——TensorFlow 花瓣分类与迁移学习（2）
import glob import os.path import numpy as np import tensorflow as tf from tensorflow.python.platfor ...
PW数据库ER图

easyui学习索引页

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

随机推荐

热门专题