一，效果图。

二，源代码。

<!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. C#中网站根路径、应用根路径、物理路径、绝对路径,虚拟路径的区别

    C#中网站根路径,请站点的最外一层 /表示 应用根路径 ~/表示,有时候C#程序路径并不是网站路径 物理路径 server.mappath("~/") 是指应用程序放在服务器硬盘的 ...

  2. <转>java编译问题：使用了未经检查或不安全的操作

    使用了未经检查或不安全的操作 在本人用editplus写java文件时碰到的问题.      源代码 import java.util.*; class collection{ public stat ...

  3. ThinkPHP第十九天(Ueditor高亮插件、扩展函数载入load、静态缓存)

    1.使用Ueditor编辑器,插入代码后,显示的时候高亮显示,需要调用Ueditor中的第三方插件third-party中的SyntaxHighlighter 调用方法: 引入CSS和JS文件,并调用 ...

  4. Java "double字符串转数字"

    1.int 表示数字的简单类型(值类型),double 表示数字的双精度类型(值类型),  而Integer和Double类型是一个引用的复杂类型 2.Integer.valueOf(String s ...

  5. 09-C语言数组

    目录: 一.使用xcode编辑工具 二.数组 三.数组遍历 四.多维数组 回到顶部 一.使用xcode编辑工具 1 打开xcode程序 2 创建一个项目 OSX -> Application - ...

  6. TexturePacker

    TexturePacker 可以免费申请,希望可以申请到.

  7. 针对PCB飞针测试快速有效的技巧

    测试探针通过多路传输(multiplexing)系统连接到驱动器(信号发生器.电源供应等)和传感器(数字万用表.频率计数器等)来测试UUT上的元件.当一个元件正在测试的时候,UUT上的其它元件通过探针 ...

  8. xen虚拟机操作整理

    1,登陆物理机器 2,查看物理机建立虚拟机的列表 root:~ # xm li Name ID Mem VCPUs State Time(s) Domain-0 0 49450 8 r----- 52 ...

  9. 使用jsonEditor打造一个复杂json编辑器

    最近研究一个web版的json编辑器,在github中搜索,发现了这个利器. https://github.com/jdorn/json-editor 几经研究,终于把该控件的大部分功能研究透彻. 发 ...

  10. 界面调试工具Reveal的使用介绍

    Reveal 注: 此处介绍Reveal,其中大部分内容来自于唐巧的<iOS开发进阶>一书,以此说明. 如何使用Reveal进行模拟器调试,只需进行以下三个步骤即可. 1. 创建.lldb ...