Just Code

一.表单组件基础 1.组件简介 jQuery Mobile 中的表单组件是基于标准 HTML ，然后在此基础上增强样式，因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用。需要注意的是， jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式，因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便。 jQuery Mobile 的表单组件有以下几种： 文本输入框， type=”text” 标记的 input 元素会自动增强为 jQuery Mobile 样式，无需额外添加 data-role 属性。 文本输入域， textarea 元素会被自动增强，无需额外添加 data-… Read More

在上文《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 表单上》中， Kayo 介绍了一部分 jQuery Mobile 表单组件，接下来将会继续介绍余下的组件以及相关的技巧。 6.选择列表 选择列表是基于 HTML select 元素的，具有原生菜单和自定义菜单两种形式，原生菜单与自定义菜单都有一个样式美化了的选择按钮，不同的是在自定义菜单中原生的 option 元素将被隐藏， jQuery Mobile 会生成一个由 CSS3 和 HTML5 构成的菜单代替，并且这个菜单是 ARIA 的。   关于 ARIA ，这里小科普一下： ARIA， 即 Accessible Rich Internet Appli… Read More

今天开始， “使用 jQuery Mobile 与 HTML5 开发 Web App” 的系列文章将会继续，这次要介绍的是 jQuery Mobile 的内容格式部分，这也是 jQuery Mobile 的组件部分，包含了基本 HTML 样式（Basic HTML styles），主题内容（Theming content），可折叠内容块（Collapsible content blocks），折叠组（Collapsible sets），网格布局（Layout grids），以及一套列表组件（List View），其中 jQuery Mobile 官方把除列表组件外的其他部分统称为内容的格式化（Content formatting），下面 Kayo 将会为… Read More

如 Kayo 之前所写的文章 《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 内容格式》 中所述，这次介绍的是 jQuery Mobile 列表组件。 jQuery Mobile 列表虽然也是对页面内容进行丰富，但 jQuery Mobile 列表会给标准的 HTML 赋予一套样式以及丰富的交互处理，因此它是一套完整的组件，并且 jQuery Mobile 对其进行优化，使到 jQuery Mobile 列表成为易于触摸的控件。下面对列表组件进行详细的介绍。 一.基本的列表 要使用 jQuery Mobile 的列表组件非常简单，只要在 ul, ol 中使用 data-role=”listview… Read More

本文延续之前”使用 jQuery Mobile 与 HTML5 开发 Web App”系列文章，本文介绍的是 jQuery Mobile 中的 jQuery Mobile 工具栏。在 jQuery Mobile 中，有一套完整的工具栏和导航栏组件，这里的工具栏和导航栏并不只是提供了相应的外观样式，还自带有一些常用的辅助功能，下面 Kayo 为大家详细介绍。   也许你会奇怪，不是有工具栏和导航栏吗？为什么标题只写了工具栏！其实这里的工具栏和导航栏并不是分开的组件，而是统一的一套标准组件，既有工具栏的功能也有导航栏的功能，下文就直接简称工具栏了。 一.工具栏基础 在 jQuery Mobile 中，有两套标准工… Read More

在《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础》中，Kayo 曾经简略介绍过 jQuery Mobile 的页面组件，当时只是举了一个简单的例子说明一下页面组件的情况，本文将会拓展说明页面组件的具体细节。 一.页面基础 在 jQuery Mobile 中，页面这个概念与传统的 Web 页面有一个很大的区别 —— jQuery Mobile 中的页面可以是单个的页面，也可以是一个页面中内嵌多个 “Page” ，“Page” 是 jQuery Mobile 中的页面，下面将会为大家详细介绍它。   Page 是 jQuery Mobile 的重要组成部分，由 data-ro… Read More

从本文开始，使用 jQuery Mobile 与 HTML5 开发 Web App 系列将 会进入第三部分——jQuery Mobile 事件与方法，这其中将会利用之前所讲述的 jQuery Mobile 组件作为例子说明，因此 Kayo 建议如果你不熟悉 jQuery Mobile ，可以首先阅读前面两部分的文章。本文会介绍 jQuery Mobile 的默认配置以及一些基本的事件使用方法。 一.默认配置 jQuery Mobile 会有一些默认的设置，如之前介绍过的 Ajax 导航形式，可以选择在默认配置中关闭，这样整个网站都会关闭 jQuery Mobile Ajax 导航。   jQuery Mobile 把所有这些配置都封装在 $.mobile 中… Read More

