当我们专注地研究人类生活的空虚，并考虑空幻无常时，也许我们正在阿谀逢迎自己懒惰的天性。

Written In The Font

为了app的手机端,我选择了 jQuery Mobile  ,学习中出一系列的博客吧.我喜欢的一句话 “Talk is Cheap Show me the CODE”,所以过多的废话 jjyy 我不太会,我直接上代码上样式.想玩手机端的可以来看下哦.

工具: Aptana Studio 3 + 火狐

 

学习内容:

 

创建单页布局

移动页面分:页眉,页脚和内容三部分.下面实现一个hello world(程序员的大门)页面:

 

                                                                                   

 

show the code:

    
    
         
             
     
              
      
               
       
            
        
             
         
                  
          
               
           
 标题
        
           
               
            
 
             
              Hello World!!
             
        
            
                 
             
 页脚
    
            
           
          
         
        
       
      
     
    

 

建多页布局

多页布局是单页布局的一个集合,创建一个Html文件包括很多个界面,也可以创建很多个html文件,每个文件包括一个页面爆他们连接起来.

这里我们用一个html方便进行.

 

                                                                            

 

show the code

    
    
         
             
     
              
      
               
       
            
        
                 
         
                  
          
               
           
 标题1
        
           
                
            
 
             
              跳转到页面二
             
        
            
                 
             
 页脚1
            
             
                      
              
                   
               
 标题2
        
               
                    
                
 Hello World2!!
        
                
                     
                 
 页脚2
        
                
               
              
             
            
           
          
         
        
       
      
     
    

 

data-role="button" 自动默认的button按钮样式

jQuery Mobile 中的按钮可通过三种方法创建[ 按钮会在下面 详细讲]：

• 使用 <button> 元素

• 使用 <input> 元素

• 使用 data-role="button" 的 <a> 元素

 

利用网格对齐内容

网格是用放置对象,使他们对齐的工具.

可使用的布局网格有四种：ui-grid-a ui-grid-b ui-grid-c ui-grid-d

可使用的内容类有四种:ui-block-a ui-block-b ui-block-c ui-block-d

 

                                                                                    

 

show the code:

    
    
         
             
     
              
      
               
       
            
        
             
         
            
          
             
           
列
    
           
               
            
三列布局：
   
            
                  
             
              1     
              
               2     
               
                3      
                
多行的三列布局：
   
                
                      
                 
                  9     
                  
                   8     
                   
                    7     
                    
                     6     
                     
                      5     
                      
                       4      
                      
                     
                    
                   
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

 

设计可折叠布局

可以通过点击或触摸来隐藏或显示可折叠的内容.

                                                                                      

show the code:

    
    
         
             
     
              
      
               
       
            
        
                     
         
                  
          
                           
           
折叠案例
                
           
                            
            
                             
             
点我... 
                
             
点了是sb
                                    
             
                              
              
                                   
               
再点我...
                    
               
I am a boy ...
                    
               
u r a girl ......
                                
               
                                    
                
没了...
                    
                
I am expanded on page load222...
                    
                
                                         
                 
I am expanded on page load333
                    
                 
I am expanded on page load333...
                                                                            
                 
                              
                  
页脚
                
                 
                
               
              
             
            
           
          
         
        
       
      
     
    

 

Editor's Note

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