jQuery拖拽布局插件Portal js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery拖拽布局插件Portal js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery拖拽布局插件Portal</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-fallr-1.3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/ui/ui.core.min.js"></script>
<script type="text/javascript" src="js/ui/ui.sortable.min.js"></script>
<script type="text/javascript" src="js/jquery-fallr-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/Jh.js"></script>
<script>
$(document).ready(function () {	
	var DATA = {
		'appL' : {
			'avatar':'头像信息',
			'comment':'留言簿',
			'doing':'最新动态',
		},
		'appM' :{
			'blog':'blog',
			'profile':'个人资料',
			'spaceinfo':'空间介绍',
			'friends':'我的好友'
		},
		'appR' : {
			'gallery':'我的相册',
			'visitors':'最近访客',
			'thread':'我的话题'
		}
	}	
	Jh.fn.init(DATA);
	Jh.Portal.init(DATA);
});

</script>
</head>
<body>
</body>
</html>

JS代码(Jh.js):

var Jh={
	Config:{
	tableCls:"form-list",tdCls:"form-text",tdCls2:"single",ulCls:"tag-list",layCls:"layout-list",min:"min",mintext:"\u6536\u8d77",max:"max",maxtext:"\u5c55\u5f00",close:"close",closetext:"\u5173\u95ed",refreshtext:"\u5237\u65b0",refresh:"refresh",_groupItemContent:"itemContent",_groupItemHead:"itemHeader",_groupWrapperClass:"groupWrapper",_groupItemClass:"groupItem"}
}
;
	Jh.Layout=function(){
	return{
	location:{
	left:"portal_l",center:"portal_m",right:"portal_r"}
,locationId:{
	left:"#portal_l",center:"#portal_m",right:"#portal_r"}
,layoutCss:{
	"0":"1:3",1:"3:1",2:"1:2:1",3:"1:1:2",4:"2:1:1",5:"1:1:1"}
,layoutText:{
	"0":"w250 w750 wnone",1:"w750 w250 wnone",2:"w250 w500 w250",3:"w250 w250 w500",4:"w500 w250 w250",5:"w250 w250 w250"}
}
}
();
	Jh.Util={
	format:function(a,b){
	for(var c in b)a=a.replace(RegExp("{
	"+c+"}
","g"),b[c]);
	return a}
,refresh:function(){
	$("#"+Jh.Layout.left,"#"+Jh.Layout.center,"#"+Jh.Layout.right).sortable("refresh")}
,toBody:function(a){
	$("body").append(a)}
}
;
	Jh.fn=function(a){
	return a={
	init:function(b){
	a._ele={
}
;
	a._create();
	a._createWrap(b);
	a._bindEvent()}
,_create:function(){
	var b=$("<div id='header'/>");
	a.box=b;
	Jh.Util.toBody(b)}
,_createWrap:function(b){
	var c=a._createTable(Jh.Config.tableCls);
	a._ele.table=c;
	a._createModuleList(b);
	a._createActionButton();
	a._addPanel(c)}
,_createTable:function(b){
	b=$("<table/>").addClass(b);
	$("<tbody/>").append(a._createLayoutTr()).append(a._createBaseTr()).append(a._createActionTr()).appendTo(b);
	return b}
,_createBaseTr:function(){
	var b=a._createTd(Jh.Config.tdCls2),c=$("<tr>").append(a._createTd(Jh.Config.tdCls,"\u529f\u80fd\u6a21\u5757\u8bbe\u7f6e\uff1a")).append(b);
	a._ele.mtd=b;
	return c}
,_createActionTr:function(){
	var b=a._createTd(Jh.Config.tdCls2),c=$("<tr>").append(a._createTd(Jh.Config.tdCls)).append(b);
	a._ele.atd=b;
	return c}
,_createLayoutTr:function(){
	var b=a._createTd(Jh.Config.tdCls2);
	$("<div/>").addClass(Jh.Config.layCls).append(a._createA("1:3")).append(a._createA("3:1")).append(a._createA("1:1:2")).append(a._createA("1:2:1")).append(a._createA("2:1:1")).append("<a href='javascript:void(0);
	' class='active' rel='1:1:1'>\u9ed8\u8ba4</a>").appendTo(b);
	var c=$("<tr>").append(a._createTd(Jh.Config.tdCls,"\u5e03\u5c40\u8bbe\u7f6e\uff1a")).append(b);
	a._ele.layoutTd=b;
	return c}
,_createModuleList:function(b){
	var c=$("<ul/>").addClass(Jh.Config.ulCls);
	a._createLis(b.appL,c);
	a._createLis(b.appM,c);
	a._createLis(b.appR,c);
	a._ele.ul=c;
	c.appendTo(a._ele.mtd)}
,_createActionButton:function(){
	var b=$("<a class='button b' href='#' >\u6dfb\u52a0\u6a21\u5757</a>"),c=$("<a class='button b' href='#' >\u4fdd\u5b58\u914d\u7f6e</a>");
	a._ele.atd.append(b).append(c);
	a._bindAdd(b);
	a._bindSave(c)}
,_createLis:function(b,c){
	$.each(b,function(b,d){
	c.append(a._createLi(b,d))}
)}
,_createA:function(a){
	return $("<a href='javascript:void(0);
	' rel='"+a+"'>"+a+"</a>")}
,_createLi:function(a,c){
	return $("<li/>").append("<a href='#' rel='"+a+"'>"+c+"</a>").append("<span class='ok'></span>")}
,_createTd:function(a,c){
	var e=$("<td>").addClass(a);
	void 0!=c&&e.text(c);
	return e}
,_addPanel:function(b){
	a.box.append(b)}
,_bindAdd:function(b){
	b.click(function(){
	$.fallr("show",{
	buttons:{
	button1:{
	text:"\u786e\u5b9a",onclick:function(){
	var b=$(this).children("form"),e=b.children("#modulename").val(),d=b.children("#modulekey").val(),b=b.children("input[name='modulelayout']:checked").val(),b="left"==b?$("#"+Jh.Layout.location.left):"center"==b?$("#"+Jh.Layout.location.center):$("#"+Jh.Layout.location.right);
	a._ele.ul.append(a._createLi(d,e));
	b.append(Jh.Portal._createPortalOne(d,e));
	$.fallr("hide")}
}
,button2:{
	text:"\u53d6\u6d88"}
}
,content:'<form style="margin-left:20px"><p>\u6a21\u5757\u540d\uff1a</p><input type="text" size="15" id="modulename" /><p>\u6a21\u5757Code\uff1a</p><input type="text" size="15" id="modulekey" /><p>\u6a21\u5757\u4f4d\u7f6e\uff1a</p>\u5de6:<input type="radio" name="modulelayout" checked="checked" value="left"/>&nbsp&nbsp\u4e2d:<input type="radio" name="modulelayout" value="center"/>&nbsp&nbsp\u53f3:<input type="radio" name="modulelayout" value="right"/></form>',icon:"add",position:"center"}
)}
)}
,_bindSave:function(a){
	a.click(function(){
	var a=$("#"+Jh.Layout.location.left).sortable("toArray"),b=$("#"+Jh.Layout.location.center).sortable("toArray"),d=$("#"+Jh.Layout.location.right).sortable("toArray"),f="";
	$("."+Jh.Config.layCls+" a").each(function(){
	$(this).hasClass("active")&&(f=$(this).attr("rel"))}
);
	"1:1:1"==f&&(f="\u9ed8\u8ba4");
	$.fallr("show",{
	content:"<p>left:["+a+"]</p><p>center:["+b+"]</p><p>right["+d+"]</p><p>\u5f53\u524d\u5e03\u5c40:"+f+"</p>",position:"center"}
)}
)}
,_bindEvent:function(){
	a._moduleLiClick();
	a._layoutAClick()}
,_moduleLiClick:function(){
	$("."+Jh.Config.ulCls+" li").live("click",function(){
	var a=$(this),c=a.find("a").attr("rel"),c=$("#"+c),a=a.find(".ok");
	a.is(":visible")?(a.hide(),c.hide()):(a.show(),c.show());
	Jh.Util.refresh()}
)}
,_layoutAClick:function(){
	$("."+Jh.Config.layCls+" a").click(function(){
	var b=$(this),c=b.attr("rel");
	a._ToLayout(c);
	b.addClass("active").siblings().removeClass("active")}
)}
,_ToLayout:function(a){
	var c=Jh.Layout.layoutText,e=Jh.Layout.locationId,d=0,f="";
	$.each(Jh.Layout.layoutCss,function(c,j){
	a==j&&(d=c)}
);
	$.each(e,function(a,b){
	var g=$(b),h=c[d].split(/\s+/);
	switch(a){
	case "left":a=0;
	break;
	case "center":a=1;
	break;
	case "right":a=2}
"wnone"==h[a]&&(f=g.sortable("toArray"),$.each(f,function(a,b){
	$("#"+Jh.Layout.location.left).append($("#"+b))}
),g.empty());
	g.removeClass("w250 w750 w500 wnone").addClass(h[a])}
)}
}
}
();
	Jh.Portal=function(a){
	var b="<div id='"+Jh.Layout.location.left+"' class='"+Jh.Config._groupWrapperClass+" w250'/>",c="<div id='"+Jh.Layout.location.center+"' class='"+Jh.Config._groupWrapperClass+" w250'/>",e="<div id='"+Jh.Layout.location.right+"' class='"+Jh.Config._groupWrapperClass+" w250'/>",d="<div id='{
	key}
' class='"+Jh.Config._groupItemClass+"'/>",f="<div class='"+Jh.Config._groupItemHead+"'><h3>{
	name}
</h3></div>",i="<div class='"+Jh.Config._groupItemContent+"'/>";
	return a={
	init:function(b){
	a._create();
	a._bindData(b);
	a._bindEvent()}
,_create:function(){
	a.box=$("<div id='portal'></div>");
	a._elements={
}
;
	a._createModulesWrap();
	Jh.Util.toBody(a.box)}
,_bindData:function(b){
	$.each(b,function(b,c){
	a._createPortal(b,c)}
)}
,_createModulesWrap:function(){
	a._elements.m_l=$(b);
	a._elements.m_m=$(c);
	a._elements.m_r=$(e);
	a._addPanel(a._elements.m_l);
	a._addPanel(a._elements.m_m);
	a._addPanel(a._elements.m_r)}
,_addPanel:function(b){
	a.box.append(b)}
,_createPortal:function(b,c){
	var d;
	switch(b){
	case "appL":d=a._elements.m_l;
	break;
	case "appM":d=a._elements.m_m;
	break;
	case "appR":d=a._elements.m_r}
$.each(c,function(b,c){
	d.append(a._createPortalOne(b,c))}
)}
,_createPortalOne:function(b,c){
	var e=a._createItemHeader(c),f=a._createItemContent();
	return $(Jh.Util.format(d,{
	key:b}
)).append(e).append(f)}
,_createItemHeader:function(b){
	var b=$(Jh.Util.format(f,{
	name:b}
)),c=a._createDiv("action").hide().appendTo(b);
	a._createA(Jh.Config.refresh,Jh.Config.refreshtext,!0).appendTo(c);
	a._createA(Jh.Config.min,Jh.Config.mintext,!0).appendTo(c);
	a._createA(Jh.Config.max,Jh.Config.maxtext,!1).appendTo(c);
	a._createA(Jh.Config.close,Jh.Config.closetext,!0).appendTo(c);
	b.hover(function(){
	$(this).find(".action").show()}
,function(){
	$(this).find(".action").hide()}
);
	return b}
,_createItemContent:function(){
	var a=$(i);
	$("<ul style='width:250px;
	'><li>xiaofanV587</li><li>xiaofanV587</li><li>xiaofanV587</li><li>xiaofanV587</li></ul>").appendTo(a);
	return a}
,_createDiv:function(a){
	return $("<div/>").addClass(a)}
,_createA:function(a,b,c){
	a=$("<a href='javascript:void(0);
	' class='"+a+"' title='"+b+"'/>");
	c||a.hide();
	return a}
,_eventMin:function(){
	$("."+Jh.Config.min).live("click",function(){
	var a=$(this),b=a.parent().parent().parent();
	b.find("."+Jh.Config._groupItemContent).hide();
	b.find("."+Jh.Config.max).show();
	a.hide()}
)}
,_eventMax:function(){
	$("."+Jh.Config.max).live("click",function(){
	var a=$(this),b=a.parent().parent().parent();
	b.find("."+Jh.Config._groupItemContent).show();
	b.find("."+Jh.Config.min).show();
	a.hide()}
)}
,_eventRemove:function(){
	$("."+Jh.Config.close).live("click",function(){
	$(this).parent().parent().parent().fadeOut("500",function(){
	var a=$(this),b=a.attr("id"),b=$(".tag-list").find("a[rel='"+b+"']");
	a.remove();
	b.parent().remove()}
)}
)}
,_eventRefresh:function(){
	$("."+Jh.Config.refresh).live("click",function(){
	$(this).parent().parent().parent().find("ul").empty().append("<li>\u5237\u65b0\u4e86</li>")}
)}
,_eventSortable:function(){
	$("."+Jh.Config._groupWrapperClass).sortable({
	connectWith:"."+Jh.Config._groupWrapperClass,opacity:"0.6",dropOnEmpty:!0}
).disableSelection()}
,_bindEvent:function(){
	a._eventSortable();
	a._eventRefresh();
	a._eventRemove();
	a._eventMax();
	a._eventMin()}
}
}
();

CSS代码(main.css):

html{height:100%;}
body{font-size:12px;margin:0;padding:0;font:12px/1.8 Tahoma,Geneva,"微软雅黑","宋体";}
ul{list-style:none outside none;}
a{color:#9F9F9F;text-decoration:none;outline:medium none;}
p{line-height:21px;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
input,textarea{-moz-transition:border 0.2s linear 0s,box-shadow 0.2s linear 0s;box-shadow:0 1px 3px rgba(0,0,0,0.1) inset;}
input:focus,textarea:focus{border-color:rgba(82,168,236,0.8);box-shadow:0 1px 3px rgba(0,0,0,0.1) inset,0 0 8px rgba(82,168,236,0.6);outline:0 none;}
#portal{margin-top:50px;margin-left:50px;}
#header{margin-left:20px;}
#header .form-text{line-height:26px;padding-top:20px;padding-right:0;}
.form-list{margin:10px;}
.form-list td{padding:5px;vertical-align:top;}
.form-text{text-align:right;}
.form-list .s-gray{margin-top:5px;}
.form-list .s-require{margin-right:5px;}
.form-list .s-gray{color:#666666;}
.form-list .layout-list{line-height:20px;padding-top:20px;padding-right:0;vertical-align:top;}
.layout-list a{padding:5px;font-size:14px;}
.layout-list a:hover{color:#FF6600;}
.layout-list .active{color:#FF6600;font-weight:bold;}
.w250{width:250px;}
.w300{width:300px;}
.w500{width:500px;}
.w750{width:750px;}
.wnone{display:none;}
.groupWrapper{float:left;margin-right:1px;margin-left:10px;min-height:400px;}
.groupItem{border-radius:2px 2px 2px 2px;box-shadow:1px 2px 5px #CCCCCC;border:1px solid #DDDDDD;margin-bottom:20px;width:100%;}
.groupItem .itemHeader{background:none repeat scroll 0 0 #F2F2F2;border-radius:5px 5px 0 0;border-bottom:1px solid #dddddd;color:#888888;font-size:16px;font-weight:bold;height:25px;line-height:25px;padding:5px 10px;cursor:move;position:relative;}
.groupItem .itemHeader a{margin:10px 0 0;padding:1px;top:0;font-size:11px;font-weight:normal;position:absolute;text-decoration:none;-moz-user-select:none;float:left;width:16px;height:16px;}
.close{background:url("../images/action-close.png") no-repeat scroll 0 0 transparent;right:0;}
.refresh{background:url("../images/action-refresh.png") no-repeat scroll 0 0 transparent;right:32px;}
.max{background:url("../images/action-max.png") no-repeat scroll 0 0 transparent;right:16px;}
.min{background:url("../images/action-min.png") no-repeat scroll 0 0 transparent;right:16px;}
.groupItem .itemHeader h3{color:#555555;font:bold 14px/28px arial;margin:0;}
.groupItem .itemContent{color:#000000;font-size:12px;line-height:28px;position:relative;}
.ui-sortable-placeholder{border:2px dotted #9F9F9F;visibility:visible !important;}
.ui-sortable-placeholder *{visibility:hidden;}
.portlet{background-color:#FFFFCC;cursor:move;}
.tag-content{overflow:hidden;width:650px;}
.mb10{margin-bottom:10px;}
.layout-list,.theme-list{padding-top:15px;font-size:15px;}
.layout-list a:hover{color:#FF6600;}
.tag-list{height:35px;width:400px;padding-left:0px;}
.tag-list li{display:inline;float:left;margin-bottom:15px;margin-right:9px;position:relative;}
.tag-list li a{-moz-border-bottom-colors:none;-moz-border-image:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#E4E4E4 #DDDDDD #D7D7D7;border-radius:3px 3px 3px 3px;border-style:solid;border-width:1px;box-shadow:0 0 1px rgba(0,0,0,0.1);float:left;line-height:28px;padding:0 5px 0 5px;white-space:nowrap;cursor:pointer;position:relative;}
.tag-list li a:hover{box-shadow:2px 2px 5px #CCCCCC;}
.tag-list li a i{left:3px;top:8px;}
.tag-list li a .add{background:url("../images/addddd.png") no-repeat transparent;height:16px;position:absolute;width:16px;}
.tag-list .ok{background:url("../images/ok.png") no-repeat transparent;top:-5px;right:-5px;height:16px;width:16px;position:absolute;}
.button{border-radius:3px 3px 3px 3px;cursor:pointer;display:inline-block;margin-right:10px;overflow:visible;padding:5px 10px;position:relative;text-decoration:none;text-align:center;text-shadow:1px 1px 0 #FFFFFF;white-space:nowrap;}
.b{background-color:#ECECEC;background-image:-moz-linear-gradient(#F4F4F4,#ECECEC);border:1px solid rgba(0,0,0,0.25);}
.b:hover,.b:focus{background-color:#3C8DDE;background-image:-moz-linear-gradient(#599BDC,#3072B3);border-color:#3072B3 #3072B3 #2A65A0;color:#FFFFFF;cursor:default;text-decoration:none;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);}
.p{background:-moz-linear-gradient(center top,#FFF6E1,#FFE9B8 100%) repeat scroll 0 0 transparent;border:1px solid #8A745A;box-shadow:0 0 5px rgba(0,0,0,0.3);color:#54320B;padding:0 15px;position:relative;text-align:center;}
.p:hover{background:-moz-linear-gradient(center top,#FFE9B8,#FBCE95 100%) repeat scroll 0 0 transparent;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)