修改LigerUI的导航栏，改为Tab标签模式_xhtml_weixin

修改LigerUI的导航栏，改为Tab标签模式

LigerUI导航栏本身是没有tab标签模式的，但是实际上，很多时候标签能能更好的展示业务，将导航的内容按照类目进行划分，避免一个里面太多的情况。

下面是我改造后的效果图，如下：

ligerui是一个不错的免费开源ui框架，功能还是很强大的，但是有些地方也做的不够好，比如表单的自适应布局，树，布局等等，但是相信会越来越好。这里给出我改造后代码：

 
    
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
 
                  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
 
         < 
         html  
         xmlns 
         = 
         "http://www.w3.org/1999/xhtml" 
         > 
        
 
         < 
         head 
         > 
        
 
              
         < 
         meta  
         http-equiv 
         = 
         "Content-Type"  
         content 
         = 
         "text/html; charset=utf-8" 
         /> 
        
 
              
         < 
         title 
         >导航</ 
         title 
         > 
        
 
              
         < 
         link  
         href 
         = 
         "../lib/ligerUI/skins/Aqua/css/ligerui-all.css"  
         rel 
         = 
         "stylesheet"  
         type 
         = 
         "text/css" 
         /> 
        
 
              
         < 
         script  
         src 
         = 
         "../lib/jquery/jquery-1.3.2.min.js"  
         type 
         = 
         "text/javascript" 
         ></ 
         script 
         > 
        
 
              
         < 
         script  
         src 
         = 
         "../lib/ligerUI/js/core/base.js"  
         type 
         = 
         "text/javascript" 
         ></ 
         script 
         > 
        
 
              
         < 
         script  
         src 
         = 
         "../lib/ligerUI/js/plugins/ligerTab.js"  
         type 
         = 
         "text/javascript" 
         ></ 
         script 
         > 
        
 
              
         < 
         script  
         src 
         = 
         "../lib/ligerUI/js/plugins/ligerLayout.js"  
         type 
         = 
         "text/javascript" 
         ></ 
         script 
         > 
        
 
              
         < 
         script  
         type 
         = 
         "text/javascript" 
         > 
        
 
                  
         $(function () { 
        
 
                      
         $("#layout").ligerLayout({topHeight: 40, leftWidth: 200}); 
        
 
                      
         var ttt = "< 
         div  
         id=\"tab\" style=\"width: 160px\">\n" + 
        
 
                              
         "    < 
         div  
         title=\"业务\"></ 
         div 
         >\n" + 
        
 
                              
         "    < 
         div  
         title=\"配置\"></ 
         div 
         >\n" + 
        
 
                              
         "</ 
         div 
         >"; 
        
 
                      
         $(".l-layout-header-inner").html(ttt); 
        
 
                      
         $("#tab").ligerTab(); 
        
 
                  
         }) 
        
 
              
         </ 
         script 
         > 
        
 
         </ 
         head 
         > 
        
 
         < 
         body 
         > 
        
 
         < 
         div  
         id 
         = 
         "layout" 
         > 
        
 
              
         < 
         div  
         position 
         = 
         "top" 
         ></ 
         div 
         > 
        
 
              
         < 
         div  
         position 
         = 
         "left" 
         ></ 
         div 
         > 
        
 
              
         < 
         div  
         position 
         = 
         "center" 
         ></ 
         div 
         > 
        
 
              
         < 
         div  
         position 
         = 
         "bottom" 
         ></ 
         div 
         > 
        
 
         </ 
         div 
         > 
        
 
         </ 
         body 
         > 
        
 
         </ 
         html 
         > 
        
 
  