Written In The Font

“ Wirte less Do more”

学习内容:

 

页眉工具栏和页眉button

页眉是网页身体的头不一样.以下我们演示下在页面工具栏中加入两个连接,中间一个标题.

                                                                                       

 

show the code:

    
                    
                
                                
        
        
         
                
          返回            
          
 主界面 
            
          很多其它        
         
    
        
          

 

导航工具栏

导航工具栏是 jQuery Mobile 的小部件.像tab页,像navbar一样.以下演示下,音乐的一个网页的案例:

                                                                                         

 

show the code:

    
                    
                
                                
        
        
         
                
          返回            
          
音乐 
            
          很多其它            
          
                
           
                    
            
古典
                    
            
流行
                    
            
摇滚
                
           
            
          
        
         
                
         
              
          
I am a single collapsible element 
            
          
I am the content inside of the single collapsible element
        
         
              
        
      

 

页脚工具栏

页脚工具栏,以下实现button并排显示,两端button边角变为圆角:

(左图不是圆角,右图是圆角.代码就是相差个div)

                                                                               

show the code:

    
                   
               
                               
       
        
        
                
         返回            
         
音乐 
            
         很多其它            
         
                
          
                    
           
古典
                    
           
流行
                    
           
摇滚
                
          
            
         
        
        
                
        
              
         
I am a single collapsible element 
            
         
I am the content inside of the single collapsible element
        
        
            
        
           
         
                
          千千静听                
          QQ音乐                
          酷我音乐           
         
        
        
      
       
      

 

定位工具栏

定位工具栏,上面我们都用过了.定位工具栏是否已经在可视化范围内.要是工具栏使用固定位子,我们仅仅须要将该属性加入进去:

data-position="fixed".

也能够在page div中使用全屏定位.我们仅仅须要 <div data-role=”page” data-fullscreen=”true”>

 

Editor's Note

路漫漫其修远兮 我将上下而求索

版权声明：本文博客原创文章，博客，未经同意，不得转载。