一，效果图。

二，源代码。

<!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. 5.7.1.2 eval() 方法

    现在我们介绍最后一个方法,这大概是ECMAScript语言中最强大的一个方法:eval().eval()方法就想一个完整的ECMAScript解析器,它只接受一个参数,即要执行的ECMAScript( ...

  2. 关于jq操作table下多个type=radio的input的选中

    假如有2个table: <table id="table1" border="0"> <tr> <td><input ...

  3. Java 日期字符串与日期类型转换

    1.SimpleDateFormat.format 把日期类型转化到指定格式字符串 public static String convToString(Calendar cld,String temp ...

  4. A Byte of Python （1）安装和运行

    有两种方式构建软件设计:一种是把软件做得很简单以至于明显找不到缺陷:另一种是把它做得很复杂以至于找不到明显的缺陷. ——C.A.R. Hoare 获得人生中的成功需要的专注与坚持不懈多过天才与机会. ...

  5. Python 爬取CSDN博客频道

    初次接触python,写的很简单,开发工具PyCharm,python 3.4很方便 python 部分模块安装时需要其他的附属模块之类的,可以先 pip install wheel 然后可以直接下载 ...

  6. Firefox 备份

    参考http://mozilla.com.cn/post/32327/ 火狐的地址栏中输入about:support点击“打开所在文件夹”按钮,会弹出一个资源管理器,并且定位到你当前的Profile文 ...

  7. 《刺杀金正恩》1080p全高清无水印，附中文字幕 bt种子下载，附字母（百度网盘/360云盘）

    <刺杀金正恩>1080p全高清无水印,附中文字幕下载(百度网盘/360云盘) 种子和字幕下载地址: thunder://QUFlZDJrOi8vfGZpbGV8JUU5JTg3JTg3JU ...

  8. DC游戏《斑鸠》原创赏析[转载]

    游戏背景:      凤来之国本来只是边远地区的一个小国.但现在他们却自称为得到“神之力”的“神通者”,在“选民思想”“和平统一”之类的名义下开始了对各地的武力侵略.      事情的起因是因为凤来之 ...

  9. WebAppScaner

    https://www.ohloh.net/p/simple-scan/ https://code.google.com/p/skipfish/ http://code.google.com/p/wa ...

  10. 使用HISTCONTROL强制history忽略某条特定命令

    http://www.linuxnote.org/mandatory-use-of-histcontrol-ignore-a-certain-specific-command-history.html ...