使用jQuery Mobile移动开发框架将博客网站快速转化为Mobile网站

 

在线演示

 

jQuery Mobile是一个非常不错的移动端网站应用的解决方案，很多网站都使用jQuery Mobile来生成Mobile手机端的移动网站应用，在过去的GBin1博客文章中，我们曾经使用jQuery Mobile利用RSS订阅生成过一个简单的RSS阅读手机端，在今天的教程中，我们将讲解如何将GBin1网站完整的转化为一个全功能的移动端网站，主要的技术使用jQuery Mobile和Java的SiteMesh布局类库

系统设计分析

在我们正式的开始开发之前，我们需要大概的分析一下如何设计Mobile网站，很多网站的移动端应用和网站的内容是分离的，也就是说，桌面访问网站和移动设备访问网站的路径是不同的。

• 好处是可以分别开发独立的功能，我们可以针对移动端的用户设计独立的UI，展现方式，或者使用方式，往往对于比较大型的网站或者已经上线很久的网站这样设计成本比较低。
• 坏处是你需要独立的维护两套代码，无形的增加了开发成本和维护成本 

在我们GBin1的移动设备网站开发中，我们本着尽量维护同一套代码的原则，希望能够直接重用网站的页面内容和框架。值得一提的是，GBin1架构使用Sitemesh的模板布局功能来生成页面的不同样式和布局，而相关的页面内容及其附属功能，例如，留言等等都是由静态页面或者功能模块生成，这样的设计使得我们可以利用已经存在的页面内容花最小的代价来创建新的移动设备模板，因而可以快速的生成新的移动端web应用，而且整体结构及其阅读使用方式将会和网站本身的使用方式类似，降低了用户的学习成本。