首页 使用+jQuery+Mobile+建设时髦的手机+Web+应用

使用+jQuery+Mobile+建设时髦的手机+Web+应用

举报
开通vip

使用+jQuery+Mobile+建设时髦的手机+Web+应用nullnulljQuery Mobile 构建时髦的手机 Web 网站 Winter Lau http://my.oschina.net/javayou内 容内 容手机网站(新旧对比) jQuery Mobile 简单介绍 一个最简单的 jQuery Mobile 网页 使用 jQuery Mobile 开发手机网站 jQuery Mobile 支持的设备 jQuery Mobile 的不足nulljQuery ...

使用+jQuery+Mobile+建设时髦的手机+Web+应用
nullnulljQuery Mobile 构建时髦的手机 Web 网站 Winter Lau http://my.oschina.net/javayou内 容内 容手机网站(新旧对比) jQuery Mobile 简单介绍 一个最简单的 jQuery Mobile 网页 使用 jQuery Mobile 开发手机网站 jQuery Mobile 支持的设备 jQuery Mobile 的不足nulljQuery Mobile 认知jQuery Mobile 认知jQuery Mobile 不是 jQuery 的移动版本 jQuery Mobile 是一个 jQuery 的插件 jQuery Mobile 的大小(最小化) jQuery 1.6.2 (90k) jQuery Mobile CSS (44k) jQuery Mobile JS (71K) img (<10k)jQuery Mobile 的作用jQuery Mobile 的作用可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。 JM开发的web应用像 Native App JM 包含Web应用中的各种常用部件 对话框、表单、列表、按钮、工具条等 使用Ajax加载页面,实现炫丽的页面切换效果jQuery Mobile 关键特点jQuery Mobile 关键特点基于 jQuery 兼容主流的手机浏览器和桌面浏览器 体积小,压缩后20K左右 HTML5风格的配置 页面自动初始化,通过 data-role 属性自动对页面部件进行初始化 触摸屏和鼠标事件支持 丰富的UI部件 可扩展的页面样式框架nullHello HTML5Hello HTML5一个最基本的 jQuery Mobile 页面: Hello HTML5

Hello HTML5

Page content goes here.

©开源中国社区

页面运行结果页面运行结果data-role=headerdata-role=contentdata-role=footer1. data-role=“page” 是可选的(从1.0b2开始) 2. 上述三个元素并非必须 3. 一个页面可以有多个date-role=“page” 并使用 id 来进行标识以及导航 例如 SecondJM 的链接处理方式JM 的链接处理方式默认的链接行为:Ajax 加载 显示(loading…) 以下方式禁用 Ajax 加载链接 ref=‘external’ data-ajax=‘false’ target=‘xxx’ 返回链接 data-rel=‘back’ 其他链接 mailto:xxxx@xxxx.com tel:15555555555 wtai://wp/mc;15555555555 dc:234*234*234JM 内置的6种页面主题JM 内置的6种页面主题引入主题的方式:
JM 的工具栏/导航条JM 的工具栏/导航条在 jQuery Mobile 中, 有两种标准类型的工具栏: Header bar 充当页面标题的作用, 通常是 mobile page中的第一个元素,一般包含有一个页面标题和两个按钮。
Footer bar 通常是最后一个元素,相比于header在内容和功能上面更加自由, 但是一般包含一些文字和按钮。
导航条:
  • 不同风格的工具栏不同风格的工具栏JM 的按钮JM 的按钮1. inline按钮(多个按钮放置一行) 2. 分组按钮 JM 的表格 Grid LayoutJM 的表格 Grid LayoutjQuery Mobile 自带 2 ~ 5 列的表格,分别是:class=ui-grid-a/b/c/d 示例:
    A
    B
    C
    A
    B
    C
    A
    B
    C
    JM 的可折叠块JM 的可折叠块

    I'm a header

    I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.

    表单表单JM 表单JM 表单支持文本框的 placeholder=“…” 属性 通过 data-ajax=“false” 禁用 Ajax 加载 通过 data-theme 让表单使用不同的主题 可以使用HTML5新的类型,如email, tel, number 等