jquery代码
var Jh = {
Config:{/ / CLASS样式配置tableCls: "form-list",
tdCls: "form-text",
tdCls2: "single",
ulCls: "tag-list",
layCls: "layout-list",
min: "min",
mintext: "收起",
max: "max",
maxtext: "展开",
close: "close",
closetext: "关闭",
refreshtext: "刷新",
refresh: "refresh",
_groupItemContent: "itemContent",
_groupItemHead: "itemHeader",
_groupWrapperClass: "groupWrapper",
_groupItemClass: "groupItem"
}
};Jh.Layout = function(me) {
var _left = "portal_l",
_center = "portal_m",
_right = "portal_r";
return me = {
location: { //三列容器
left: _left,
center: _center,
right: _right
},
locationId: {
left: "#" + _left,
center: "#" + _center,
right: "#" + _right
},
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(str, model) { //格式化指定键值的模板
for (var k in model) {
var re = new RegExp("{" + k + "}", "g");
str = str.replace(re, model[k])
}
return str
},
refresh: function() { //刷新3个布局
$("#" + Jh.Layout.left, "#" + Jh.Layout.center, "#" + Jh.Layout.right).sortable('refresh');
},
toBody: function(o) { //往Body添加对象
$("body").append(o);
}
};Jh.fn = function(me) { //功能区
return me = {
init: function(data) { //初始化
me._ele = {};
me._();
me._Wrap(data);
me._bindEvent();
},
_: function() { //创建自己
var _box = $("<div id='header'/>");
me.box = _box;
Jh.Util.toBody(_box); //往Body里添加自己
},
_Wrap: function(d) { //创建外层容器
var _table = me._Table(Jh.Config.tableCls);
me._ele.table = _table me._ModuleList(d);
me._ActionButton();
me._addPanel(_table);
},
_Table: function(clsName) { //创建表格
var _t = $("<table/>").addClass(clsName);
$("<tbody/>").append(me._LayoutTr()).append(me._BaseTr()).append(me._ActionTr()).appendTo(_t);
return _t;
},
_BaseTr: function() { //创建功能模块tr
var _td = me._Td(Jh.Config.tdCls2),
_tr = $("<tr>").append(me._Td(Jh.Config.tdCls, "功能模块设置：")).append(_td);
me._ele.mtd = _td;
return _tr;
},
_ActionTr: function() { //创建按钮tr
var _td = me._Td(Jh.Config.tdCls2),
_tr = $("<tr>").append(me._Td(Jh.Config.tdCls)).append(_td);
me._ele.atd = _td;
return _tr;
},
_LayoutTr: function() { //创建布局
var _td = me._Td(Jh.Config.tdCls2),
_div = $("<div/>").addClass(Jh.Config.layCls).append(me._A("1:3")).append(me._A("3:1")).append(me._A("1:1:2")).append(me._A("1:2:1")).append(me._A("2:1:1")).append("<a href='javascript:void(0);' class='active' rel='1:1:1'>默认</a>").appendTo(_td),
_tr = $("<tr>").append(me._Td(Jh.Config.tdCls, "布局设置：")).append(_td);
me._ele.layoutTd = _td;
return _tr;
},
_ModuleList: function(data) { //创建模块list
var _ul = $("<ul/>").addClass(Jh.Config.ulCls);
me._Lis(data.appL, _ul);
me._Lis(data.appM, _ul);
me._Lis(data.appR, _ul);
me._ele.ul = _ul;
_ul.appendTo(me._ele.mtd);
},
_ActionButton: function() { //创建功能按钮
var _add = $("<a class='button b' href='#' >添加模块</a>");
var _save = $("<a class='button b' href='#' >保存配置</a>");
me._ele.atd.append(_add).append(_save);
me._bindAdd(_add);
me._bindSave(_save);
},
_Lis: function(obj, _ul) { //创建li列表
$.each(obj,
function(key, name) {
_ul.append(me._Li(key, name));
});
},
_A: function(text) { //创建A
return $("<a href='javascript:void(0);' rel='" + text + "'>" + text + "</a>");
},
_Li: function(key, name) { //创建li
return $("<li/>").append("<a href='#' rel='" + key + "'>" + name + "</a>").append("<span class='ok'></span>");
},
_Td: function(clsName, text) { //创建td
var t = $("<td>").addClass(clsName);
if (text != undefined) {
t.text(text);
}
return t;
},
_addPanel: function(o) {
me.box.append(o);
},
_bindAdd: function(obj) { //添加模块
obj.click(function() {
var clicked = function() {
var form = $(this).children('form'),
name = form.children('#modulename').val(),
key = form.children("#modulekey").val(),
layout = form.children("input[name='modulelayout']:checked").val(),
position;
if (layout == 'left') {
position = $("#" + Jh.Layout.location.left);
} else if (layout == 'center') {
position = $("#" + Jh.Layout.location.center);
} else {
position = $("#" + Jh.Layout.location.right);
}
me._ele.ul.append(me._Li(key, name)); //添加功能标签
position.append(Jh.Portal._PortalOne(key, name)); //添加portal
$.fallr('hide');
};
$.fallr('show', {
buttons: {
button1: {
text: '确定',
onclick: clicked
},
button2: {
text: '取消'
}
},
content: '<form style="margin-left:20px">' + '<p>模块名：</p><input type="text" size="15" id="modulename" />' + '<p>模块Code：</p><input type="text" size="15" id="modulekey" />' + '<p>模块位置：</p>左:<input type="radio" name="modulelayout" checked="checked" value="left"/> ' + '中:<input type="radio" name="modulelayout" value="center"/> ' + '右:<input type="radio" name="modulelayout" value="right"/>' + '</form>',
icon: 'add',
position: 'center'
});
});
},
_bindSave: function(obj) { //保存模块配置
obj.click(function() {
var _l = $("#" + Jh.Layout.location.left).sortable('toArray'),
_m = $("#" + Jh.Layout.location.center).sortable('toArray'),
_r = $("#" + Jh.Layout.location.right).sortable('toArray'),
_a = $("." + Jh.Config.layCls + " a"),
_layout = "";
_a.each(function() {
if ($(this).hasClass("active")) {
_layout = $(this).attr("rel");
}
});
if (_layout == "1:1:1") {
_layout = "默认";
}
var baseConfig = "<p>left:[" + _l + "]</p><p>center:[" + _m + "]</p><p>right[" + _r + "]</p>" + "<p>当前布局:" + _layout + "</p>";
$.fallr('show', {
content: baseConfig,
position: 'center'
});
});
},
_bindEvent: function() { //事件绑定
me._moduleLiClick();
me._layoutAClick();
},
_moduleLiClick: function() { //绑定模块LI单击事件
$("." + Jh.Config.ulCls + " li").live("click",
function() {
var _this = $(this),
_mName = _this.find("a").attr("rel"),
//获取模块名
_m = $("#" + _mName),
//模块div
_d = _this.find(".ok"); //对号
if (_d.is(":visible")) { //判断是否显示
_d.hide(); //隐藏对号
_m.hide(); //隐藏模块
} else {
_d.show(); //显示对号
_m.show(); //显示模块
}
Jh.Util.refresh();
});
},
_layoutAClick: function() { //绑定布局列表A 单击事件
$("." + Jh.Config.layCls + " a").click(function() {
var _this = $(this);
var _v = _this.attr("rel");
me._ToLayout(_v);
_this.addClass("active").siblings().removeClass("active");
});
},
_ToLayout: function(v) { //刷新布局
var CssMode = Jh.Layout.layoutCss,
//布局模式
CssText = Jh.Layout.layoutText,
//css
ModulesId = Jh.Layout.locationId,
//模块id
CssTextId = 0,
//默认css数组编号
ModuleItems = ""; //模块数组
$.each(CssMode,
function(m, mn) {
if (v == mn) CssTextId = m; //css 赋值
});
$.each(ModulesId,
function(s, sn) {
var currentModule = $(sn),
cssName = CssText[CssTextId],
ary = cssName.split(/\s+/); //得到当前布局css数组
switch (s) {
case "left":
s = 0;
break;
case "center":
s = 1;
break;
case "right":
