zoukankan      html  css  js  c++  java
  • 轻量级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: [
                      {
                           220, //宽度
                          dragable: true, //是否可以拖拉改变大小
                          title: '系统面板',
                          iconCls: 'myaccount',
                          content: '我的菜单面板内容'
                      },
    
                      {
                           '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));
                          }
                      }
                      ,{
                           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

  • 相关阅读:
    动画差值
    高达模型
    TCP/IP负载均衡
    FreeImage使用
    Game Programming Pattern
    Apple Instruments
    GLEW OpenGL Access violation when using glGenVertexArrays
    微服务了解
    summary
    事务传播行为
  • 原文地址:https://www.cnblogs.com/hjwen/p/4489137.html
Copyright © 2011-2022 走看看