本文目录
jquery mobile 好用吗
好用1. 上手迅速并支持快速迭代：在一个星期多一点的时间里，通过阅读JQuery Mobile文档以及O’Reilly出版的JQuery Mobile书籍，我完成了一个可以工作的app初步版本。在此之前我没有HTML5 / JQuery Mobile开发经验。与Android和iOS相比，使用JQuery Mobile和HTML5构建你的UI和逻辑会比在原生系统下构建快得多。译注：原生系统：原装的操作系统，例如Android原生系统是Google发布未经修改的系统。在本文中，原生应用指直接用系统提供的API开发的程序，与JQuery Mobile开发的程序相对应。我发现Apple的Builder接口的学习曲线十分陡峭，同样学习令人费解的Android布局系统也很耗时间。此外，要使用原生代码将一个list view连接到远程的数据源并具有漂亮的外观是十分复杂的（在Android上是ListView, 在iOS上是UITableView）我能够通过已经掌握的JavaScript和HTML/CSS知识快速地实现同样的功能，无需学习新的adapter,delegate等等抽象概念，只要编写JQuery代码就可以做到。2.避免麻烦的应用商店审批过程以及调试、构建带来的痛苦：为手机开发应用，尤其是iOS系统的手机，最痛苦的过程莫过于通过Apple应用商店的审批。想要让一个原生应用程序发布给iOS用户，你需要等待一个相当长的过程（需要好几天，甚至可能是好几周）。不仅在第一次发布程序时要经历磨难，以后的每一次升级也是如此。这使得QA和发布流程变得复杂，还会增加额外的时间。由于JQuery Mobile应用程序仅仅是一种web应用程序，因此它继承了所有web环境的优点：当用户加载你的网站时，他们就马上“升级”到最新的版本。可以马上修复bug和添加新的特性。即使是在Android系统——应用市场的要求比起Apple环境要宽松得多，在用户不知不觉中完成产品升级也是一件很好的事情。进一步的好处是，发布beta或测试版本会更加容易。只要告诉用户用浏览器打开你的网址就可以了！不需要考虑iOS令人抓狂的DRM，也不需要理会Android必须的APK。3.支持跨平台和跨设备开发：一个巨大的好处是，我的应用程序马上可以在Android和IOS上工作，同样也可以在其他平台上工作。作为一个独立开发者，为不同的平台维护基础代码是一项巨大的工作。为单个手机平台编写高质量的手机应用需要全职工作，为每个平台重复做类似的事情需要大量的资源。应用程序能够在Android和IOS设备上同时工作对我来说是一个巨大收获。更进一步，尤其是对于运行Android各种分支的设备，它们大小和形状各异，想要让你的应用程序在各种各样屏幕分辨率的手机上看起来都不错，这是真正的挑战。对于要求严格的Android开发者来说，按照屏幕大小进行设屏幕分割（从完全最小化到最大进行缩放）会需要很多开发时间。由于浏览器会在每个设备上以相同的方式呈现，关于这个方面你不必有任何担心。
jquery mobile的问题
工具栏（Toolbar）一般用于header，footer和utility bar,他们遍及一个移动页面和程序，所以jQuery Mobile提供了一系列标准的工具栏和导航工具 来涵盖大部分常见情况。AD： 头结构header通常是页面顶部包含页面标题文字和可选按钮以及定位到左侧和/或右导航的工具条。标题文本通常是一个H1标题元素，但它可以使用任何级别的标题(H1 - H6)的，以体现语义的灵活性。 例如，一个页面包含多个 ’page ’时，可以使用H1表示的‘首页’的标题，H2元素表示二级‘页面’的标题。 默认情况下所有标题级别是相同的风格，以保持视觉上的一致性。1. 《div data-role=“header“》 2. 《h1》页面标题《/h1》 3. 《/div》 默认 header 的特性header工具栏默认被设置为’a’主题调板(黑色)，但是你可以方便的 设置主题调板.Back页面标题看到 “back“ 按钮没?框架会自动在每个页面生成该按钮， 以简化创建通用导航条的过程，要阻止header中自动添加该按钮，你可以自行在左边添加按钮 或者为header容器添加 data-backbtn=“false“ 属性。添加按钮在标准header配置中,文本旁边有很多位置可供添加按钮。每个按钮通常都是一个 a标签，但是任何可用的按钮标签都可以添加。 为了节省空间，在工具栏中按钮被设置为inline styling ， 所以按钮的宽度会和它所包含了文本、按钮所匹配。创建自定义后退按钮如果你对a标记使用data-rel=“back“属性，任何在此a上的点击都会模拟后退按钮， 和浏览器的历史按钮一样，并会忽略a标记本身的href。当链接到一个已有页面，比如“主页”， 或者生成后退按钮时或者一个按钮来关闭一个对话框时，该属性十分有用。当在你的源文件中使用此特性时， 请确保提供一个有意义的href来指向引用页的URL(这样才能使得用户在C级浏览器中也能使用该特性)。 同样的，请记住如果你只是想要一个反向过渡而并不实际回到上一页，你应该使用data-direction=“reverse“属性来替代。默认按钮定位header插件会寻找header容器的直接子元素，并自动设置第一个链接在左边的位置，第二个链接在右边。 在以下的例子中，“取消”按钮会出现在左边而“保存”会出现在右边。1. 《div data-role=“header“ data-position=“inline“》 2. 《a href=“index.html“ data-icon=“delete“》取消《/a》 3. 《h1》Edit Contact《/h1》 4. 《a href=“index.html“ data-icon=“check“》保存《/a》 5. 《/div》 按钮会自动适应按钮所在工具栏的调板颜色，所以在一个调板为“a”的header bar里一个按钮也会被设置为“a”， 除非你单独设置按钮的 data-theme属性为其他值(例如b)。1. 《div data-role=“header“ data-position=“inline“》 2. 《a href=“index.html“ data-icon=“delete“》Cancel《/a》 3. 《h1》Edit Contact《/h1》 4. 《a href=“index.html“ data-icon=“check“ data-theme=“b“》Save《/a》 5. 《/div》 用class控制按钮的位置 按钮位置同样可以用class而不是源代码的顺序来控制。当你想按钮只在右边时就非常有用。为a标记添加ui-btn-left 或者ui-btn-right class来指定按钮的位置。在以下例子中，我们只在右边添加了一个按钮，所以必须要添加 data-backbtn=“false“ 来防止出现后退按钮，而右边的按钮则需要添加ui-btn-right class 。1. 《div data-role=“header“ data-position=“inline“ data-backbtn=“false“》 2. 《h1》页面标题《/h1》 3. 《a href=“index.html“ data-icon=“gear“ class=“ui-btn-right“》选项《/a》 4. 《/div》 自定义后退按钮的文本如果您想配置后退按钮的文本，您可以使用 data-back-btn-text=“previous“ 属性， 或者以编程方式设置插件的选项：$.mobile.page.prototype.options.backBtnText = “previous“;。如果你采用编程方式，请在mobileinit事件的处理程序中设置该选项。自定义 header配置如果你要创建一个自定义的header，将你自己的标记包裹在一个 div容器中(在header容器中)， 插件不会应用自动按钮逻辑，所以你可以编写自定义样式来布局你的header内容。
jquery mobile怎么用
如何使用默认调板
jQueryMobile内建了主题控制相关模块。调板可以使用data-theme属性来控制。如果你不指定data-theme属性，将默认采用a调板。以下代码定义了一个采用默认调板的页面：
《div data-role=“page“ id=“page“》《div data-role=“header“》《h1》Sample Page《/h1》《/div》《div data-role=“content“》《p》I’m a sample page!《/p》《/div》《/div》
使用不同的调板：
《div data-role=“page“ id=“page“ data-theme=“e“》《div data-role=“header“》《h1》Sample Page《/h1》《/div》《div data-role=“content“》《p》I’m a sample page!《/p》《/div》《/div》
从代码结构上看是一样的，仅仅使用一个data-theme=“e“便可以将整个页面切换为黄色色调：
默认情况下页面上所有的控件都会继承page上设置的调板，这意味着你只需设置一次便可以更改整个page：
《div data-role=“page“ id=“page“ data-theme=“e“》
当然你也可以独立设置不同元素的调板，同样设置元素的data-theme属性来实现：
《div data-role=“page“ id=“page“》《div data-role=“header“ data-theme=“c“》《h1》Header《/h1》《/div》《div data-role=“content“ data-theme=“d“》《p》Content《/p》《p》 《/p》《ul data-role=“listview“ data-theme=“b“》《li》《a href=“#page1“》Page 1《/a》《/li》《/ul》 《div data-role=“collapsible-set“》《div data-role=“collapsible“ data-theme=“b“》《h3》Header《/h3》《p》Content《/p》《/div》《div data-role=“collapsible“ data-collapsed=“true“ data-theme=“a“》《h3》Header《/h3》《p》Content《/p》《/div》《div data-role=“collapsible“ data-collapsed=“true“ data-theme=“e“》《h3》Header《/h3》《p》Content《/p》《/div》《/div》《/p》《p》 《a href=“#page4“ data-role=“button“ data-icon=“arrow-d“ data-iconpos=“left“ data-theme=“e“》Go To Page 4《/a》《/p》《/div》《div data-role=“footer“》《h4》Footer《/h4》《/div》《/div》
jquerymobile怎么样
jQuery Mobile是jQuery 框架的一个组件（而非jquery的移动版本）。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。个人使用jquery mobile 3、4年左右时间，总的来说，基本上的功能都有，开发也挺方便的，特别是有那么多jquery的使用者，转到jquerymobile上也挺方便的。缺点呢，就是稍显重量级，有一些定制化的东西改起来比较麻烦。
开发jquery mobile用什么工具
query mobile代码助手是为方便jquery mobile中文学习的一款代码自动生成工具，将常用的组件分类成page页面、content内容、Form表单，其中page页面包括header头部、navbar导航、footer底部、grid网格、panel面析、collapsible折叠层，content内容image图片、audio音频、video视频、button按钮、link链接、listview...等等，通过设置组件的属性自动生成代码片段，默认使用的是最新版的jquery mobile 1.4.3版本。
