Day: May 8, 2015

最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库，结合 jQuery Mobile 与 HTML5 ，可以很方便的开发出一款具有良好界面及用户体验的 Web App，在这个过程中我收获良多，因此决定针对使用 jQuery Mobile 与 HTML5 开发 Web App 写一个系列的文章。在开始之前，我首先简述 Web App 与原生 App 各自的优缺点。 一. Web App 与原生 App 的优缺点 1.Web App (1).优点 1.开发成本低，周期短， Web 开发者可以使用现成的工具及开发技术。 2.跨平台，用户只需要一个标准的移动浏览器。 3.维… Read More

这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇，在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件、事件响应以及可以调用的方法，而作为该系列的第一篇文章，Kayo 将会先介绍 jQuery Mobile 的基本情况和一些基础的实例。 一.jQuery Mobile 的渐进增强设计与浏览器支持 在上一篇文章中， Kayo 简单介绍了渐进增强设计的概念，可以参考文中的第四点内容。而 jQuery Mobile 虽然是一些新 web 技术（ HTML5、CSS3 和 JavaScript ）的产物，但对于不能提供以上技术支持的设备也会尽量提供最好的体验。   根据维基百科（ Wi… Read More

一.Button 组件及 jQuery Mobile 如何丰富组件样式 在 jQuery Mobile 里，可以通过给任意链接添加 data-role=“button” 来产生一个 button 组件，jQuery Mobile 会追加一定的样式到链接，值得注意的是，jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应，一般还会追加一些新的元素使到组件的样式更接近于原生的 App 组件样式。下面给出一个例子：   这是一个添加了 data-role=“button” 属性的链接，原 HTML 如下 <a href="#page2" data-role="button">… Read More

一.表单组件基础 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