3.0 更新日志：

1. 所有 Dom 结构改用 Javascript 加载；
2. 尺子刻度以及刻度值改为 Canvas 绘制；
3. 支持水平翻转以及垂直反转；
4. 去除最小化功能；
5. 增加中文支持；
6. 用户配置项中增加语言选择项；
7. 增加部分快捷键：“q”（关闭尺子）、“d”（改变水平、垂直方向）、“o”（水平或者垂直方向反转）、“r”（恢复尺子到正常状态）；

注意：此版本仅支持 Opera 10.5 以上版本。

下载安装：http://widgets.opera.com/widget/14151/3.0/（如果你正在使用的是 Opera 浏览器，也可以通过点击地址栏右侧的 Widget 小按钮直接下载安装）

源码下载：http://code.google.com/p/gorgeous-ruler/downloads/detail?name=Gorgeous%20Ruler%203.0.7z&can=2&q=（内含svn文件）

SVN 地址：http://gorgeous-ruler.googlecode.com/svn/trunk/ gorgeous-ruler-read-only

Google Code 地址：http://code.google.com/p/gorgeous-ruler/

小结

这次编码花了很久的时间，中间也遇到了不少的困难，尤其是对翻转效果的尝试，移除 HTML 中的 Dom 结构是为了简化翻转的困难，曾经考虑尝试过 SVG、Canvas、CSS3 的翻转效果，最终选择了 CSS3 的方式，因为其最为便捷，但是 CSS3 对 Canvas 元素的翻转支持还存在一些问题，随后会对这部分以及 Canvas 的 drawImage 方法有文章进行分析。

input[type="text"], textarea { border-radius:5px;}

如上，如果我这么写，在 Opera 下是没有圆角效果的，而在 Chrome 下是有的，顺便测试了下 Firefox 和 Safari：

input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/}

默认情况下，Opera 和 Firefox 不会现出圆角效果，而 Chrome 和 Safari 可以，在 Opera 和 Firefox 下要想显示出圆角效果必须设置其 border-style(不能为 none)：

input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/ border-style:solid;}

或者直接设置其 width、style、color：

input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/ border:1px solid #ccc;}

代码太长，不贴了哈，来这里看吧：http://code.google.com/p/opera-userjs/source/browse/trunk/userjs/operatouch.js

作为一个前端er，除了关注内核外，我最关注的还是调试工具，Opera 的调试工具 Dragonfly 一直被我鄙视，连IE的 Developer Tool 都不如，另外两个 DOM snapshot 和 Develop Console 当然也不尽人意。可喜的是，在 10.5 版本里，Dragonfly 有了比较大的改进，目前尚不清楚这一版本用的 Dragonfly 是什么版本，在 config 中也修改不了 Dragonfly 的引用地址，杯具呀。。。估计应该是一个比较稳定的版本，应该是正常的版本，只是在 Opera 10.5 中的表现不一样吧。下面是新版的一些改进：

1.Dragonfly 的启动

在以往的版本里，我们启动 Dragonfly 的时候，页面会重新载入，但是在这一新的版本里，启动 Dragonfly 不再刷新页面，我觉得这是最大的改进。。。O(∩_∩)O哈哈~ 省了不少事儿，易用性提高了很多。

2.Dom 查看

在查看dom节点的时候，选中处会加上蒙层，并有线条将其包围，可以很清晰的查看当前dom元素并且还可以测是否和其它元素对齐。。。嘿嘿~对比下下边这张图，可以看到之前的版本有多么挫。。。（左边是旧，右边是新）

3.为选中元素添加边框

之前的版本，选中一个元素后，鼠标往 Dragonfly 里移动的时候已选的元素边框就到别的地方了，到 Dragonfly 后还得再次点击才能再次让边框出现在相应的元素上。在新的版本里提供了一个功能（下图红框框中的地方），就是为选中元素添加边框，很是方便，这样子就可以省去不少操作，如下图所示（可以看到新版合并了旧版的几个按钮到一个设置按钮中去了~）：

4.网页放大镜和颜色选择器

新版里添加了网页放大镜和颜色选择器功能，感觉还不错哈，可以选择放大区域大小已经放大倍数，赞~如下图所示：

