jquery mobile

你可能会问的第一个问题是jQuery mobile存在的意义是什么？既然已经有大量能渲染标准桌面网站的移动浏览器，为什么还要专门考虑移动设备？

今天市场上几乎所有智能手机，如iPhone以及android的设备，都可以读取并显示完整的桌面站点，这是事实。用户希望在移动互联网上的体验和桌面电脑

上的一致，这也是事实。一些统计甚至显示，用户使用智能手机时，更倾向于选择桌面版本而不是移动版本。不过，这是因为我们喜欢通过缩放、滚动以及旋转

操作来浏览信息呢，还是因为移动版本的用户体验实在太差了？

在页面加载时随机显示背景
     jQuery Mobile拥有一系列在页面加载时触发的初始化事件，下面是每次页面加载完成后随机显示一个背景。
     CSS如下：
     .my-page  { background: transparent url(../images/bg.jpg)0 0 no-repeat; }
     .my-page.bg1 { background: transparenturl(../images/bg-1.jpg) 0 0 no-repeat; }
     .my-page.bg2 { background: transparenturl(../images/bg-2.jpg) 0 0 no-repeat; }
     .my-page.bg3 { background: transparent url(../images/bg-3.jpg)0 0 no-repeat; }
     JavaScript如下：
     $(‘.my-page‘).live("pagecreate", function(){
          var randombg =Math.floor(Math.random()*4); // 0 to 3
         $(‘.my-page‘).removeClass().addClass(‘bg‘ + randombg);
     });
 禁止加载时弹出信息
     每次加载一个不同的页面时都会触发弹出消息，确实很烦人，要禁用这种情况的发生，添加如下代码
$.mobile.pageLoading(true);
默认情况下是可见的
$.mobile.pageLoading();

自定义主题
     jQuery Mobile框架有5款主题，主题A，主题B，主题C，主题D和主题E。但你也可以轻松为你的web app
     创建一个主题。步骤如下：
     (1)从jQueryMobile CSS文件中复制任何一个主题粘贴到你自己的CSS文件中。
     (2)给你的主题和CSS选择器合理命名。例如，你复制了主题C，而你想命名你的主题为主题Z，重命名.ui-btn-up-c为.ui-btn-up-z等等。
     (3)、修改自定义主题的颜色和样式
     (4)、应用你的自定义主题到任一元素上，仅需设置data-theme属性为z。

 应用自定义字体
     你当用jQuery Mobile构建一个web app时，想用一些特殊字体，你会发现用@font-face自定义字体是一个令人相当满意的方法。

对话框

通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择

例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下

<P><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>

触摸选择的表单元素

jQuery Mobile会自动替换标准的HTML表单元素，例如文本框，复选框，列表框。以这种自定义的样式工作在触摸设备上的表单元素，易用性更强。

例如，复选框将会变得很大，易于点选。点击下拉列表时，将会弹出一组大按钮列表选项，提供给用户选择。

该框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加两个option选项，创建不错的”打开/关闭”开关，

另外一个不错的特点是组合单选框和组合复选框，可以利用fieldset元素添加属性data-role=”controlgroup”来创建一组单选按钮或复选框，jQuery Mobile自动格式化他们的格式。使它们看上去更fashion!

一般来说，开发者不需要关心表单的那些高级特性，开发者仅需要以正常的方式创建你的表单，jQuery Mobile框架会帮你完成剩余的工作。另外有一件事情需要开发人员来完成，即使用div或fieldset 属性data-role=”fieldcontain”包装每一个label/field。这样jQuery Mobile会在label/field对之间添加一个水平分割条。这样的对齐方式可以使其更容易查找。