码迷,mamicode.com
首页 > Web开发 > 详细

轻量级jquery框架之--布局(layout)

时间:2015-05-08 23:46:09      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:

布局需求

(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

 

轻量级jquery框架之--布局(layout)

标签:

原文地址:http://www.cnblogs.com/hjwen/p/4489137.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!