一，效果图。

二，源代码。

<!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. javascript模块化编程(转载)

    Javascript 模块化编程 作者: 阮一峰  发布时间: 2013-01-08 18:04  阅读: 7632 次  推荐: 40   原文链接   [收藏]   随着网站逐渐变成"互 ...

  2. monkeyrunner环境搭建

    对android世界小白白的人儿,弄个monkeyrunner环境吭哧哧的费了大半天的劲,没办法,因为实在是对这方面一窍不通,名词都是一个个百度才略懂一二,既然这么辛苦费劲的才能弄好,怎么也得记录下来 ...

  3. 射频识别技术漫谈(15)——Mifare1的安全性及7字节序列号M1卡

    Mifare1的安全性主要指卡中数据的安全性,要求卡中的数据不能被非法修改或窃听.数据的安全性主要使用加密技术来保证,加密技术有两个关键因素:加密算法和密钥.现代加密技术的一大特点是加密算法公开,如果 ...

  4. Inlay技术要求

    物理特性: 项目 要求内容 备考 基准值 公差 INLAY尺寸 A(长) 480mm ±0.5mm B(宽) 380mm ±0.5mm 线圈位置 C(天地位置) 16.05mm ±0.2mm D(左右 ...

  5. 谁有SMI-S Provider的一些源码，能参考一下吗

    我要用OpenPegasus根据SMI-S规范来写provider,不知道如何下手啊,求高手指点

  6. leetCode 24. Swap Nodes in Pairs (双数交换节点) 解题思路和方法

    Swap Nodes in Pairs  Given a linked list, swap every two adjacent nodes and return its head. For exa ...

  7. epoll相关

    1) 能不能给一个使用epoll相关API进行IO监控的示例?在<<epoll学习笔记>>中有一个简单的示例说明epoll相关API的使用, 但是这个示例是非常简单的, 它仅仅 ...

  8. Html.raw(转帖)

    Razor 在JS中嵌入后台变量 HTML 中定义全局变量 @{int CurrentUserId =ViewBag.CurrentUserId;} JS中取值方式var CurrentUserId ...

  9. Oracle更改数据库文件大小、实时增加文件容量

    --查询数据库文件路径.表空间.大小等 select * from dba_data_files ; --EAST.DBF数据库文件自动扩展20M,可无限扩展 alter database dataf ...

  10. 再谈协方差矩阵之主成分分析PCA

    上次那篇文章在理论层次介绍了下协方差矩阵,没准很多人觉得这东西用处不大,其实协方差矩阵在好多学科里都有很重要的作用,比如多维的正态分布,再比如今天我们今天的主角——主成分分析(Principal Co ...