相关标签

Firefox 的 Jetpack 扩展案例分析:Gmail 邮件提醒

Gtalk 软件的最下方有个很好又很实用的功能,就是 Gmail 邮件提醒功能。会定时更新你 Gmail 中未读新邮件的数量。 试想如果我们将此功能移植到 Firefox 上一定有趣! 第一步,在状态栏中显示图标和数据。 通过 《如何创建 Firefox 的 Jetpack 扩展》 这篇文章,我们可以轻易的创建: jetpack.statusBar.append({ html: ‘<img src=”http://mail.google.com/mail/images/favicon.ico”/><span id=”count”></span>’, //Gmail邮件图标和未读新邮件数 width: 55, //状态栏上的宽度为55 onReady: function(widget) { $(“#count”, widget).css({ //给未读新邮件数添加样式 cursor: “pointer”, paddingLeft:”4px”, fontFamily: “Tahoma, Arial, sans-serif”, verticalAlign: “top”, fontSize: “10px”, lineHeight:”18px”, }); } }); 第二步,获取 Gmail 的数据,更新未读... 12 条评论 »

如何创建 Firefox 的 Jetpack 扩展

Firefox 的 Jetpack 可以让我们很轻松地创建 Firefox 插件,仅通过已掌握的前端技能(HTML/CSS/JS),估计让人更兴奋的一点—— Jetpack 还集成了 jQuery 框架。 Adobe Air 也好,Web OS 也好, Jetpack 也好,至少让我们肯定一点,前端的价值将会在机遇中越来越大的被展现。 下面让我们一起来看看如何一步步创建你的第一个 Firefox 的 Jetpack 扩展: 第一步:安装 Jetpack 插件 Jetpack 插件地址:https://jetpack.mozillalabs.com/install.html 安装完成 Jetpack 插件后,你就可以通过在地址栏中输入 about:jetpack 来访问 Jetpack 本地界面了。 第二步:创建 planabc.js 文件。 planabc.js 的详细代码为: jetpack.statusBar.append({ html: ‘<img src=”http://www.planabc.net/favicon.ico”/>’, width: 16, onReady: function(widget){ $(widget).click(function(){ jetpack.tabs.focused.contentWindow.location = “http://www.planabc.net/&... 15 条评论 »

Firefox 下 innerHTML 的一个 BUG

今天同事 明城 在项目中碰到一个 BUG,代码具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Firefox下innerHTML的一个BUG</title> <style type="text/css"> a { display: block; border: 1px solid red;} div { display: inline; border: 1px solid red;} </style> </head> <body> <a href="javascript:change();">change<div id="count">20</div>aaa</a> <script type="text/javascript"> function change() { var count = document.getElementById(‘count’); var […]

... 18 条评论 »

两个不太常用的 CSS Hack

1、仅 Safari 和 Opera 识别的 Hack @media all and (min-width: 0px) { /* Safari and Opera rules here */ } 或者 @media screen and (-webkit-min-device-pixel-ratio:0) { /* Safari and Opera rules here */ } 注:这里所指代的 Safari 和 Opera 一般为最新版本。 2、仅 Firefox 3 和 IE7 识别的 Hack selector, x:-moz-any-link, x:default { /* Firefox 3 and IE7 […]

... 16 条评论 »

如何让 Firefox 2 和 Firefox 3 版本并存

最新的 Firefox 2 版本为 Firefox 2.0.0.14, Firefox 3 版本为 Firefox 3.0rc1。主流依然是 Firefox 2.0.0.14,但由于在不久的将来 Firefox 2 会升级到 Firefox 3,对于我们前端是好消息(更好更优的功能),也是坏消息(提前进入“作战”状态,现在就应该开始测试网站在 Firefox 3 下的兼容性了!)。 大家都知道 IE 有多版本集成的软件(比如:IETester),而 Firefox 的多版本如何解决呢? 下面提供两个方案: 1、针对Windows的用户:《How to Run both Firefox 2 and Firefox 3 Together》,不爱看或者看不懂英文的,还可以《如何让Firefox2和Firefox3在Windows下共存?》。 2、针对其他平台的用户(aoao 提供的方案):Firefox 装 3.0 的,再安装个 Flock1.x(内核为Firefox 2),就可以并存两个版本,某些插件不支持新版可装 Nightly Tester Tools 来解决。

... 16 条评论 »