您的位置：首页 > 移动开发

app-framework学习--动态管理panel

2015-01-17 13:12 267 查看 
作者：木尘 日期：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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航