easyui portal可拖拽

最新推荐文章于 2022-05-06 14:04:15 发布

黄宝康

最新推荐文章于 2022-05-06 14:04:15 发布

阅读量569

点赞数 1

分类专栏： easyui-api 文章标签： easyui portal可拖拽

本文链接：https://blog.csdn.net/huangbaokang/article/details/103524353

版权

easyui-api 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<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">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/portal.css">
	<style type="text/css">
		.title{
			font-size:16px;
			font-weight:bold;
			padding:20px 10px;
			background:#eee;
			overflow:hidden;
			border-bottom:1px solid #ccc;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script type="text/javascript" src="jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery.portal.js"></script>
	<script type="text/javascript">
		var panels = [
			{id:'p1',title:'Tutorials',height:200,collapsible:true,href:'p1.html'},
			{id:'p2',title:'Clock',href:'p2.html'},
			{id:'p3',title:'PropertyGrid',height:200,collapsible:true,closable:true,href:'p3.html'},
			{id:'p4',title:'DataGrid',height:200,closable:true,href:'p4.html'},
			{id:'p5',title:'Searching',href:'p5.html'},
			{id:'p6',title:'Graph',href:'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({
				fit:true,
				border:false,
				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>
</head>
<body class="easyui-layout">
	<div region="north" class="title" border="false">
		jQuery EasyUI Portal - Saving Portal State
	</div>
	<div region="center" border="false">
		<div id="pp" style="position:relative">
			<div style="width:30%;">
			</div>
			<div style="width:40%;">
			</div>
			<div style="width:30%;">
			</div>
		</div>
	</div>
</body>
</html>

黄宝康

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
easyui portal可拖拽

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="jquery,ui,easy,easyui,web"> <meta name="description" cont...
复制链接

扫一扫