app-framework學習--動態管理panel

標籤：app-framework   jqmobi   

 木塵 日期：2015-01-17

由於一個index寫多有頁面，壓力過大。所以有了js解決方案,動態管理panel

<span style="font-size:18px;"> var panelUtil = {/********** 添加一個新的header  **********/addNewHeader : function (headerContent){$("#afui").append(headerContent);},/********** 添加一個新的panel  **********/addNewPanel : function (panelID,content,header,footer,load,unload,nav,aside){var $div = $('<div id="'+panelID+'" class="panel" data-header="'+header+'" data-footer="'+footer+'" data-load="'+load+'" data-unload="'+unload+'" data-aside="'+aside+'" data-nav="'+nav+'"></div>').append(content);$("#content").append($div);},/********** 刪除一個panelpanel  **********/removePanel : function (panelID){$("#content").find("#" + panelID).remove();},/********** 刪除一個header  **********/removeHeader : function (headerID){$("#afui").find("#" + headerID).remove();},/********** 徹底銷毀一個panel **********/destroy : function (headerID,panelID){$("#afui").find("#" + headerID).remove();$("#content").find("#" + panelID).remove();},}</span>

 使用方法如下：建立一個header:

<span style="font-size:18px;"> panelUtil.addNewHeader("headerHtml")；</span>

建立一個panel:

<span style="font-size: 18px;"></span><pre name="code" class="javascript"><span style="font-size: 18px;">panelUtil.addNewPanel("panelHtml")；</span>

刪除一個header:

<span style="font-size: 18px;"> panelUtil.removeHeader("hederid");</span>

刪除一個panel:

<span style="font-size: 18px;"> panelUtil.</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">removePanel("panelid");</span>

銷毀一個panel:

<span style="font-size: 18px;">panelUtil.</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">destroy(</span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 18px;">"</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">hederid</span><span style="font-family: Arial, Helvetica, sans-serif; font-size: 18px;">",</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">"panelid");</span>

app-framework學習--動態管理panel