其它几个标签没什么变化，甚至有些还不能用，正式版的时候应该都会修复，虽然改进了一些小功能，但是很多东东还是没有改进，不过非常的期待更大的改进。Dragonfly 本身有很多其它调试工具所不具备的nb特性，但是也缺少很多其它调试工具所有的nb特性，明年我也会找时间进入 Dragonfly 的改进，打造有 Firebug 特色的 Dragonfly ….

杭州下雪了，同事也起来了，哥继续去找房子。。。杯具啊。。。

Code:

/**
 * 搜狗云输入法
 * @url *
 * @description 在页面的input、textarea等可点击区域开启搜狗云输入法
 */

document.addEventListener(
	'DOMContentLoaded',
	function() {
		var arr = [],
	   		inputs = document.getElementsByTagName('input'),
			textareas = document.getElementsByTagName('textarea');
		if(inputs.length == 0 && textareas.length == 0) return;
		//合并数组
		for(var i=0,j=Math.max(inputs.length,textareas.length); i<j; i++) {
			inputs[i] && arr.push(inputs[i]);
			textareas[i] && arr.push(textareas[i]);
		}
		//加载输入法
		for(var k=0; k<arr.length; k++) {
			arr[k].addEventListener(
				'focus',
				function(e) {
					var target = e.target;
					if(document.getElementById('SG_Shurufa') || (target.tagName.toLowerCase() == 'input' && target.type != 'text')) return;
					var script = document.createElement('script');
					script.setAttribute('src','http://web.pinyin.sogou.com/web_ime/init_web.php');
                                                        script.id = 'SG_Shurufa';
					document.body.appendChild(script);

				},false
			);
		}
	},false
);

再次推荐一下管理UserJs的Unite应用，你可以把它添加到面板上，方便易用：去看看。。。

Code:

/**
 * 163二级频道
 * @url http://*.163.com
 * @description 163二级频道的频道内导航条优化，将在新窗口打开更改为本窗口打开，适用频道：科技、娱乐、新闻，可能其它类似频道也适用
 */

if(location.hostname.indexOf('.163.com') != -1 && location.hostname.indexOf('www.163.com') == -1) {
	document.addEventListener(
		'DOMContentLoaded',
		function() {
			var el = document.getElementsByClassName('nav');
			for(var i=0;i<el.length;i++) {
				if(el[i].parentNode.className == 'nav_channel') {
					el[i].addEventListener(
						'click',
						function(e) {
							var target = e.target;
							if(target.tagName.toLowerCase() == 'a') {
								e.preventDefault();
								window.location.href = target.href;
							}
						},false
					);
					break;
				}
			}
		},false
	);
}

/**
 * 淘宝首页
 * @url http://www.taobao.com
 * @description 屏蔽淘宝首页弹出广告
*/
if( location.hostname.indexOf('www.taobao.com') != -1 ) {
	//阻止广告加载
	window.opera.addEventListener(
   		'BeforeEventListener.load',
   		function (e) {
			if(e.listener.toString().indexOf('function(){q._showAds()}') != -1) {
				e.preventDefault();
				return;
			}
   		}, false
	);
	//屏蔽弹出窗口
	window.opera.addEventListener(
   		'BeforeEventListener.click',
   		function (e) {
			if(e.listener.toString().indexOf('function(D){return o.call(z,YAHOO.util.Event.getEvent(D,y),u)}') != -1) {
				e.preventDefault();
				return;
			}
   		}, false
	);

	//屏蔽右下角新人欢迎窗口
	window.opera.addEventListener(
    	'BeforeExternalScript',
    	function (e) {
			if(e.element.src.indexOf('wizard.js') != -1) {
				e.preventDefault();
				return;
			}
    	}, false
	);
}

然后是淘宝的登录页，未安装插件的话会造成浏览器假死，之前的一个修复方案造成淘江湖的登录页面失去了密码框，这里做下修正，并优化了一下，如果进入的是非标准登录页面跳转到标准登录页面，并移除登录切换的tab，如果你已经安装了插件可以不是用这段脚本：

/**
 * 淘宝登录页
 * @url http://member1.taobao.com/member/login.jhtml,http://login.taobao.com/member/login.jhtml,https://login.taobao.com/member/login.jhtml
 * @description 防止未装支付宝插件的用户在登录页面卡死，禁掉插件检测，请使用标准登录
 * 1.用户需要设置opera:config#User Prefs中的User JavaScript on HTTPS为允许(请谨慎使用！);
 * 2.如果非标准登录状态，直接跳转到标准登录页面；
 * 3.用户可以使用站点首选项里的禁止插件来做到同样的效果。
 */
