这两天学习了下，jquery mobile(以下简称jqm)的开发相关的内容。可能之前有过web的开发基础，相对于我来说学习这个东西感觉挺简单的，很容易上手。Jqm的的语法和jquery其实是一样的，有些不大一样的就是了。网上介绍的也是一大堆。这里我主要是做笔记哈。

    使用JQM开发其实很简单，我这里目前是针对于在服务器端开发的，服务器使用的是apache+php，前端其实主要是html5+jquery的写法。

1、首先我们可以到官网去下载，然后下载完成后，我们可以看到如下的的目录结构。

    

   jqm的包里已经包含了demo和核心代码。jqm提供的demo很全面，直接学习它基本就够了。 既然下载好了，我们就可以进行开发了，概念的东西我就不多说了，直接上代码。

 

2、编写form表单页面。

 

 
    
     
         
  1. <!DOCTYPE html> 
    2.  
         
  2. <html> 
    3.  
         
  3. <head> 
    4.  
         
  4.     <meta charset="UTF-8" /> 
    5.  
         
  5.     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    6.  
         
  6.     <title>表单</title> 
    7.  
         
  7.     <!--加载jqm css样式--> 
    8.  
         
  8.     <link rel="stylesheet"  href="css/jquery.mobile-1.2.0-rc.2.css" /> 
    9.  
         
  9.     <!--加载jquery--> 
    10.  
         
  10.     <script src="js/jquery.js"></script> 
    11.  
         
  11.     <!--加载jquery mobile--> 
    12.  
         
  12.     <script src="js/jquery.mobile-1.2.0-rc.2.js"></script>  
    13.  
         
  13.     <script src="js/ajax.js"></script>  
    14.  
         
  14. </head>  
    15.  
         
  15. <body> 
    16.  
         
  16.      
    17.  
         
  17.     <div data-role="page" data-fullscreen="true"><!--data-fullscreen 设置全屏--> 
    18.  
         
  18.  
    19.  
         
  19.     <div data-role="header"   data-position="inline"><!--data-position="inline" 设置以流的方式显示--> 
    20.  
         
  20.         <a href="index.html" data-icon="delete">Cacel</a>  
    21.  
         
  21.         <h1>表单demo</h1> 
    22.  
         
  22.     </div><!-- /header --> 
    23.  
         
  23.  
    24.  
         
  24.     <div data-role="content">    
    25.  
         
  25.         <form id="ajaxForm"> 
    26.  
         
  26.             <div data-role="fieldcontain"> 
    27.  
         
  27.                 <label for="username">User Name:</label> 
    28.  
         
  28.                 <input type="text" name="username" id="username" data-mini="true"/> 
    29.  
         
  29.              
    30.  
         
  30.                 <h3 id="notification"></h3> 
    31.  
         
  31.                 <button data-theme="b" id="submit" type="submit">Submit</button> 
    32.  
         
  32.             </div> 
    33.  
         
  33.         </form>  
    34.  
         
  34.     </div><!-- /content --> 
    35.  
         
  35.  
    36.  
         
  36.     <div data-role="footer"  data-position="fixed"> 
    37.  
         
  37.         <h4>Page Footer</h4> 
    38.  
         
  38.     </div><!-- /footer --> 
    39.  
         
  39. </div><!-- /page --> 
    40.  
         
  40.  
    41.  
         
  41. </body> 
    42.  
         
  42. </html> 
    43.  
        
 
    
3、编写服务器端脚本form.php(这里我使用php)
 
    
 
 
    
 
    
     
         
  1. <?php 
    2.  
         
  2.     $username = $_POST['username']; 
    3.  
         
  3.     echo "User Name：".$username; 
    4.  
         
  4. ?> 
    5.  
        
 
    
4、编写ajax脚本ajax.js
 
    
 
    
     
         
  1. $(function() { 
    2.  
         
  2.     $('#submit').bind('click', function() { 
    3.  
         
  3.  
    4.  
         
  4.         var formData = $('#ajaxForm').serialize(); 
    5.  
         
  5.         //.serialize() 方法创建以标准 URL 编码表示的文本字符串 
    6.  
         
  6.       
    7.  
         
  7.         $.ajax({ 
    8.  
         
  8.             type : "POST", 
    9.  
         
  9.             url  : "form.php",  
    10.  
         
  10.             cache : false, 
    11.  
         
  11.             data : formData, 
    12.  
         
  12.             success : onSuccess, 
    13.  
         
  13.             error : onError 
    14.  
         
  14.         }); 
    15.  
         
  15.         return false; 
    16.  
         
  16.     }); 
    17.  
         
  17. }); 
    18.  
         
  18.  
    19.  
         
  19. function onSuccess(data,status){ 
    20.  
         
  20.     data = $.trim(data); //去掉前后空格 
    21.  
         
  21.     $('#notification').text(data); 
    22.  
         
  22. } 
    23.  
         
  23.  
    24.  
         
  24. function onError(data,status){ 
    25.  
         
  25.     //进行错误处理 
    26.  
         
  26. } 
    27.  
        
 
    
 
 
    
4、创建android的工程，使用webview进行访问。
 
    
layout：
 
    
 
    
     
         
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    2.  
         
  2.     xmlns:tools="http://schemas.android.com/tools" 
    3.  
         
  3.     android:layout_width="match_parent" 
    4.  
         
  4.     android:layout_height="match_parent" > 
    5.  
         
  5.  
    6.  
         
  6.     <WebView 
    7.  
         
  7.         android:id="@+id/webview" 
    8.  
         
  8.         android:layout_width="fill_parent" 
    9.  
         
  9.         android:layout_height="fill_parent"  /> 
    10.  
         
  10.  
    11.  
         
  11. </RelativeLayout> 
    12.  
        
 
    
