随机排列后按保存,则portal拖动后用json串保存其拖动后的位置到Cookie,刷新时即为拖动后的排列。
若随机排列则此时清空之前Cookie的排列信息,刷新时为默认的排列。
版本Ext 3.0
将附件解压至ext-3.0.0\examples\文件夹下的即可运行.
Ext.onReady(function() {
var tools = [{
id : 'gear',
handler : function() {
alert('?');
}
}, {
id : 'close',
handler : function(e, target, panel) {
panel.ownerCt.remove(panel, true);
}
}];
var pl = [{
id : '001',
title : 'Panel 1',
layout : 'fit',
tools : tools,
html : '3'
}, {
id : '002',
title : 'Panel 2',
tools : tools,
html : '2'
}, {
id : '003',
title : 'Panel 3',
tools : tools,
html : '3'
}, {
id : '004',
title : 'Panel 4',
tools : tools,
html : '4'
}, {
id : '005',
title : 'Panel 5',
tools : tools,
html : '5'
}, {
id : '006',
title : 'Panel 6',
tools : tools,
html : '6'
}];
var portal = new Ext.ux.Portal({
region : 'center',
margins : '35 5 5 0',
items : [{
columnWidth : .33,
style : 'padding:10px 0 10px 10px',
items : []
}, {
columnWidth : .33,
style : 'padding:10px 0 10px 10px',
items : []
}, {
columnWidth : .33,
style : 'padding:10px',
items : []
}],
tbar :['-',{
text:'随机排列并清除Cookie,刷新则回到默认',
iconCls : 'save',
handler :initRandom
},'-',
{
text:'保存排列到Cookie,刷新则保持当前状态',
iconCls : 'save',
handler :savePosition
}
]
});
var viewport = new Ext.Viewport({
layout : 'fit',
items : [portal]
});
function savePosition() {
var result = [];
var items = portal.items;
for (var i = 0; i < items.getCount(); i++) {
var c = items.get(i);
c.items.each(function(portlet) {
var o = {
id : portlet.getId(),
col : i
};
result.push(o); ;
});
}
setCookie(Ext.encode(result));
alert("以下json串保存到数据库即可记住各自位置:"+Ext.encode(result));
}
var cookieName = 'rankInfo';
function setCookie(info) {
var expiration = new Date((new Date()).getTime() + 15 * 60000);
document.cookie = cookieName + "=" + info + "; expires ="+ expiration.toGMTString();
}
function getCookie() {
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookieName);
if(cookie_pos!=-1){
cookie_pos += cookieName.length + 1;
var cookie_end = allcookies.indexOf(";", cookie_pos);
var rankInfo = allcookies.substring(cookie_pos, cookie_end);
return rankInfo;
}
return null;
}
function delCookie(){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(cookieName);
if(cval!=null) document.cookie= cookieName + "="+cval+";expires="+exp.toGMTString();
}
removeAll = function(){
var items = portal.items;
for (var i = 0; i < items.getCount(); i++) {
var c = items.get(i);
c.items.each(function(portlet){
c.remove(portlet);
});
}
}
init = function(rankInfo) {
for (var i = 0; i < rankInfo.length; i++) {
for (var j = 0; j < pl.length; j++) {
if (rankInfo[i].id == pl[j].id) {
//pl[j].height =400;//高度设置
portal.items.get(rankInfo[i].col).add(pl[j]);
}
}
}
portal.doLayout();
}
function initRandom(){
var rankRandom = [{"id" : "001","col" : parseInt(Math.random()*3)},
{"id" : "002","col" : parseInt(Math.random()*3)},
{"id" : "003","col" : parseInt(Math.random()*3)},
{"id" : "004","col" : parseInt(Math.random()*3)},
{"id" : "005","col" : parseInt(Math.random()*3)},
{"id" : "006","col" : parseInt(Math.random()*3)}];
removeAll();
delCookie();
init(rankRandom);
}
var rankInfoDefault=[{"id" : "001","col" : 0}, {"id" : "002","col" : 0}, {"id" : "003","col" : 0}, {"id" : "004","col" : 0}, {"id" : "005","col" : 0}, {"id" : "006","col" : 0}];
eval("var rankInfo_cookie ="+ getCookie());
init(rankInfo_cookie==null?rankInfoDefault:rankInfo_cookie);
});
分享到:
相关推荐
文件中包含拖动后保存位置,不保存位置的设计html文件,jQuery EasyUI Portal 保存拖动位置!绝对可用!不能用请留言!已应用到实际的开发中使用
Extjs Portal 拖拽并保存 多个实例,直接运行。
基于jquery实现的portal 拖拽实现布局调整,基于jquery实现的portal,不是easyui portal,和sortable
以用户为中心 实现信息的集中访问,利用portal 可以方便地将登录用户所需要的,来源各种渠道的信息集成在一个统一的页面模块之内,可拖拽,拖拽后可以记忆位置
jQuery拖拽布局插件Portal
该实例是easyui的扩展,点击index.html即可可以实现任意拖拽,
easyui可拖拽的portal 在Demo中的portal文件夹直接打开html文件就可以
jQuery拖拽布局弹窗Portal插件效果源码下载 jQuery拖拽布局弹窗Portal插件效果源码下载
jQuery拖拽布局插件Portal是一款支持自定义拖拽的jQuery Portal插件。
jQuery支持自定义拖拽布局插件Portal.zip
Portal开发Portal开发Portal开发Portal开发Portal开发Portal开发Portal开发Portal开发Portal开发
通过cookie保存portal的位置和grid的列的顺序,以及grid的列是否显示的保存 cookie 保存 portal grid的列 个人风格保存
The dictionary defines a portal as a grand or imposing door or entrance; hence, that picture on the cover. In this book, you will learn why the word portal has become a major buzzword in the world of ...
jQuery布局插件portal
Portal 在英语中是入口的意思。Portal 认证通常也称为Web 认证,一般将Portal 认证网站称为门户网站。
NC65portal开发文档
Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal Extjs portal
liferay portal 开发指南liferay portal 开发指南liferay portal 开发指南liferay portal 开发指南
Portal6新特性Portal6新特性Portal6新特性Portal6新特性Portal6新特性
portal.js 拖拽时记录位置,具体使用参照ext文档