制作Gmail式按钮
一个月前,Gmail重新设计了所有按钮。
原来的按钮是这样的。
![bg2009030101.jpg](http://lh3.ggpht.com/_6p3hNkUNWrQ/SaoqHUzfxaI/AAAAAAAAA1w/t01BxtrBeko/s800/bg2009030101.jpg)
![bg2009030102.jpg](http://lh6.ggpht.com/_6p3hNkUNWrQ/SaoqHcT2BXI/AAAAAAAAA14/iCLz39DyE0w/s800/bg2009030102.jpg)
新设计的按钮是这样的。
![bg2009030103.png](http://lh6.ggpht.com/_6p3hNkUNWrQ/SaouT160ZFI/AAAAAAAAA2Y/f27ZntKU0Ug/s800/bg2009030103.png)
事实上,不仅是Gmail,Google公司很多其他项目都在使用后一种风格的按钮。
比如 Google Site。
![bg2009030104.jpg](http://lh6.ggpht.com/_6p3hNkUNWrQ/Saos5frWbII/AAAAAAAAA2I/0K16jlbLUgM/s800/bg2009030104.jpg)
再比如Picasa。
![bg2009030105.jpg](http://lh6.ggpht.com/_6p3hNkUNWrQ/Saos5V4a2MI/AAAAAAAAA2Q/TCXvIgGH59o/s800/bg2009030105.jpg)
这种按钮设计最大的特点,就是完全不使用背景图片,是纯粹的HTML+CSS。同时,它也不使用任何表单元素,目的是在不同浏览器下,争取视觉效果的最大统一。
Google的工程师、设计者Douglas Bowman最近写了篇文章,介绍了设计思路。但是,他最后没有给出代码,只是说:
To see the final code we ended up using in Gmail and Reader, youll have to reverse engineer the button code in one of those products.
如果你想看我们在Gmail和Google Reader中使用的最终代码,你必须自己对按钮代码进行反向工程。
我对这个很有兴趣,昨天晚上就真的去做反向工程了。由于Gmail的CSS文件都是被压缩过的,简直无法读,不过好在按钮部分还没有被压缩,因此还算顺利,就把代码提取出来了。
下面我就来介绍,如何制作Gmail式的按钮。使用的全部都是Gmail中的实际代码。
请先看我制作的一个范例页面。
![bg2009030106.jpg](http://lh5.ggpht.com/_6p3hNkUNWrQ/Saoz2WPtPzI/AAAAAAAAA2g/rfSmO6pNQZc/s800/bg2009030106.jpg)
第一步,按钮的HTML代码如下:
div
div
div
div
div /div
div Button /div
/div
/div
/div
/div
每个按钮都是一个四层的盒状结构,共包含6个div区块。
第二步,将button.css文件加入样式表。
@import url("button.css");
这个时候,按钮就应该可以正常显示了。
第三步,做一些修饰工作。
你可以根据按钮的不同情况,为前面HTML代码中第1个div区块,添加相应的class。
i. 如果一个按钮是主按钮,那么添加"goog-imageless-button-primary"。
ii. 如果一个按钮不允许用户使用,那么添加"goog-imageless-button-disabled"。
iii. 如果好几个按钮组成一个"按钮组",就像范例中的Example 3,那么最左边的按钮添加"goog-imageless-button-collapse-right",最右边的按钮添加"goog-imageless-button-collapse-left",中间的按钮则是同时添加这两个class。
iv. 如果一个按钮保持选中状态,那么添加"goog-imageless-button-checked"。
第四步,用Javascript加入动作代码。我使用的库是jQuery。
i. 加入鼠标悬停效果。
$(".goog-imageless-button").hover(
function(){
if(!$(this).hasClass("goog-imageless-button-disabled")){
$(this).addClass("goog-imageless-button-hover");
}
},
function(){
if(!$(this).hasClass("goog-imageless-button-disabled")){
$(this).removeClass("goog-imageless-button-hover");
}
}
);
ii. 加入鼠标点击的效果。
$(".goog-imageless-button").mousedown(
function(){
if(!$(this).hasClass("goog-imageless-button-disabled")){
$(this).addClass("goog-imageless-button-checked");
}
}
).mouseup(
function(){
if(!$(this).hasClass("goog-imageless-button-disabled")){
$(this).removeClass("goog-imageless-button-checked");
}
}
);
iii. 加入focus和blur事件的代码。
$(".goog-imageless-button").focus(function(){$(this).addClass("goog-imageless-button-focused")});
$(".goog-imageless-button").blur(function(){$(this).removeClass("goog-imageless-button-focused")});
到了这一步,就算基本完成了。以后只要再针对按钮的click或submit事件,写入相应代码与服务器端互动,就可以了。
最后,说一点我的看法。
虽然这种按钮的视觉效果比较理想,有很多设计上的优点,但是局限性也很大。一方面,它需要大量的冗余代码,与语义网的原则相违背;另一方面,它太依赖Javascript和桌面环境,一旦用户使用移动设备或不支持Javascript的浏览器上网,那么整张网页的就完全失效了。所以,除非你开发的是针对桌面浏览器的互联网应用程序,否则还是不要使用上面的设计方法,而是用Douglas Bowman提供的一种比较简化的形式(需要背景图片)。
(完)
autojs模仿QQ长按弹窗菜单 我们自顶向下来写代码, 首先我们写的是setTestRecyclerViewAdapter.js, 他这个里面要做几件事: 加载两个类, Adapter和Holder, Holder先加载, 因为他会在Adapter中使用
Fdog系列(一):思来想去,不如写一个聊天软件,那就从仿QQ注册页面开始吧。 我们来看如何用html写一个注册页面并使用js加载用户输入响应,在第二篇,将带领大家学习如何将html变成jsp,并使用java写其对应的后台响应。
阮一峰 阿里技术专家。著名技术博客作者,技术方向为 React + Node,自由软件运动的支持者
相关文章
- MdxBuilder制作mdx文件-mdict词典
- python制作报表
- html左侧浮动广告代码,如何制作浮动广告 JavaScript制作浮动广告代码
- iOS上架App Store之Appuploader制作描述文件和证书
- 利用二维码进行出入库管理的优势和制作教程
- Maya2021:领航未来的三维动画制作软件+全版本安装包
- docker 如何制作django的docker镜像详解程序员
- 智能小车制作过程全纪录: 二、软件平台— Arduino底盘驱动详解架构师
- 轻松制作:U盘启动Linux系统(u盘启动制作linux)
- 自定义体验:制作 Linux ISO 镜像(定制linuxiso)
- 搭建Redis集群,实现高可用的数据存储(制作redis的集群)
- 一个能对访问者进行编号、记录访问次数、IP、时间的统计制作实例
- 制作WEB在线编辑器-插入HTML标签