`
jjfat
  • 浏览: 283670 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

阅读更多


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

 

在线演示

 

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

系统设计分析

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

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

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

分享到:
评论

相关推荐

    jquery mobile手机web框架

    jQuery Mobile 是一个强大的移动Web开发框架,专为智能手机和平板电脑设计,旨在简化跨平台的移动应用开发。这个框架基于广泛使用的JavaScript库jQuery,并且利用HTML5和CSS3的新特性,提供了一套全面的触控优化UI...

    Jquery mobile 从设计到开发

    jQuery Mobile 是一个广泛使用的框架,特别适合于移动设备和桌面浏览器。它允许开发者使用HTML5、CSS3和JavaScript来创建响应式网页应用。这个框架之所以在移动开发中受到青睐,是因为它可以将现有的网页转换成触摸...

    jquerymobile设计完整例子

    jQuery Mobile 是一个轻量级、响应式的前端框架,专为触摸设备的网页设计和开发而构建。它简化了创建移动友好的网页应用的过程,提供了丰富的组件和交互效果,使得开发者可以快速构建功能丰富的移动界面。在“jQuery...

    jQuery Mobile快速入门245页完整版(附源码)

    《jQuery Mobile快速入门245页完整版》是一份详尽的教程,旨在帮助初学者和开发者迅速掌握jQuery Mobile框架的使用。jQuery Mobile是基于jQuery库的轻量级、跨平台的移动应用开发框架,特别适合构建触屏优化的移动...

    jQueryMobile HTML5开发框架 v1.5.0 rc1.zip

    在进行毕业设计或构建网站时,这个框架可以帮助快速搭建界面,节省开发时间。同时,源码对于学习和理解 jQuery Mobile 的工作原理非常有价值,有助于提升开发者的技术水平。如果你正在进行计算机案例研究或建站模板...

    JQueryMobile_开发常见问题操作手册|教程

    追信魔盒提供网页壳模式和 PhoneGap 打包模式,帮助开发者将 jQuery Mobile 应用转化为原生应用。 #### 5.2 固定顶部导航栏及问题 使用固定顶部导航栏时,需要注意与页面内容的交互,避免遮挡或影响用户体验。 ###...

    JqueryMobile快速上手教程-实训任务书01-我的第一个JqueryMobile页面

    本教程将帮助你快速掌握如何使用 jQuery Mobile 创建一个基本的移动网页。 ### 一、jQuery Mobile 的核心理念 jQuery Mobile 的主要目标是简化移动 Web 开发,通过简单的 HTML 标签和 CSS 类实现触摸友好的界面。...

    jquerymobile制作的各种漂亮界面源代码

    jQuery Mobile作为一个强大的框架,致力于简化移动应用和网站的开发过程,提供了丰富的组件和样式,使得开发者可以快速创建响应式、触控友好的界面。本篇文章将深入探讨jQuery Mobile的原理、核心概念以及如何利用它...

    jquery.mobile-1.4.5

    总的来说,jQuery Mobile 1.4.5 是一个强大的工具,为移动Web应用开发提供了标准化、易于使用的框架。其丰富的组件库、优化的触摸事件和可定制的主题,使开发者能够快速构建出具有吸引力且高性能的移动应用。通过...

    jquery.mobile.tabs 文件

    综上所述,`jQuery.mobile.tabs` 是一个强大且易于使用的标签页组件,通过结合 `jquery.mobile.tabs.css` 和 `jquery.mobile.tabs.js`,我们可以快速构建功能完备、视觉美观的移动应用界面。在实际开发过程中,结合 ...

    jquery mobile快速入门pdf

    《jQuery Mobile 快速入门》是一本针对初学者和开发者设计的指南,旨在帮助读者迅速掌握使用jQuery Mobile框架创建响应式、触摸友好的移动Web应用的技能。jQuery Mobile是jQuery库的一个扩展,专为移动设备优化,...

    JqueryMobile.zip

    总的来说,jQuery Mobile 是一款强大的工具,它简化了跨平台移动应用的开发,通过优雅的 API 和直观的设计,使开发者能够快速构建功能丰富的触控界面。这个压缩包中的三个文件是构建 jQuery Mobile 应用的基础,理解...

    【HTML5活动】jQuery Mobile框架使用简易指南

    **jQuery Mobile框架使用简易指南** jQuery Mobile是一款基于HTML5和CSS3开发的轻量级、跨平台的前端框架,主要...不断学习和探索,你将发现jQuery Mobile是一个强大且灵活的框架,能帮助你轻松应对移动开发的挑战。

    jQuery Mobile 实现移动客户端多级下拉导航菜单

    首先,jQuery Mobile 的核心在于其“增强”的概念,它允许开发者使用HTML5的基本标记来创建页面和交互元素,然后通过JavaScript动态地将这些元素转化为具有触觉反馈和美观设计的移动友好的组件。对于下拉导航菜单,...

    jquery mobile仿苹果手机短信滑动删除特效

    在IT行业中,jQuery Mobile是一款广泛使用的前端开发框架,专门用于构建响应式、触屏友好的移动Web应用。这个框架基于jQuery库,提供了丰富的组件和样式,使得开发者能够快速创建功能完善的移动界面。在这个特定的...

    jQuery mobile标题式的简介(部分联网)

    jQuery Mobile 是一个轻量级、触控优化的 JavaScript 框架,专为移动设备设计,尤其是智能手机和平板电脑。这个框架充分利用 HTML5 和 CSS3 的功能,为开发者提供了构建跨平台、响应式 web 应用程序的强大工具。在...

    方便打印的jQuery mobile data属性

    在前端开发领域,jQuery Mobile是一个流行的框架,它与HTML5结合使用,提供了丰富的用户界面组件和交互效果。本文主要关注jQuery Mobile中的一个关键特性——data属性,这些属性用于定制和增强UI元素的功能和外观,...

    jQuery mobile滑动和缩略图的新闻导航

    jQuery Mobile是一个轻量级、响应式的前端框架,特别适合开发移动设备上的Web应用。它提供了丰富的交互元素和组件,使开发者能够轻松构建用户友好的触控界面。 首先,让我们了解滑动(Slide)效果在jQuery Mobile中...

Global site tag (gtag.js) - Google Analytics