轻量级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