輕量級jquery框架之--布局(layout)

布局需求

（1）支持橫向生成布局項即可，不需要縱向生成布局。

（2）支持布局項右側收縮功能

（3）支持自定義布局項圖標、標題，並提供動態修改布局項圖片和標題的api

（4）支持JSON/html/iframe 三種數據加載方式

（5）提供動態修改請求參數(url、參數)並可以重新加載數據的api

（6）layout依賴於panel組件並支持工具欄定義（依賴工具欄）

API設計

        /**
        * args={title:'標題',iconCls:'按鈕樣式'}/args=title
        ***/
        setTitle: function () {
            var args = arguments[0];
            return this.each(function () {
                $(this).data("panels")[args.panelIdx].panel('setTitle', args);
            });
        },
        /**
        *args={
            panelIdx:面板的索引、對應items里面的數據下標,
            content: null,//url地址
            dataType:'html/json/iframe',
            title:'設置該項會改變標題，可是不設置',
            iconCls:'設置新的圖標，可是不設置'
        }
        **/
        load: function () {
            var args = arguments[0];           
            return this.each(function () {
                var $p=$(this).data("panels")[args.panelIdx];
                $p.panel('load', args);
                if (typeof args.title != 'undefined') {
                    var as={title:args.title};
                    if (typeof args.iconCls != 'undefined')
                        as.iconCls = args.iconCls;
                    $p.panel('setTitle', as);
                }
                    
            });
        }

面板配置JSON

      $(function () {
            $layout = $("#main_body").layout({
                items: [
                  {
                      width: 220, //寬度
                      dragable: true, //是否可以拖拉改變大小
                      title: '系統面板',
                      iconCls: 'myaccount',
                      content: '我的菜單面板內容'
                  },

                  {
                      width: 'auto', //寬度
                      title: '模塊2',
                      iconCls: 'outbox',
                      dataType: 'html',//html/json/iframe
                      content: 'data/html.html',
                      onLoaded: function (pr) {
                          if (idx == 2)
                              $(this).html(JSON.stringify(pr));
                          console.log("html onLoaded fire! " + JSON.stringify(pr));
                      }
                  }
                  ,{
                      width: 200, //寬度
                      title: '右側模塊',
                      iconCls: 'settings',
                      dataType: 'json',//html/json/iframe
                      content: 'data/test.ashx?flag=panel',
                      onLoaded: function (pr) {
                          console.log("onLoaded fire! " + JSON.stringify(pr));
                          $(this).html(JSON.stringify(pr));
                      },
                      toolbar: [{
                          iconCls: '',
                          text: '確認',
                          click: function (pr) {
                              alert('確認');
                          }
                      }, {
                          iconCls: '',
                          statu: false,
                          text: '取消',
                          click: function (pr) {
                              alert('取消');
                          }
                      }]
                  }
                ],
                expand: function (pr) {//展開，收縮 pr=max/min
                    console.log("expand:" +pr);
                },
                onDragStop: function (pr) {//拖動結束事件
                    console.log("onDragStop:" +JSON.stringify(pr));
                }
            });
        });

布局預覽

 

代碼下載：

　　https://code.csdn.net/hjwen/open-ui/tree/master