在前文《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础》中，Kayo 对 jQuery Mobile 事件的基础作出了一些说明，建议在阅读本文前首先阅读前文，这里 Kayo 再引用前文的重要内容。   “jQuery Mobile 在基于本地事件上，创建了一系列的自定义事件，大部分事件是基于触摸设备的使用情况开发的，当然这些事件对于桌面环境也会有适当的处理，开发者可以使用 bind() 函数绑定到需要的页面对象中。 值得注意的是，jQuery Mobile 是基于 Ajax 导航的，所以采用 bind() 方法绑定的事件无法作用于 Ajax 产生的网页元素中，因此建议开… Read More

在系列的上一篇文章《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解》中，Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件，而页面事件由于事件数较多，并且涉及 jQuery 中一个比较复杂的对象 deferred ，因此在本文中单独说明。jQuery Mobile 页面事件使用分为页面加载事件 (Page load events)，页面跳转事件 (Page change events)，页面显示/隐藏事件 (Page show/hide events)，页面初始化事件 (Page initialization events)，页面移除事件 (Page remove events)… Read More

本篇介绍的，是 jQuery Mobile 的方法。对比于 jQuery 方法可以实现 DOM 遍历，动画，Ajax 等各种丰富的操作，jQuery Mobile 的方法更像是 jQuery Mobile 的配置方案，它的主要功能是调整 jQuery Mobile 的效果或运行方式，尤其是页面加载和解析 URL 的部分，而 jQuery Mobile 方法基本都会在 jQuery Mobile 的默认执行中被内部调用，当然作为一系列完整的方法，开发者也可以手动执行它们，以创建更灵活的 Web Apps 。下面 Kayo 详细介绍 jQuery Mobile 的方法，由于方法较多，会分为两篇文章介绍，本文介绍的是与页面加载相关的方法。 一. $.mobile.c… Read More

本文承接上文《使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 方法上》，继续说明 jQuery Mobile 的方法，这部分内容主要与页面 URL 解析相关，除此之外还有其他一些实用方法。   以下两个方法在 jQuery Mobile 1.1 中不赞成使用 八. $.mobile.fixedToolbars.show() 固定工具栏（包括固定的头部栏和尾部栏）可以通过点击屏幕在显示与隐藏之间切换，而这个方法则是手动显示一次工具栏。   它具有一个参数 immediately(boolean, 可选) 。把它设置为 true ，当前激活页面的所有固定工具栏都会立即显示出来。若设置… Read More

jQuery Mobile 在刚推出的时候，曾经宣传了几个重要的特点，除了 Kayo 在本系列文章中多次介绍的“触摸屏优化”外，另外一个最直接的特点就是“响应式设计”，关于响应式设计，Kayo 已经写了不少相关的文章进行说明，而本文要介绍的，是 jQuery Mobile 中为响应式设计作出的优化和工具。   在 jQuery Mobile 测试版本的文档中，有一个栏目名为“Responsive Layout Helpers”，即响应式布局助手，但在正式版的文档中，却删去了这个栏目，但这并不意味着 jQuery Mobile 削减了对响应式设计的支持，相反，jQuery Mobile 对响应式设计有着更好的支持，而且这种支… Read More

绝大多数的软件都需要使用某种具有持久性的方式来存储数据，Web Apps 也不例外，涉及到完整后台的 Web Apps ，可以直接在后台使用 mysql 等数据库来存储数据，但过多的 sql 查询会影响服务器性能，甚至是整个 App 的性能。因此，一些简单有效的存储方式对与 Web Apps 显得很重要，Web Storage 似乎正是为此而设计。下面开始正式介绍 Web Storage 。 一. Web Storage 是什么？ Web Storage 是 HTML5 中用于在客户端存储数据的方法，有两种形式：localStorage（本地存储）和 sessionStorage（会话存储）。这两种方法都允许使用 JavaScript 设置“键值对”，并… Read More

本文要介绍的，是 HTML5 离线网络应用程序的特性，离线网络应用程序在 W3C 中的实际名称是 “Offline Web applications” ，也称离线缓存。当用户打开浏览器时，浏览器会将一个列表中指定的资源都下载并储存在本地。下次当用户再访问这个网络程序时，浏览器会自动引用本地缓存中 相应的文件，而不会再从网络下载这些资源。不管离线网络应用程序是否专为 Web Apps 而设，但这对于 Web Apps 来说无疑是个非常实用的特性，它使到 Web Apps 相对于原生 Apps 的一个重要劣势 —— 高度依赖网络，得以大大减缓。开发者可以利用这个特性把 Web Apps 中的元素缓存到本地端，使到 Web Ap… Read More