使用jQuery Mobile框架將博客快速轉(zhuǎn)化為Mobile網(wǎng)站
在線演示
jQuery Mobile是一個非常不錯的移動端網(wǎng)站應(yīng)用的解決方案，很多網(wǎng)站都使用jQuery Mobile來生成Mobile手機端的移動網(wǎng)站應(yīng)用，在過去的GBin1博客文章中，我們曾經(jīng)使用jQuery Mobile利用RSS訂閱生成過一個簡單的RSS閱讀手機端，在今天的教程中，我們將講解如何將GBin1網(wǎng)站完整的轉(zhuǎn)化為一個全功能的移動端網(wǎng)站，主要的技術(shù)使用jQuery Mobile和Java的SiteMesh布局類庫
系統(tǒng)設(shè)計分析
在我們正式的開始開發(fā)之前，我們需要大概的分析一下如何設(shè)計Mobile網(wǎng)站，很多網(wǎng)站的移動端應(yīng)用和網(wǎng)站的內(nèi)容是分離的，也就是說，桌面訪問網(wǎng)站和移動設(shè)備訪問網(wǎng)站的路徑是不同的。
- 好處是可以分別開發(fā)獨立的功能，我們可以針對移動端的用戶設(shè)計獨立的UI，展現(xiàn)方式，或者使用方式，往往對于比較大型的網(wǎng)站或者已經(jīng)上線很久的網(wǎng)站這樣設(shè)計成本比較低。
- 壞處是你需要獨立的維護兩套代碼，無形的增加了開發(fā)成本和維護成本
在我們GBin1的移動設(shè)備網(wǎng)站開發(fā)中，我們本著盡量維護同一套代碼的原則，希望能夠直接重用網(wǎng)站的頁面內(nèi)容和框架。值得一提的是，GBin1架 構(gòu)使用Sitemesh的模板布局功能來生成頁面的不同樣式和布局，而相關(guān)的頁面內(nèi)容及其附屬功能，例如，留言等等都是由靜態(tài)頁面或者功能模塊生成，這樣 的設(shè)計使得我們可以利用已經(jīng)存在的頁面內(nèi)容花最小的代價來創(chuàng)建新的移動設(shè)備模板，因而可以快速的生成新的移動端web應(yīng)用，而且整體結(jié)構(gòu)及其閱讀使用方式 將會和網(wǎng)站本身的使用方式類似，降低了用戶的學(xué)習(xí)成本。
如何實現(xiàn)？
為了讓系統(tǒng)能夠自動處理應(yīng)用不同的模板，這里我們使用了一個小技巧：
我們創(chuàng)建一個2級域名， 例如， http://m.gbin1.com，將它通過域名綁定了我們的服務(wù)器。然后通過后臺的應(yīng)用來判斷當前的域名訪問，如果用戶通過http://www.gbin1.com來訪問的話，我們將應(yīng)用網(wǎng)站模板，如果用戶嘗試使用http://m.gbin1.com來訪問gbin1的時候，我們將使用移動設(shè)備模板來展示網(wǎng)站內(nèi)容。通過這種方法，系統(tǒng)能夠自動的應(yīng)用不同的模板生成不同的web應(yīng)用界面。
當然，我們也可以做的更好，自動判斷客戶端的代理類型，如果是移動設(shè)備，自動重定向到http://m.gbin1.com，否則重定向到http://www.gbin1.com。
代碼實現(xiàn)
設(shè)計和實現(xiàn)基本完成以后，我們正式開始開發(fā)網(wǎng)站的移動設(shè)備模板，使用jQuery Mobile框架。使用jQuery Mobile框架的好處在于，考慮了不同手機的兼容性并且封裝了現(xiàn)成的UI組件，我們只需要簡單的添加幾個html標簽即可生成對應(yīng)的頁面，如下：
- <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">關(guān)于</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 -->
以上代碼我們定義了，頁頭，內(nèi)容和頁腳。
在頁頭中我們添加了兩個按鈕， 首頁和關(guān)于
頁腳中我們添加了版權(quán)相關(guān)信息。
生成頁面內(nèi)容如下：
為了更好在不同的移動設(shè)備上看到展示效果，這里我們使用一個在線測試響應(yīng)式設(shè)計的web工具- Screenqueri.es，使用它能夠幫助你在不同的移動設(shè)備上查看網(wǎng)站效果，同時它支持本地localhost應(yīng)用查看效果，支持不同設(shè)備上的預(yù)覽，例如，iphone，ipad及其其它設(shè)備，并且支持橫豎屏切換，所以對于我們在線調(diào)試非常有幫助。
添加相關(guān)代碼
接下里我們需要添加一些相關(guān)代碼來處理移動設(shè)備中的顯示，包括：
- 圖片
- 視頻
- 其它
因為不同的設(shè)備的顯示界面尺寸不一樣，為了能夠在小尺寸的設(shè)備上正常的顯示頁面，我們需要在加載頁面之前，處理相關(guān)圖片，或者視頻的尺寸大小。代碼如下：
- $(document).bind('pageinit' , function(){
- $('img').css({
- 'max-width':'280px',
- 'height':'auto'
- });
- });
注意我們在以上代碼中調(diào)用了css方法來處理圖片，這里為了簡單，我們直接將圖片設(shè)置為最大寬大為280px，如果你需要支持不同的設(shè)備，你可以根據(jù)設(shè)備不同，處理不同的圖片寬度。
再 請注意這里我們使用了pageinit方法，在正常的jQuery開發(fā)中，我們一般使用document.ready() 方法來處理，但是對于jQuery mobile來說，當頁面導(dǎo)航的時候Ajax被用來加載頁面內(nèi)容，所以DOM ready方法只存在于第一個加載頁面，為了能夠讓每一個頁面都可以執(zhí)行代碼，所以我們需要在頁面初始化(pageinit)方法中調(diào)用相關(guān)方法，否則你 會看到除了第一個頁面外以后其它頁面的圖片沒有任何變化。
如果你有其它的代碼需要在也頁面中調(diào)用的話，你同樣也可以加載到上面的方法中去。如下：
- $(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中的地址問題，所以我們將相關(guān)的代碼放置到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 + "#/h.js%3Fd999331ad5ea0c0930f3aa7c3bda9fc1' type='text/javascript'%3E%3C/script%3E"));
- </script>
- <!-- end of google and baidu code -->
- </body>
- </html>
搞定！從上面代碼中我們可以看到，使用模板化的網(wǎng)站設(shè)計對于添加jQuery mobile移動web網(wǎng)站非常重要，你只需要替換CSS，并且將所有的jQuery Mobile的處理代碼放置到模板中即可，基本無須修改其它結(jié)構(gòu)，即可看到效果。
當然，整個頁面的樣式和風(fēng)格可能差強人意，不過我們會在以后的文章中，會教大家如何將mobile web應(yīng)用修改的更好，例如，修改缺省的UI樣式，添加搜索功能等等。
