一，效果图。

二，源代码。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Saving Portal State - jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.portal.js"></script>
</head>
<body>
<h2>EasyUI Portal</h2>
<p>This example shows how to build a simple portal system with floating panels.</p>
<div id="pp" style="width:700px;position:relative">
<div style="width:30%;"></div>
<div style="width:40%;"></div>
<div style="width:30%;"></div>
</div>
<style type="text/css">
.demo-rtl .portal-column-left{
padding-left: 10px;
padding-right: 10px;
}
.demo-rtl .portal-column-right{
padding-left:10px;
padding-right: 0;
}
</style>
<script type="text/javascript" src="/easyui/jquery.portal.js"></script>
<script type="text/javascript">
var panels = [
{id:'p1',title:'Tutorials',height:200,collapsible:true,href:'http://www.jeasyui.com/demo/main/portal_p1.html'},
{id:'p2',title:'Clock',href:'http://www.jeasyui.com/demo/main/portal_p2.html'},
{id:'p3',title:'PropertyGrid',height:200,collapsible:true,closable:true,href:'http://www.jeasyui.com/demo/main/portal_p3.html'},
{id:'p4',title:'DataGrid',height:200,closable:true,href:'http://www.jeasyui.com/demo/main/portal_p4.html'},
{id:'p5',title:'Searching',href:'http://www.jeasyui.com/demo/main/portal_p5.html'},
{id:'p6',title:'Graph',href:'http://www.jeasyui.com/demo/main/portal_p6.html'}
];
function getCookie(name){
var cookies = document.cookie.split(';');
if (!cookies.length) return '';
for(var i=0; i<cookies.length; i++){
var pair = cookies[i].split('=');
if ($.trim(pair[0]) == name){
return $.trim(pair[1]);
}
}
return '';
}
function getPanelOptions(id){
for(var i=0; i<panels.length; i++){
if (panels[i].id == id){
return panels[i];
}
}
return undefined;
}
function getPortalState(){
var aa = [];
for(var columnIndex=0; columnIndex<3; columnIndex++){
var cc = [];
var panels = $('#pp').portal('getPanels', columnIndex);
for(var i=0; i<panels.length; i++){
cc.push(panels[i].attr('id'));
}
aa.push(cc.join(','));
}
return aa.join(':');
}
function addPanels(portalState){
var columns = portalState.split(':');
for(var columnIndex=0; columnIndex<columns.length; columnIndex++){
var cc = columns[columnIndex].split(',');
for(var j=0; j<cc.length; j++){
var options = getPanelOptions(cc[j]);
if (options){
var p = $('<div/>').attr('id',options.id).appendTo('body');
p.panel(options);
$('#pp').portal('add',{
panel:p,
columnIndex:columnIndex
});
}
}
}

}

$(function(){
$('#pp').portal({
onStateChange:function(){
var state = getPortalState();
var date = new Date();
date.setTime(date.getTime() + 24*3600*1000);
document.cookie = 'portal-state='+state+';expires='+date.toGMTString();
}
});
var state = getCookie('portal-state');
if (!state){
state = 'p1,p2:p3,p4:p5,p6'; // the default portal state
}
addPanels(state);
$('#pp').portal('resize');
});
</script>
</body>
</html>

portal---easyui的更多相关文章

  1. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽(Ⅵ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 构建Web界面>,主要介绍系统界面布局.导出数据等. 本篇将介绍首页Portal界面拖拽. 一.首页Portal界面拖拽 ...

  2. EasyUI portal自定义小图标，不是用js方式加载

    <script src="~/Scripts/jquery.portal.js"></script> <script> $(function ( ...

  3. jQuery EasyUI Portal 保存拖动位置，仿谷歌DashBoard效果的

    仿照谷歌http://www.google.com/ig?hl=zh-CN中的效果,本文档中包含了拖动后保存位置至Cookie中以及拖动后不保存位置的html文件效果,文档结构

  4. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划安排(Ⅶ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽>,主要介绍首页随客户喜好安排区块位置,更好的实现用户体验. 这两天将项目中施工计划管理归纳总结 ...

  5. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   ...

  6. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(6)- EF上下文实例管理 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    ( ...

  7. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框 ...

  8. jQuery EasyUI window窗口使用实例

    需求:点击[增加]按钮,弹出窗口,并对所有输入项内容进行校验,校验通过就提交给后台的action处理,没有通过校验就弹窗提示.  <!DOCTYPE html> <html> ...

  9. 雷林鹏分享：jQuery EasyUI 扩展

    jQuery EasyUI 扩展 Portal(制作图表.列表.球形图等) 数据网格视图(DataGrid View) 可编辑的数据网格(Editable DataGrid) 可编辑的树(Editab ...

  10. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

随机推荐

  1. RAW模板命名规范

    国有国法,家有家规,任何一种开发都要有自己规范,RAW模板也一样,这个文章来介绍一下RAW模板命名的规范. 格式: 开发者或组织_描述词_名称 开发者或组织:如know或自己的组织名 描述词:c-&g ...

  2. hdu 2874Connections between cities LCA

    题目链接 给n个城市, m条边, q个询问, 每个询问, 输出城市a和b的最短距离, 如果不联通, 输出not connected. 用并查集判联通, 如果不连通, 那么两个联通块之间加一条权值很大的 ...

  3. poj 2398 计算几何

    #include <iostream> #include<cstdio> #include<cstring> #include <algorithm> ...

  4. 国内外主流BI厂商对比

    BI(Business Intelligence),即商业智能或者商务智能,它是一套完整的解决方案,用来将企业中现有的数据进行有效的整合,快速准确的提供报表并提出决策依据,帮助企业做出明智的业务经营决 ...

  5. struts之拦截器

    拦截器是为了让一些自己不希望发生的事情进行预防.以下我说一下struts自己定义拦截器. 以下我贴下struts.xml里的自定义的拦截器: <package name="my&quo ...

  6. JavaScript推断E-mail地址是否合法

    编写自己定义的JavaScript函数checkEmail(),在该函数中首先推断E-mail文本框是否为空,然后在应用正則表達式推断E-mail地址是否合法,假设不合法提示用户 <script ...

  7. Objective-c 协议(protocol)

    协议的作用类似地C++中对抽象基类的多重继承.类似于Java中的接口(interface)的概念.   协议是多个类共享方法的列表,协议中列出的方法在本类中并没有相应实现,而是别的类来实现这些方法. ...

  8. 学习MVC遇到的问题

    修改电脑上的DNS配置: Opendns 首选DNS服务器和备用DNS服务器分别设置为208.67.222.222和208.67.220.220 google的8.8.8.8 首选DNS服务器和备用D ...

  9. HttpContext的解释意义

    在.ashx中,我们HttpContext这个词,到底是什么意思?下面给大家说说 HttpContext 类:封装有关个别 HTTP 请求的所有 HTTP 特定的信息. 在处理请求执行链的各个阶段中, ...

  10. quartz搭建与应用

    1.添加依赖 依赖包括Quartz和logback <dependencies> <dependency> <groupId>org.quartz-schedule ...