一，效果图。

二，源代码。

<!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. Python 第三篇(上)：python文件基础操作、json模块、lambda、map、filter、reduce和函数位置参数

    python一切皆对象,linux一切皆文件,python操作文件是很常见的O/I操作,其内置来open()函数可以完成文件的基本操作: 一:使用内置open()函数操作文件,基本语法如下: with ...

  2. 简单的Coretext 图文混排

    在很多新闻类或有文字展示的应用中现在都会出现图文混排的界面例如网易新闻等,乍一看去相似一个网页,其实这样效果并非由UIWebView 加载网页实现.现在分享一种比较简单的实现方式 iOS sdk中为我 ...

  3. c语言各类问题 代码

    定义一个结构体,有两个成员变量,一个整型的n,一个字符型的c,利用结构体类型声明一个具有5个元素的数组,并随机初始化,根据成员变量n进行从小到大排序,然后输出 冒泡排序然后 在输出结构体#includ ...

  4. 读取IOS的相应路径

    //    IOS相应路径 NSString* bundlePath = [[NSBundle mainBundle] bundlePath]; NSLog(@"bundlePath = % ...

  5. 读书笔记: nodejs API 参考

    >> bufferBuffer对象是全局对象Buffer支持的编码方式:ascii, utf8, base64, binarynew Buffer(size)new Buffer(arra ...

  6. C/C++中的内存管理

    一．内存的分配方式 1. 程序代码区 2. 静态数据区 3. 动态数据区 二．动态内存 1. 在栈上创建的内存 2. 从堆上分配的内存 3. 小结 三．指针与内存 1. 操作内存 2. 指针与数组 3 ...

  7. Linux系统服务 1 ---- rSyslog日志服务

    1 日志 1 日志是系统用来记录系统运行时候的一些相关的信息的纯文本文件 2 日志的目的是保存相关程序的运行状态,错误信息等.为了对系统进行分析,保存历史记录以及在出现错误的时候发现分析错误使用 3 ...

  8. Modular Inverse(模逆元，扩展欧几里德)

    Modular Inverse Time Limit: 2 Seconds      Memory Limit: 65536 KB The modular modular multiplicative ...

  9. poj2125Destroying The Graph(最小割+输出方案)

    题目请戳这里 题目大意:给一张有向图,现在要选择一些点,删掉图中的所有边.具体操作为:选择点i,可以选择删除从i出发的所有有向边或者进入i的所有有向边,分别有个代价ini和outi,求最小的代价删掉所 ...

  10. Linux-中断和中断处理

    1.中断 #中断使得硬件得以发出通知给处理器,本质上是一种电信号 #中断随时能够产生.内核随时会被打断 #不同设备的中断不同,每一个中断都通过一个唯一的数字标识.称为IRQ(中断请求) 2.中断处理程 ...