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