java代码：
 
    
 
 
    
 
    
     
         
  1. package com.xzw.html; 
    2.  
         
  2.  
    3.  
         
  3. import android.app.Activity; 
    4.  
         
  4. import android.app.ProgressDialog; 
    5.  
         
  5. import android.graphics.Bitmap; 
    6.  
         
  6. import android.os.Bundle; 
    7.  
         
  7. import android.util.Log; 
    8.  
         
  8. import android.view.KeyEvent; 
    9.  
         
  9. import android.view.View; 
    10.  
         
  10. import android.view.Window; 
    11.  
         
  11. import android.webkit.WebChromeClient; 
    12.  
         
  12. import android.webkit.WebView; 
    13.  
         
  13. import android.webkit.WebViewClient; 
    14.  
         
  14. /** 
    15.  
         
  15.  *  
    16.  
         
  16.  * @author xuzw13@gmail.com 
    17.  
         
  17.  * weibo:http://weibo.com/xzw1989 
    18.  
         
  18.  * 
    19.  
         
  19.  */ 
    20.  
         
  20. public class MainActivity extends Activity { 
    21.  
         
  21.      
    22.  
         
  22.     private static final String TAG = "MainActivity";  
    23.  
         
  23.     private WebView webView; 
    24.  
         
  24.     @Override 
    25.  
         
  25.     public void onCreate(Bundle savedInstanceState) { 
    26.  
         
  26.         super.onCreate(savedInstanceState); 
    27.  
         
  27.         requestWindowFeature(Window.FEATURE_NO_TITLE); 
    28.  
         
  28.         setContentView(R.layout.activity_main); 
    29.  
         
  29.          
    30.  
         
  30.         webView = (WebView)findViewById(R.id.webview); 
    31.  
         
  31.         webView.getSettings().setSupportZoom(true); 
    32.  
         
  32.         webView.getSettings().supportMultipleWindows(); 
    33.  
         
  33.         webView.getSettings().setJavaScriptEnabled(true); 
    34.  
         
  34.         webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); 
    35.  
         
  35.         webView.loadUrl("http://192.168.1.120/jquerymobile/index.html"); 
    36.  
         
  36.           
    37.  
         
  37.          
    38.  
         
  38.         webView.setWebChromeClient(new WebChromeClient(){ 
    39.  
         
  39.             @Override 
    40.  
         
  40.             public void onProgressChanged(WebView view, int newProgress) { 
    41.  
         
  41.                 super.onProgressChanged(view, newProgress); 
    42.  
         
  42.             } 
    43.  
         
  43.         }); 
    44.  
         
  44.         webView.setWebViewClient(new MyWebViewClient()); 
    45.  
         
  45.          
    46.  
         
  46.          
    47.  
         
  47.     } 
    48.  
         
  48.      
    49.  
         
  49.     private class MyWebViewClient extends WebViewClient{ 
    50.  
         
  50.         @Override 
    51.  
         
  51.         public void onLoadResource(WebView view, String url) { 
    52.  
         
  52.           
    53.  
         
  53.                 Log.i(TAG, "onLoadResource:" + url); 
    54.  
         
  54.           
    55.  
         
  55.             super.onLoadResource(view, url);  
    56.  
         
  56.         } 
    57.  
         
  57.          
    58.  
         
  58.         @Override 
    59.  
         
  59.         public void onReceivedError(WebView view, int errorCode, 
    60.  
         
  60.                 String description, String failingUrl) { 
    61.  
         
  61.             Log.i(TAG, "onReceivedError:" + failingUrl+" \n errorcode="+errorCode); 
    62.  
         
  62.             super.onReceivedError(view, errorCode, description, failingUrl); 
    63.  
         
  63.         } 
    64.  
         
  64.          
    65.  
         
  65.           @Override 
    66.  
         
  66.         public boolean shouldOverrideUrlLoading(WebView view, String url) { 
    67.  
         
  67.                 Log.i(TAG, "shouldOverrideUrlLoading:" + url);  
    68.  
         
  68.             view.loadUrl(url); 
    69.  
         
  69.             return true; 
    70.  
         
  70.         } 
    71.  
         
  71.            
    72.  
         
  72.           @Override 
    73.  
         
  73.         public void onPageStarted(WebView view, String url, Bitmap favicon) { 
    74.  
         
  74.                 Log.i(TAG, "onPageStarted:" + url);  
    75.  
         
  75.         } 
    76.  
         
  76.            
    77.  
         
  77.           @Override 
    78.  
         
  78.         public void onPageFinished(WebView view, String url) { 
    79.  
         
  79.               Log.i(TAG, "onPageFinished:" + url);  
    80.  
         
  80.              
    81.  
         
  81.         } 
    82.  
         
  82.     }; 
    83.  
         
  83.      
    84.  
         
  84.     @Override 
    85.  
         
  85.     public boolean onKeyDown(int keyCode, KeyEvent event) { 
    86.  
         
  86.          if((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()){ 
    87.  
         
  87.              webView.goBack(); 
    88.  
         
  88.              return true; 
    89.  
         
  89.          } 
    90.  
         
  90.         return super.onKeyDown(keyCode, event); 
    91.  
         
  91.          
    92.  
         
  92.     } 
    93.  
         
  93. } 
    94.  
        
 
    
代码就是全部代码了。
 
    
     今天就写到这里，继续干活了。欢迎大家一起交流学习。