使用jQuery Mobile框架將博客快速轉化為Mobile網站
在線演示
jQuery Mobile是一個非常不錯的移動端網站應用的解決方案，很多網站都使用jQuery Mobile來生成Mobile手機端的移動網站應用，在過去的GBin1博客文章中，我們曾經使用jQuery Mobile利用RSS訂閱生成過一個簡單的RSS閱讀手機端，在今天的教程中，我們將講解如何將GBin1網站完整的轉化為一個全功能的移動端網站，主要的技術使用jQuery Mobile和Java的SiteMesh布局類庫
系統設計分析
在我們正式的開始開發之前，我們需要大概的分析一下如何設計Mobile網站，很多網站的移動端應用和網站的內容是分離的，也就是說，桌面訪問網站和移動設備訪問網站的路徑是不同的。
- 好處是可以分別開發獨立的功能，我們可以針對移動端的用戶設計獨立的UI，展現方式，或者使用方式，往往對于比較大型的網站或者已經上線很久的網站這樣設計成本比較低。
- 壞處是你需要獨立的維護兩套代碼，無形的增加了開發成本和維護成本
在我們GBin1的移動設備網站開發中，我們本著盡量維護同一套代碼的原則，希望能夠直接重用網站的頁面內容和框架。值得一提的是，GBin1架 構使用Sitemesh的模板布局功能來生成頁面的不同樣式和布局，而相關的頁面內容及其附屬功能，例如，留言等等都是由靜態頁面或者功能模塊生成，這樣 的設計使得我們可以利用已經存在的頁面內容花最小的代價來創建新的移動設備模板，因而可以快速的生成新的移動端web應用，而且整體結構及其閱讀使用方式 將會和網站本身的使用方式類似，降低了用戶的學習成本。
如何實現？
為了讓系統能夠自動處理應用不同的模板，這里我們使用了一個小技巧：
我們創建一個2級域名， 例如， http://m.gbin1.com，將它通過域名綁定了我們的服務器。然后通過后臺的應用來判斷當前的域名訪問，如果用戶通過http://www.gbin1.com來訪問的話，我們將應用網站模板，如果用戶嘗試使用http://m.gbin1.com來訪問gbin1的時候，我們將使用移動設備模板來展示網站內容。通過這種方法，系統能夠自動的應用不同的模板生成不同的web應用界面。
當然，我們也可以做的更好，自動判斷客戶端的代理類型，如果是移動設備，自動重定向到http://m.gbin1.com，否則重定向到http://www.gbin1.com。
代碼實現
設計和實現基本完成以后，我們正式開始開發網站的移動設備模板，使用jQuery Mobile框架。使用jQuery Mobile框架的好處在于，考慮了不同手機的兼容性并且封裝了現成的UI組件，我們只需要簡單的添加幾個html標簽即可生成對應的頁面，如下：
- <div data-role="page">
- <div data-role="header">
- <a href="/bloghome.html" data-icon="help">首頁</a>
- <h1 id="logo"></h1>
- <a href="/portfolio/" data-icon="info">關于</a>
- <div data-role="navbar" data-iconpos="top" data-theme="a">
- <nav>
- </nav>
- </div><!-- /navbar -->
- </div><!-- /header -->
- <div data-role="content">
- </div><!-- /content -->
- <div data-role="footer">
- <h4>© Copywrite by gbin1.com, all rights reserved.</h4>
- </div>
- </div><!-- /page -->
以上代碼我們定義了，頁頭，內容和頁腳。
在頁頭中我們添加了兩個按鈕， 首頁和關于
頁腳中我們添加了版權相關信息。
生成頁面內容如下：
為了更好在不同的移動設備上看到展示效果，這里我們使用一個在線測試響應式設計的web工具- Screenqueri.es，使用它能夠幫助你在不同的移動設備上查看網站效果，同時它支持本地localhost應用查看效果，支持不同設備上的預覽，例如，iphone，ipad及其其它設備，并且支持橫豎屏切換，所以對于我們在線調試非常有幫助。
添加相關代碼
接下里我們需要添加一些相關代碼來處理移動設備中的顯示，包括：
- 圖片
- 視頻
- 其它
因為不同的設備的顯示界面尺寸不一樣，為了能夠在小尺寸的設備上正常的顯示頁面，我們需要在加載頁面之前，處理相關圖片，或者視頻的尺寸大小。代碼如下：
- $(document).bind('pageinit' , function(){
- $('img').css({
- 'max-width':'280px',
- 'height':'auto'
- });
- });
注意我們在以上代碼中調用了css方法來處理圖片，這里為了簡單，我們直接將圖片設置為最大寬大為280px，如果你需要支持不同的設備，你可以根據設備不同，處理不同的圖片寬度。
再 請注意這里我們使用了pageinit方法，在正常的jQuery開發中，我們一般使用document.ready() 方法來處理，但是對于jQuery mobile來說，當頁面導航的時候Ajax被用來加載頁面內容，所以DOM ready方法只存在于第一個加載頁面，為了能夠讓每一個頁面都可以執行代碼，所以我們需要在頁面初始化(pageinit)方法中調用相關方法，否則你 會看到除了第一個頁面外以后其它頁面的圖片沒有任何變化。
如果你有其它的代碼需要在也頁面中調用的話，你同樣也可以加載到上面的方法中去。如下：
- $(document).bind('pageinit' , function(){
- $('img').css({
- 'max-width':'280px',
- 'height':'auto'
- });
- $('a').each(function(){
- var url = $(this).attr('href');
- var laststr = url.lastIndexOf(".html");
- var lastc = url.charAt(url.length-1);
- var startc = url.charAt(0);
- if(laststr<0&&lastc!=='/'&&startc!=='?'){
- $(this).attr('href', url + '/');
- }
- });
- });
在我們的代碼中，我們需要處理圖片及其url中的地址問題，所以我們將相關的代碼放置到pageinit中。
完整模板代碼如下：
- <!DOCTYPE html>
- <!-- By GBin1.com-->
- <%@ page contentType="text/html;charset=utf-8"%>
- <%@ taglib uri="gbin1cms-taglib" prefix="cms" %>
- <jsp:useBean id="userInfo" scope="session" class="com.gbin1.core.UserInfo" />
- <jsp:useBean id="webSite" scope="request" type="com.gbin1.core.WebSite" />
- <html>
- <head>
- <title><cms:pagetitle /></title>
- <meta name="description" content="<cms:info id="description" />" />
- <meta name="keywords" content="<cms:info id="keywords" />" />
- <meta name="author" content="<cms:info id="author" /> (<cms:info id="authorurl" />)" />
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
- <cms:pagehead />
- <style>
- #logo{
- background: url('/gbin1/themes/gbin1_mobile/images/logo.png') no-repeat 50% 50%;
- height: 30px;
- }
- #navlist{
- font-size:14px;
- }
- .ui-btn-text{
- font-size:12px;
- }
- H1,H2,H3,H4,H5,H6,H7,H8,H9,H10{
- font-size:14px;
- }
- .ui-header .ui-title{
- font-size:14px;
- }
- .ui-footer .ui-title{
- font-size:12px;
- font-weight: normal;
- }
- .ui-body-c .ui-link {
- text-decoration: none;
- font-size:14px;
- font-weight: normal;
- }
- .ui-btn-text{
- font-weight: normal;
- }
- .ui-body-c{
- font-size:14px;
- line-height: 20px;
- }
- .includetitle{
- background: #E1E1E1;
- padding: 5px 5px;
- border-left: 3px solid #BBB;
- border-radius: 3px 3px 3px 3px;
- }
- .includenavigation .ui-link, .includenavigation .ui-link:visited{
- color: #ffffff;
- text-shadow: 0px 0px 20px #CCC;
- }
- .includereadmore{
- text-align: right;
- padding: 5px;
- width: auto;
- border-top: 1px solid #CCC;
- }
- .includenavigation{
- color: #909090;
- font-weight: bold;
- }
- </style>
- <script>
- $(document).bind('pageinit' , function(){
- $('img').css({
- 'max-width':'280px',
- 'height':'auto'
- });
- $('a').each(function(){
- var url = $(this).attr('href');
- var laststr = url.lastIndexOf(".html");
- var lastc = url.charAt(url.length-1);
- var startc = url.charAt(0);
- if(laststr<0&&lastc!=='/'&&startc!=='?'){
- $(this).attr('href', url + '/');
- }
- });
- });
- </script>
- </head>
- <body>
- <cms:editor>
- <div data-role="page">
- <div data-role="header">
- <a href="/bloghome.html" data-icon="help"><%=new String("\u9996\u9875")%></a>
- <h1 id="logo"></h1>
- <a href="/portfolio/" data-icon="info"><%=new String("\u5173\u4e8e")%></a>
- <div data-role="navbar" data-iconpos="top" data-theme="a">
- <nav>
- <cms:listmenu style="listview" path="root" items="firstlevel" current="link" currentStyle="current" currentPathStyle="ui-btn-active"/>
- </nav>
- </div><!-- /navbar -->
- </div><!-- /header -->
- <div data-role="content">
- <cms:moduletitle location="left1" />
- <cms:ifmodule location="left1">
- <cms:module location="left1" alt="left1" />
- </cms:ifmodule>
- <cms:pagebody />
- </div><!-- /content -->
- <div data-role="footer">
- <h4>© Copywrite by gbin1.com, all rights reserved.</h4>
- </div>
- </div><!-- /page -->
- </cms:editor>
- <!-- google and baidu code
- <script type="text/javascript">
- var _gaq_gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-19118450-1']);
- _gaq.push(['_trackPageview']);
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
- <script type="text/javascript">
- var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
- document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fd999331ad5ea0c0930f3aa7c3bda9fc1' type='text/javascript'%3E%3C/script%3E"));
- </script>
- <!-- end of google and baidu code -->
- </body>
- </html>
搞定！從上面代碼中我們可以看到，使用模板化的網站設計對于添加jQuery mobile移動web網站非常重要，你只需要替換CSS，并且將所有的jQuery Mobile的處理代碼放置到模板中即可，基本無須修改其它結構，即可看到效果。
當然，整個頁面的樣式和風格可能差強人意，不過我們會在以后的文章中，會教大家如何將mobile web應用修改的更好，例如，修改缺省的UI樣式，添加搜索功能等等。
