昨晚在玩博客的东西发现的一个问题,就是 Opera 10.5 默认的设置不了 input 和 textarea 的圆角:
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
Opera 在本周二发布了 Opera 10.5 Pre-alpha,这个版本使用 Presto 2.5内核,并且采用了今年年初才宣布的试验品 — Carakan(JavaScript 引擎) 和 Vega (图形库),非常的令人兴废!之前以为 Presto 2.3的使用怎么也要等上个一年半载,直到 Opera Mobile 10 使用了 Presto 2.4,这个期望稍微提前了那么点,以为 Opera 下个版本一定会调过 Presto 2.3 使用 2.4 版本,结果这丫的直接搞上了 Presto 2.5,非常的令我惊讶,之前还在骂 Opera 不务正业,看来还是在默默的搞。Carakan 和 Vega 自年初宣布之后就再也没有动静了,我都以为这两个东东已经被扼杀在襁褓之中了,没想到这次竟然“生蛋”啦!非常的不错哈~关于 Carakan 的评测已经有很多了,相信大家都看到了,Presto 2.5 的相关文档还没有出,具体的支持尚不得知,但是目前已确定支持 background、border、box-shadow的所有属性,凭借 Vega 的优势,它们的展现非常的完美,Canvas、svg 我还没有测试,应该同样很完美,而且效率应该会有不小的提升,期待 10.5 的正式版本。
作为一个前端er,除了关注内核外,我最关注的还是调试工具,Opera 的调试工具 Dragonfly 一直被我鄙视,连IE的 Developer Tool 都不如,另外两个 DOM snapshot 和 Develop Console 当然也不尽人意。可喜的是,在 10.5 版本里,Dragonfly 有了比较大的改进,目前尚不清楚这一版本用的 Dragonfly 是什么版本,在 config 中也修改不了 Dragonfly 的引用地址,杯具呀。。。估计应该是一个比较稳定的版本,应该是正常的版本,只是在 Opera 10.5 中的表现不一样吧。下面是新版的一些改进:
继续阅读 »
刚在论坛上看到有人要Opera的搜狗云输入法,花了一点点时间写了下,分享出来。这个脚本会在页面加载后在页面上的可输入区域(input、textarea)注册加载事件。
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。
Ruler版本升级至2.0版本,主要改进的就是背景的问题。在1.0版本里使用的一个透明的背景图片,再加上用户输入的一个背景色来控制背景的显示,这个局限性比较大,为了让用户可以更好的自定义皮肤,所以这里做了重点改进,其实功能上没什么问题,主要就是使用上的改进。
2.0改进的一些地方及功能:
- 背景使用canvas绘制,支持用户自定义渐变,包括开始颜色、透明度、结束颜色、透明度以及渐变的长度;
- 左侧/上侧使用圆角展示;
- 改变方向时,以操作的几个icon为圆心,仅尺子动,而操作按钮不跟随跳动;
- 最大最小化使用动画;
- 最小化后,不在初始化尺子位置,亦不再更换图片,仅将最小化icon和最大化icon做替换;
- 当鼠标移至边缘时,刻度始终显示在尺子内,避免显示在外侧被遮挡;
- JS、CSS文件做了优化;
- 更换了icon图标;
下载安装:http://widgets.opera.com/widget/14151/2.0/

源码下载:http://code.google.com/p/gorgeous-ruler/downloads/list
小结:
在用canvas去绘制背景的时候,纠结了一点,就是在尺子进行旋转的时候,采用什么方式?最初想着是是使用drawImage的rotate进行旋转,不过后来发现这个东东存在一些缺陷,而且感觉其实效率并不是很高,而本身这个canvas仅仅是绘制了一个圆弧和一个方框,我完全可以直接重绘,性能并不差,而且省去了诸多麻烦,最终还是选择了重绘。
对未安装支付宝插件的用户,在访问淘宝登录页面时会出现假死的情况,这是由于插件检测的问题,这里提供屏蔽插件检测的userjs,以便Opera用户可以正常访问、登录。
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
);
}
之前会用@media all and (min-width:0) {}作为Opera、Safari等的hack使用,不知道Firefox从什么版本开始已经也支持了,反正这个是不能用啦,今天用的时候才发现,土鳖一下。。。
目前只认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。
Opera的widgets我用的最多的就是ruler那个东东了,但是总是感觉它有一些不方便,一来不能最小化,只能关闭或者随便拉到一个角落里去,二来不支持我自定义颜色、透明度,它本身的配色并不怎么好看,所以就想自己搞一个。其实上个月就在写了,不过写了一半就不写了。昨天搞了一下,完成了这个widget,并发布了,分享给大家,希望大家能够喜欢哈!~
Gorgeous Ruler 安装:http://widgets.opera.com/widget/download/14151/
请用Opera浏览器打开直接安装,使用Opera 10.10 Build1840 以下版本的会直接安装到饰件(Widgets)中,1840版本的会提示进行安装。
目前版本支持以下几方面:
- 支持背景颜色更换,支持透明度修改;
- 记忆设置,关闭重打开时会使用上次配置的背景色以及透明度;
- 透明度设置为0时会强制转化为1;
- 可以通过键盘的方向键移动,前提是尺子必须在选中状态;
- 可以最小化,可以将最小化的尺子移到任何位置暂放;
- 水平、垂直可以随意切换;
- 目前尺子宽度、高度与电脑屏幕分辨率保持一致。
源码下载:http://code.google.com/p/gorgeous-ruler/downloads/list
2009.10.20 v1.1版本更新:修改icon.png名字为operate_icon.png,因为在Opera 10.10Build1840版本内生成独立widget时会生成一个名为icon.png的icon,将原来的图片覆盖,造成其它icon无法正常显示。