if(location.hostname.indexOf('member1.taobao.com') != -1 || location.hostname.indexOf('login.taobao.com') != -1) {
	//去除object
	window.opera.addEventListener(
		'BeforeScript',
		function(e) {
			var _s = e.element;
			if(!_s.src && _s.text.indexOf('window.ActiveXObject') != -1) {
				var img = document.getElementById('J_InstallPlugin');
				if(img) {
			   		_s.text = '';
					var ul = document.getElementById('J_LoginTabs'),
						href = ul.getElementsByTagName('a')[0].href;
					window.location.href != href && (window.location.href = href);
					ul.parentNode.removeChild(ul);
				} else {
					_s.text = 'document.write(\'<label for="TMP_password">密   码：</label><input type="password" tabindex="3" maxlength="20" id="TMP_password" name="TMP_password" />\')';
				}
			}
		},false
	);
}

如果你是一个藕粉，并且愿意和大家一起分享你的Userjs&Usercss，可以和我一起去维护这个开源项目，大家都可以从这里直接更新到最新的Userjs：http://code.google.com/p/gorgeous-ruler/。

另外推荐使用一个Opera Unite应用管理Userjs：UJS Manager。

2.0改进的一些地方及功能：

1. 背景使用canvas绘制，支持用户自定义渐变，包括开始颜色、透明度、结束颜色、透明度以及渐变的长度；
2. 左侧/上侧使用圆角展示；
3. 改变方向时，以操作的几个icon为圆心，仅尺子动，而操作按钮不跟随跳动；
4. 最大最小化使用动画；
5. 最小化后，不在初始化尺子位置，亦不再更换图片，仅将最小化icon和最大化icon做替换；
6. 当鼠标移至边缘时，刻度始终显示在尺子内，避免显示在外侧被遮挡；
7. JS、CSS文件做了优化；
8. 更换了icon图标；

下载安装：http://widgets.opera.com/widget/14151/2.0/

源码下载：http://code.google.com/p/gorgeous-ruler/downloads/list

小结：

在用canvas去绘制背景的时候，纠结了一点，就是在尺子进行旋转的时候，采用什么方式？最初想着是是使用drawImage的rotate进行旋转，不过后来发现这个东东存在一些缺陷，而且感觉其实效率并不是很高，而本身这个canvas仅仅是绘制了一个圆弧和一个方框，我完全可以直接重绘，性能并不差，而且省去了诸多麻烦，最终还是选择了重绘。

UserJs Code:

/**
 * 淘宝登录页
 * @url http://member1.taobao.com/member/login.jhtml,http://login.taobao.com/member/login.jhtml,https://login.taobao.com/member/login.jhtml
 * @description 防止未装支付宝插件的用户在登录页面卡死，禁掉插件检测，请使用标准登录
 * 1.用户需要设置opera:config#User Prefs中的User JavaScript on HTTPS为允许(请谨慎使用！);
 * 2.用户可以使用站点首选项里的禁止插件来做到同样的效果。
 */
if(location.hostname.indexOf('member1.taobao.com') != -1 || location.hostname.indexOf('login.taobao.com') != -1) {
	window.opera.addEventListener(
		'BeforeScript',
		function(e) {
			var _s = e.element;
			!_s.src && _s.text.indexOf('window.ActiveXObject') != -1 && (_s.text = '');
		},false
	);
}

目前只认Opera的hack就剩下了：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { …. }，但是这个很明显太长了。。。估计没多少人能记住，也没多少人喜欢用。今天做页面的时候发现了通过使用@media all and () {}，只有Opera会认，其它浏览器不认，但是有一点需要注意的是，如果你确定要使用这个hack，必须要在样式表的末尾去用，因为在Firefox下，会将这段之后的所有样式忽略，其它浏览器不会。（类似的@media screen and () {}也一样的）

Demo地址：仅Opera能显示绿色背景 仅Firefox不能显示红色背景

测试浏览器版本：IE6、7、8、Opera 10.10 Build1840、Firefox 3.5.3、Safari 4.0.3、Google Chrome 3.0。