JerryQu的小站

调试代码是每个程序开发者必须熟练掌握的技能，前端开发也不例外。只要你的浏览器不是太陈旧，按下F12就能看到各种调试控制台。这里不打算讲具体项目中如何调试代码，而是介绍下如何在Opera桌面版里远程调试Opera Mobile中的页面。

先下载最新的Opera Mobile Emulator，装好运行，再打开Opera桌面版（版本不要太低），通过热键（Ctrl+Shift+I）或右键点击“检查元素”，激活Opera调试工具Dragonfly。接下来分别在Dragonfly和Opera Mobile（在地址栏输opera:debug敲回车）配置远程调试。

Read the rest of this entry »

今天firefox4正式版提前泄漏，标志着几大浏览器又一次更新换代总算完成。除了更现代的UI，更快的性能，更好的标准支持度外，还有些好玩的东西。

首先是IE9的跳转列表（jump list）。这本来是win7提供给传统应用程序用的，可以让用户快速完成一些任务。现在网页也可以用，在页头定义这些格式的meta信息用IE9打开就行：

<meta content="网站名称" name="application-name" />
<meta content="name=任务名;action-uri=对应链接;icon-uri=icon图片" name="msapplication-task" />
... ...
<meta name="msapplication-navbutton-color" content="black"/>

我的博客也加上了这个功能，效果就是右边那样，对应的代码可以查看源文件。如果给每个任务单独设计icon可能要好看一些。

IE9在处理pinned网页与普通网页相比有不少变化，前者看起来更像一个app。前进后退按钮的颜色是根据favicon自动算的，也可以由页面来指定，相关细节可以查看这篇文章。

其他浏览器想要支持这个功能其实并不难，就看浏览器厂商愿不愿意了。还有人写了个Chrome插件，可以将网页jump list信息提出来以Chrome插件常见的形式来展现。

再说说出来没多久的Opera11.10。大家都知道Opera有个快速拨号的功能，现在各浏览器都拿过去用，Opera就是这样一直被模仿，一直在创新。新版Opera允许网站自定义这个快速拨号。

Read the rest of this entry »

Opera是一个来自挪威的浏览器，有着优秀的缓存机制，浏览网页速度很快，有着自己庞大的粉丝群。但是opera并没有支持上下文菜单事件，也就是说我们通常使用的依靠在页面中重写oncontextmenu事件来实现自定义右键菜单的方法不会工作。那么，有没有别的方法来实现自定义菜单呢？

我们来看看三个著名的产品(Fckeditor、YUI、Google Doc)怎么解决opera没有oncontextmenu事件这个问题：

Fckeditor:Fckeditor这个开源的编辑器我想不用多介绍了吧，它的最新版本已经支持了opera。那么它是怎么处理右键菜单的呢？分析源码可以知道，它注册了onmousedown事件，并且判断鼠标按下的是不是右键，如果是就显示自定义菜单。这样看似很完美，但是有两个致命的弱点：1.默认情况下opera是不检测鼠标右键点击的，也就是右键按下时根本不触发mousedown事件。除非在“工具”-“首选项”-”高级”-”内容”-“Javascript选项”中勾选“允许脚本检测右键单击”；2.opera自身的上下文菜单会跟自定义菜单一起出现，也就是说无法preventDefault。这个问题解决起来有一点点巧妙，经过实验我们可以发现，opera下在type等于button的input上点击右键不会出现系统上下文菜单，于是我们可以在mousedown时在鼠标下放一个几乎透明的type=button的input，再在mouseup的时候隐藏这个button。

YUI的MENU组件:YUI是一个先进的界面库，功能强大，使用简便。那么他是怎么解决这个问题的呢？相比于FCKEditor，YUI换了另外一种思路，既然Opera默认不支持检测右键点击，那就用左键点击来代替总可以吧，但是这样显然会干扰用户正常操作，于是YUI又加了一条规则，按下ctrl键的同时点击左键才等同于右键。“Hold down the control key and click with the left mouse button.”

Google Doc:Google出品的web office套件。Google的技术不用怀疑，那么他是怎么解决这个问题的呢？答案是：既然不能完美解决，干脆就不解决。反正Google Doc的所有操作都不是只有右键菜单才能完成。不愧是Google！

本文提到的两种解决方案实现代码

本文链接：http://www.imququ.com/post/62.html

--EOF--