2小时学会jquery mobile开发移动网站

jQuery Mobile: http://jquerymobile.com,一个基于jquery的html 5移动网站框架，用它做出来的网站界面和App风格类似。方案选型过程见 http://lutaf.com/145.htm

• 优点1：开发特别简单，不需要美术资源，甚至不需要太多css/html编程经验，甚至不需要js编程技能，普通程序员就能很快学会制作出 美观大方的 mobile site
• 优点2：只用js进行渲染，不改变html本身结构，没有特殊标签，都是通过html tag的class来控制显示，这样做出来的网站对搜索引擎是很友好的，比Ext JS，GWT之流的要强很多
• 缺点1：风格和App类似，在浏览器里面看起来比较重，不够小清新，那些跨平台App开发工具比如 PhoneGap 都喜欢使用jQuery Mobile
• 缺点2: 和native应用比，不是特别的流畅，毕竟需要浏览器执行

jQuery Mobile简明教程

jQuery Mobile文档,内容不多，耐心看完只需要1个小时，大体分成8大功能点

1. page：最基准单元，包括header,footer,导航栏
2. dialog：对话框,在手机屏幕弹出dialog来交互，我觉得不是很友好
3. transitions：转场效果
4. form:表单
5. button：大button，小button(放在各种栏上的都是小button)，还提供了若干内置标准icon
6. listview：列表，这是jquery mobile的核心UI，提供了10几种类型的List，简单好用
7. event：各种滚动，滑动，拖拽事件
8. Theming：官方提供了5种皮肤，也有工具可以自定义，切换皮肤只需要改动一个class

jQuery Mobile全面支持ajax，但也可以当做普通html模板在后端渲染数据，我选择后面一种

学习方法

• 零门槛，耐心读完文档就学会了，内容也不多
• 官网提供了一个可视化编辑器： Codiqa,收费每个月16刀，没有必要用，jQuery Mobile超出你想象的简单，开工之前，先在纸上画好mobile site的结构，打开编辑器直接写
• 资源: 我把http://m.lutaf.com的全部静态html模板都放在

  https://github.com/lutaf/jquery-mobile-site-demo

  供大家参考

延伸

本博客基于django，部署在一个128Mvps上，为了省内存，把mobile site和web site都放在同一个project里，通过用户的user agent判断应该访问具体哪一个site

mobile site的地址是: http://m.lutaf.com

在django里面，要实现url 全局拦截器，得写middleware，我写了两个，代码在这里：

https://github.com/lutaf/django-mobile-site-redirect-middleware