af3的变化非常大。参见

　　一、应用需要引用的js脚本：

　　af3中不在自己实现dom选择器，而是选择基于jquey或兼容jquery的库如zepto等，touch layer也依靠fastclick。下面就是af3应用的head部分示意代码，对比2.x变化很明显，这里引入了jquery和fastclick，没有了appframework.js

                
             
             
             
                                　　  ...    

　　二、页面组织结构：

　　af3中应用视觉元素组织变化巨大，一改2.x时代panel和header，footer混乱的现象，3.0中新增加了一个顶级元素类型（除afui）view，现在header，footer和panel页面都属于view元素，一个view内部的panel有相同的header和footer，需要不同的footer或header需要创建新的view，窃以为这样清爽多了:)，请看：

    
     
            
      
                
       
Main view
                
                   
      
            
      
                
       
         this is page in main view
       
            
      
            
      
                
       Next view            
      
        
     
        
     
            
      
                
       
view 22
                
                   
      
            
      
                
       
                    
        
this is page in  view 2
                
       
            
      
            
      
                
       back to main view            
      
        
     

 需要注意的是，view中的panel元素，还需要包裹一层pages元素，即使只有一个panel。

代码中同时显示了切换view的三种方式：

1. 编辑时，通过添加active 类名来指定默认view
2. 运行时，通过锚定view的id来切换
3. 运行时，通过js函数loadContent

　　三、自定义themes：

　　af3中默认使用系统theme，如果你需要自定义theme，需要设定useOSThemes为false

$.afui.useOSThemes=false; //This must be set before $(document).ready()

另外，还需要在view之外再包裹一层id为afui的div元素，并指定相应theme的class。af3内置的theme有：

ios，ios7，android(light,dark),win8(light dark),bb/*blackberry*/,tizen

　　四、总体代码：

                          
              
              
              
              
                                                          
      
                
       
              
        
Lear App Framework 3
            
        loading...        
       
        
       
            
        
                
         
Main view
                
                     
        
            
        
                
         
                    
          
this is page in main view
                
         
            
        
            
        
                
         Next view            
        
        
       
        
       
            
        
                
         
view 22
                
                     
        
            
        
                
         
                    
          
this is page in  view 2
                
         
            
        
            
        
                
         back to main view            
        
        
       
    
      
    

　　五、导航历史（history）：

　　af3为每个view，单独记录页面（panel）的浏览记录。

　　目前发现af3中每个view下面必须指出默认panel，否则不显示默认panel。并且需要通过给panel添加active类名，而不是通过data-selected="true"

 

---

 

     [Learn AF3系列]