使用jQuery Mobile移动开发框架将博客转化为Mobile网站67679_第1页
使用jQuery Mobile移动开发框架将博客转化为Mobile网站67679_第2页
使用jQuery Mobile移动开发框架将博客转化为Mobile网站67679_第3页
使用jQuery Mobile移动开发框架将博客转化为Mobile网站67679_第4页
使用jQuery Mobile移动开发框架将博客转化为Mobile网站67679_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、使用jQuery Mobile移动开发框架将博客转化为Mobile网站jQuery Mobile是一个非常不错的移动端网站应用的解决方案，很多网站都使用jQuery Mobile来生成Mobile手机端的移动网站应用，在过去的GBin1博客文章中，我们曾经使用jQuery Mobile利用RSS订阅生成过一个简单的RSS阅读手机端，在今天的教程中，我们将讲解如何将GBin1网站完整的转化为一个全功能的移动端网站，主要的技术使用jQuery Mobile和Java的SiteMesh布局类库。系统设计分析在我们正式的开始开发之前，我们需要大概的分析一下如何设计Mobile网站，很多网站的移动端应用

2、和网站的内容是分离的，也就是说，桌面访问网站和移动设备访问网站的路径是不同的。1.好处是可以分别开发独立的功能，我们可以针对移动端的用户设计独立的UI，展现方式，或者使用方式，往往对于比较大型的网站或者已经上线很久的网站这样设计成本比较低。2.坏处是你需要独立的维护两套代码，无形的增加了开发成本和维护成本在我们GBin1的移动设备网站开发中，我们本着尽量维护同一套代码的原则，希望能够直接重用网站的页面内容和框架。值得一提的是，GBin1架构使用Sitemesh的模板布局功能来生成页面的不同样式和布局，而相关的页面内容及其附属功能，例如，留言等等都是由静态页面或者功能模块生成，这样的设计使得我们

3、可以利用已经存在的页面内容花最小的代价来创建新的移动设备模板，因而可以快速的生成新的移动端web应用，而且整体结构及其阅读使用方式将会和网站本身的使用方式类似，降低了用户的学习成本。如何实现？为了让系统能够自动处理应用不同的模板，这里我们使用了一个小技巧：我们创建一个2级域名， 例如http:/m.*.com，将它通过域名绑定了我们的服务器。然后通过后台的应用来判断当前的域名访问，如果用户通过http:/www.*.com来访问的话，我们将应用网站模板，如果用户尝试使用来访问gbin1的时候，我们将使用移动设备模板来展示网站内容。通过这种方法，系统能够自动的应用不同的模板生成不同的web应用界

4、面。当然，我们也可以做的更好，自动判断客户端的代理类型，如果是移动设备，自动重定向到http:/m.*.com，否则重定向到http:/www.*.com。代码实现设计和实现基本完成以后，我们正式开始开发网站的移动设备模板，使用jQuery Mobile框架。使用jQuery Mobile框架的好处在于，考虑了不同手机的兼容性并且封装了现成的UI组件，我们只需要简单的添加几个html标签即可生成对应的页面，如下：<div data-role="page"> <div data-role="header"> <a href=&

5、quot;/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> <

6、/nav> </div><!- /navbar -> </div><!- /header -> <div data-role="content"> </div><!- /content -> <div data-role="footer"> <h4>&copy; Copywrite by , all rights reserved.</h4> </div> </div><!- /page -&

7、gt;以上代码我们定义了，页头，内容和页脚。在页头中我们添加了两个按钮， 首页和关于页脚中我们添加了版权相关信息。生成页面内容如下：为了更好在不同的移动设备上看到展示效果，这里我们使用一个在线测试响应式设计的web工具- Screenqueri.es，使用它能够帮助你在不同的移动设备上查看网站效果，同时它支持本地localhost应用查看效果，支持不同设备上的预览，例如，iphone，ipad及其其它设备，并且支持横竖屏切换，所以对于我们在线调试非常有帮助。添加相关代码接下里我们需要添加一些相关代码来处理移动设备中的显示，包括：1.图片2.视频3.其它因为不同的设备的显示界面尺寸不一样，为了能

8、够在小尺寸的设备上正常的显示页面，我们需要在加载页面之前，处理相关图片，或者视频的尺寸大小。代码如下：$(document).bind('pageinit' , function() $('img').css( 'max-width':'280px', 'height':'auto' ););注意我们在以上代码中调用了css方法来处理图片，这里为了简单，我们直接将图片设置为最大宽大为280px，如果你需要支持不同的设备，你可以根据设备不同，处理不同的图片宽度。再请注意这里我们使用了pageinit方

9、法，在正常的jQuery开发中，我们一般使用document.ready() 方法来处理，但是对于jQuery mobile来说，当页面导航的时候Ajax被用来加载页面内容，所以DOM ready方法只存在于第一个加载页面，为了能够让每一个页面都可以执行代码，所以我们需要在页面初始化（pageinit）方法中调用相关方法，否则你会看到除了第一个页面外以后其它页面的图片没有任何变化。如果你有其它的代码需要在也页面中调用的话，你同样也可以加载到上面的方法中去。如下：$(document).bind('pageinit' , function() $('img').c

10、ss( '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!='

11、/'&&startc!='?') $(this).attr('href', url + '/'); ););在我们的代码中，我们需要处理图片及其url中的地址问题，所以我们将相关的代码放置到pageinit中。完整模板代码如下：<!DOCTYPE html><!- By GB-><% page contentType="text/html;charset=utf-8"%><% taglib uri="gbin1cms-taglib" pref

12、ix="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:pagetit

13、le /></title> <meta name="description" content="<cms:info id="description" />" /> <meta name="keywords" content="<cms:info id="keywords" />" /> <meta name="author" content="<cms:info id=

14、"author" /> (<cms:info id="authorurl" />)" /> <link rel="stylesheet" href=" /> <script src=" <script src=" <cms:pagehead /> <style> #logo background: url('/gbin1/themes/gbin1_mobile/images/logo.png') no-rep

15、eat 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: norma

16、l; .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 2

17、0px #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', 'he

18、ight':'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).att

19、r('href', url + '/'); ); ); </script></head><body><cms:editor> <div data-role="page"> <div data-role="header"> <a href="/bloghome.html" data-icon="help"><%=new String("u9996u9875")%><

20、/a> <h1 id="logo"></h1> <a href="/portfolio/" data-icon="info"><%=new String("u5173u4e8e")%></a> <div data-role="navbar" data-iconpos="top" data-theme="a"> <nav> <cms:listmenu style=

21、"listview" path="root" items="firstlevel" current="link" currentStyle="current" currentPathStyle="ui-btn-active"/> </nav> </div><!- /navbar -> </div><!- /header -> <div data-role="content"> &

22、lt;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>

23、&copy; Copywrite by , all rights reserved.</h4> </div> </div><!- /page -></cms:editor><!- google and baidu code <script type="text/javascript"> var _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:' = toco

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论