使用jQuery Mobile框架将博客快速转化为Mobile网站
2014-02-06 13:21
429 查看
在线演示
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 -->
以上代码我们定义了，页头，内容和页脚。
在页头中我们添加了两个按钮， 首页和关于
页脚中我们添加了版权相关信息。
生成页面内容如下：
m.gbin1.com
为了更好在不同的移动设备上看到展示效果，这里我们使用一个在线测试响应式设计的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
4000
{
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样式，添加搜索功能等等。
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 -->
以上代码我们定义了，页头，内容和页脚。
在页头中我们添加了两个按钮， 首页和关于
页脚中我们添加了版权相关信息。
生成页面内容如下：
m.gbin1.com
为了更好在不同的移动设备上看到展示效果，这里我们使用一个在线测试响应式设计的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
4000
{
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样式，添加搜索功能等等。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站
- 使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站
- 使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站
- 使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站
- 使用jQuery Mobile 快速开发mobile 网站
- 使用jQuery Mobile 快速开发mobile 网站
- 使用ThinkPHP框架快速开发网站(多图)
- 使用ThinkPHP框架快速搭建网站【转】
- GBin1教程：使用jQuery Mobile快速开发一个手机网站
- [转]使用ThinkPHP框架快速开发网站(多图)
- 使用Nodejs的Express框架快速地创建一个网站
- 使用VTEditor软件快速开发网站系列教程六 框架篇
- 使用ThinkPHP框架快速开发网站(多图)
- 这篇博客的目的在于简单介绍如何快速上手使用Spring MVC框架
- 使用ThinkPHP框架快速开发网站(多图)
- 使用ThinkPHP框架快速开发网站(多图)
- 使用ThinkPHP框架快速开发网站(多图)
- 使用ThinkPHP框架快速搭建网站
- [PHP]使用CodeIgniter快速搭建博客框架
- 使用ThinkPHP框架快速搭建网站