预览模式: 普通 | 列表

模态对话框

模态对话框是一种带有圆角标题栏和关闭按钮的伪浮动层,用于独占事件的应用。任何结构化的页面都可以用data-rel="dialog"链接的方式实现模态对话框应用。

例如:<a href="foo.html" data-rel="dialog">Open dialog</a>

这个页面切换效果同样可以使用标准页面的data-transition参数效果。建议使用"pop"、"slideup" 和"flip"参数以达到更好的效果。

这个模态对话框会默认生成关闭按钮,用于回到父级页面。在脚本能力较弱的设备上也可以添加一个带有data-rel="back"的链接来实现关闭按钮。

查看更多...

分类:前端技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4838


概述

此文档是基于jQuery Mobile框架的移动设备Web应用开发知识而编制,目的是为了方便开发人员快速的掌握此框架的开发应用,其中包含了框架的基础应用知识和在团队协作开发中的常规约定。

框架特性

JQuery Mobile以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的UI框架:jQuery的移动框架可以让你为所有流行的移动平台设计一个高度定制和品牌化的Web应用程序,而不必为每个移动设备编写独特的应用程序或操作系统。

jQuery Mobile目前支持的移动平台有苹果公司的iOS(iPhone,ipad,iPod Touch),Android,Black Berry OS6.0,惠普 WebOS,Mozilla的Fennec和Opera Mobile。今后,将增加包括Windows Mobile,Symbian和MeeGo在内的更多移动平台。

查看更多...

分类:前端技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6168

iPhone 4再一次的改变

 

当前的软件产品,整体来说设计方面的薄弱可谓弱中之弱。大多产品开发中对编码的偏重:目前中国的软件公司开创者,多为编程技术出身,为此对程序编码的宠爱有加也就成为自然,应该承认,产品的思想性、运行速度和稳定性无庸置疑,产品业务的核心地位也从没有人怀疑过,然而,作为产品用户和计算机交互核心以及产品形象工程的UI环节一直尚未得到开发者应有的重视。产品一旦投放市场,当界面遭到用户非议的时候,才会想到花上可怜的一点时间和金钱把产品做以“美化”(仅仅是美化),而这种敷衍最终往往难以得到用户的接受。所以说设计绝对不是单单对产品美化的工作。

 

查看更多...

分类:用户体验 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3930

汇总本年度移动终端设备应用程序和热点问题之后,不难看出其中的趋势性特征,如精致的界面、操作体验、基于硬件的应用和消息推送等问题。可以预计的是,在2011年的产品设计中这些特征会逐渐得到强化。

精致实用的界面

精致实用的界面

自从iPhone 4视网膜屏幕(Retina Display)发布,成为迄今为止在移动设备上能见到的最细腻、显示细节最清晰的屏幕,326显示精度比普通印刷品还要高,而以往普通移动终端设备的96像素,Android平台各种移动终端设备在120-240像素区间内,iPhone 4之前的屏幕也只有164像素。

查看更多...

分类:用户体验 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4283

跨浏览器开发经验总结(1)

image

关于web开发中在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,但在很多情形,一种近似的兼容还是相对容易实现。本文将跨浏览器开发和测试测试有关的各种问题与知识。

浏览器家族

一般来说,跨浏览器是指针对不同的渲染引擎: Trident,Gecko,Webkit,Presto 等。

由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。

Html标记

!DOCTYPE 声明指定文档遵从的 DTD,如:

查看更多...

分类:前端技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3454

jQuery Mobile框架开发教程(1)

JQuery Mobile以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的UI框架:jQuery的移动框架可以让你为所有流行的移动平台设计一个高度定制和品牌化的Web应用程序,而不必为每个移动设备编写独特的应用程序或操作系统。

jQuery Mobile目前支持的移动平台有苹果公司的iOS(iPhone,ipad,iPod  Touch),Android,Black Berry OS6.0,惠普 WebOS,Mozilla的Fennec和Opera Mobile。今后,将增加包括Windows Mobile,Symbian和MeeGo在内的更多移动平台。

根据jQuery Mobile项目网站,目前jQuery Mobile的特性包括

  • jQuery核心——与jQuery桌面版一致的jQuery核心和语法,以及最小的学习曲线。
  • 兼容所有主流的移动平台——iOS、Android、BlackBerry,Palm WebOS、Symbian、Windows Mobile、BaDa、MeeGo以及所有支持HTML的移动平台。
  • 轻量级 alpha版本的jQuery Mobile 其JavaScript 大小仅为 12KB , CSS 文件也只有 6KB大小。
  • 标记驱动的配置 jQuery Mobile采用完全的标记驱动而不需要JavaScript的配置。
  • 渐进增强 jQuery Mobile采用完全的渐进增强原则:通过一个全功能的HTML网页,和额外的JavaScript功能层,提供顶级的在线体验。这意味着即使移动浏览器不支持JavaScript,基于jQueryMobile的移动应用程序仍能正常的使用。
  • 自动初始化通过使用 mobilize()函数自动初始化页面上的所有jQuery部件。
  • 无障碍 包括WAI-ARIA在内的无障碍功能以确保页面能在类似于VoiceOver等语音辅助程序和其他辅助技术下正常使用。
  • 简单的API 为用户提供鼠标、触摸和光标焦点简单的输入法支持。
  • 强大的主题化框架 jQuery Mobile提供强大的主题化框架和UI接口。

在以下的一段时间里我将会结合我们团队的开发应用过程和遇到的问题进行探讨

第一部分 初始化和配置

查看更多...

分类:前端技术 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 7282