Layout requirements
(1) Support horizontal generation of layout items, without the need to create layouts vertically.
(2) Support for layout item right-hand contraction function
(3) Support custom layout item icon, title, and provide the API to dynamically modify layout item picture and title
(4) Support Json/html/iframe Three kinds of data loading mode
(5) An API that provides dynamic modification of request parameters (URLs, parameters) and can reload data
(6) Layout relies on the Panel component and supports toolbar definitions (Dependency toolbar)
API Design
/** * args={title: ' title ', Iconcls: ' button style '}/args=title * **/Settitle:function () { varargs = Arguments[0]; return This. each (function () { $( This). Data ("Panels") [Args.panelidx].panel (' Settitle '), args); }); }, /** *args={Panelidx: The index of the panel, the data subscript in the corresponding items, Content:null,//url address dataType: ' html/ Json/iframe ', title: ' Set this item will change the title, but do not set ', Iconcls: ' Set a new icon, but not set '} **/Load:function () { varargs = Arguments[0]; return This. each (function () { var$p =$ ( This). Data ("Panels")) [ARGS.PANELIDX]; $p. Panel (' Load ', args); if(typeofArgs.title! = ' undefined ') { varas={title:args.title}; if(typeofArgs.iconcls! = ' undefined ') As.iconcls=Args.iconcls; $p. Panel (' Settitle ', as); } }); }
Panel configuration JSON
$(function() {$layout= $ ("#main_body"). Layout ({items: [{width:220,//widthDragable:true,//Whether you can drag and change the sizeTitle: ' System Panel ', Iconcls:' MyAccount ', Content:' My menu panel contents '}, {width:' Auto ',//widthTitle: ' Module 2 ', Iconcls:' Outbox ', DataType:' HTML ',//Html/json/iframeContent: ' data/html.html ', onLoaded:function(pr) {if(idx = = 2) $( This). HTML (json.stringify (PR)); Console.log ("HTML onLoaded fire!" +json.stringify (PR)); }}, {width:200,//widthTitle: ' Right module ', Iconcls:' Settings ', DataType:' JSON ',//Html/json/iframeContent: ' Data/test.ashx?flag=panel ', onLoaded:function(pr) {Console.log ("OnLoaded fire!" +json.stringify (PR)); $( This). HTML (json.stringify (PR)); }, toolbar: [{iconcls:‘‘, Text:Confirm, click:function(PR) {alert (Confirm); }}, {iconcls:‘‘, Statu:false, Text:Cancel, click:function(PR) {alert (Cancel); }}]}], expand:function(PR) {//expand, Shrink pr=max/minConsole.log ("Expand:" +PR); }, Ondragstop:function(PR) {//Drag End EventConsole.log ("Ondragstop:" +json.stringify (PR)); } }); });
Layout Preview
Code Download:
Https://code.csdn.net/hjwen/open-ui/tree/master
The lightweight jquery framework-layouts (layout)