輕量級jquery框架之--面板(panel)

面板需求：

（1）支持可拖拽，面板將作為后期的布局組件、window組件、alert組件的基礎。

（2）支持自定義工具欄，工具欄位置定義在面板底部，工具欄依賴toolbar組件。

（3）支持加載JSON,HTML,IFRAME三種數據格式的請求，支持動態reload重加載，重裝時可以重新設置參數和url。

（4）支持自定義標題（可動態修改標題）、圖標樣式。

（5）支持擴大縮小、右側收起，上下收起。

面板API設計：

      /**
        *args={
            content: null,//url地址
            dataType:'html/json/iframe'
        }
        **/
        load: function () {
    },
    /**
        * args={title:'標題',iconCls:'按鈕樣式'}/args=title
        ***/
        setTitle: function () {
    },
    /**
        *關閉當前panel
        ***/
        close: function () {
    },
          /**
        *重置大小
        ***/
        resize: function () {
    }

面板JSON配置

    var defaultOpts = {
        title: '',//標題
        iconCls: '',//圖標cls，對應icon.css里的class 
        toolbar: null,//工具欄對象
        toolbarPos:'right',
        width: 'auto',
        height: 'auto',
        content: null,//靜態內容或者url地址
        dataType:'html',//當為url請求時，html/json/iframe
        maxminable: false,//可變化小大
        closeable: false,//是否關閉
        expandable: false,//可左右收縮
        collapseable: false,//上下收縮
        onResized:function(pr){},//大小變化事件
        onPreLoad: function () { },//加載前
        onLoaded: function () { },//加載后
        onClosed: function () { },//關閉后
        onExpand: function (pr) { },//左右收縮后
        onCollapse: function (pr) { }//上下收縮后      
    };

面板預覽

代碼下載：

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