Portal  jQuery拖拽布局插件599
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":
     

技术讨论区(3 个讨论)

  1. fchen 3

    fchen

    学习了,不错

    2016-1-23 16:07:51 | 回复

  2. 凌乱 2

    凌乱

    是的,这个是很好的。

    2016-1-20 19:48:33 | 回复

  3. 情绪红了-眼睛 1

    情绪红了-眼睛

    好东西,必须收着。

    2015-5-19 12:09:42 | 回复

  4. 请先登录

      发 布