Logo

never-online

A crisis is a terrible thing to waste.
  • Blog首页
  • 推荐日志
  • 关于我
  • 留言簿
  • 设计
  • 订阅RSS
  • 登录
« windows下mozilla fi...
设计简单可重用的拖... »
分类: Web Dev
推荐日志

safari的一些杂记

[ 2008-05-25 00:52:27 | 作者: Rank ]
字体大小: 大 | 中 | 小
Close Advertisement
1. 高版本js
今天刚发现的, safari浏览器也是支持读写器(get/set)的, 这个是js高版本功能(具体哪个版本以后支持就不得而知), 也就说明safari支持高版本的js(很惭愧,一直没关心webkit内核的浏览器).当然firefox 2.0后的版本都支持这个功能的,但是<script></script>标签得改成这样<script type="application/javascript;version=1.7"></script>也就是要指定版本, 否则无法使用高版本的js. 说回safari, 下面是safari使用get/set的示例:
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<textarea id="code" style="width:500px;height:300px;">
function Profile (){};
Profile.prototype = {
  _name: 'never-online',
  _url: 'http://www.never-online.net',
  get name() {
    return this._name;
  },
  set name(val) {
    this._name = val;
  }
}
var demo = new Profile();
alert(demo.name);
demo.name = 'BlueDestiny';
alert(demo.name);
</textarea>
<script>
//<![CDATA[
alert('alert');
var cd = document.getElementById('code');
if(/webkit/i.test(window.navigator.userAgent))
eval(cd.value);
else
alert('pls use safari browser or use based webkit browser! 请用safari打开此页面,否则看不到效果');
//]]>
</script>
<script type="application/javascript;version=1.7">
//<![CDATA[
eval(document.getElementById('code').value);
//]]>
</script>

2. focus
safari里据观察, 只有控件才能获取focus(比如textbox, textarea之类的), div是无法得到focus的, 加tabindex也是白搭. 看个示例
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<div tabindex="1" id="div">click here. try get focus</div>
<script>
var div = document.getElementById('div');
div.onfocus = function(){
document.write('you get focus');
}
</script>
具体应用不再举例.

3. debug
safari里调试不方便, 这个开发者的工具可能对你有用.
http://nightly.webkit.org/

4. client storage
safari也是可以在客户端存储持久化数据的. 这个是HTML5草案中的数据库存储. 可以用sql语句的. 相关API参见下面的网址
HTML 5 Client-side Database Storage API
http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/

5.webkit Transition
该功能类似于IE的滤镜, 但比IE的效果要好,且平滑得多, 占用资源也不高, 这与safari同出于苹果系统有关.如果常用mac机的话,就应该习以为常了,也应该知道有Transition这个东西,这一点属于扫盲的记录,方便他人也了解这个功能. 如果你有safari浏览器,请运行以下代码:
Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)
<div id="demo" style="border:5px solid #000;left:500px;top:100px;position:absolute;width:300px;height:100px;padding:30px;background:#FFF046;font-family:Trebuchet MS;">webkitTransition of safari</div>
<script type="text/javascript">
//<![CDATA[
if(!/webkit/i.test(window.navigator.userAgent)) alert('请用safari打开本页面,或者用基于webkit的浏览器再重试');
else alert('点击任意的地方可看到效果');
document.onclick = function(event)
{
var d = document.getElementById('demo');
event = window.event || event;
var duration = 2;
d.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';
d.offsetTop; // Force style recalc
d.style.webkitTransformOrigin = "0 0";
d.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';
d.style.opacity = '0';
}
//]]>
</script>
[最后修改由 Rank, 于 2008-05-25 06:06:30]
评论Feed 评论Feed: http://www.never-online.net/blog/feed.asp?q=comment&id=219

浏览模式: 显示全部 | 评论: 2 | 引用: 0 | 排序 | 浏览: 3573
引用 dh20156*
[ 2008-08-14 09:52:44 ]
COOL! ^_^
引用 ytii*
[ 2008-08-15 11:44:28 ]
[smile] JScript.NET也带set/get的,不知道IE几时能用上 [razz]

发表
表情图标
[smile] [confused] [cool] [cry]
[eek] [angry] [wink] [sweat]
[lol] [stun] [razz] [redface]
[rolleyes] [sad] [yes] [no]
[heart] [star] [music] [idea]
UBB代码
转换链接
表情图标
悄悄话
昵        称:  3-24字符, 不可使用特殊字符 *
安全规则: 请输入规则答案: 2+5=? *
 
Language Package
  • ENGLISH
  • 简体中文
用户面板
用户名:
密码:
安全规则: 2+5=?
注册
分类
  • Blog首页
  • Android [2] Android RSS Feed
  • Diary & Misc [115] Diary & Misc RSS Feed
  • Web Dev [108] Web Dev RSS Feed
  • Never Modules(JS) [12] Never Modules(JS) RSS Feed
  • Flash & Flex & Air [4] Flash & Flex & Air RSS Feed
  • PHP & Apache [1] PHP & Apache RSS Feed
  • XML [7] XML RSS Feed
  • CSS [7] CSS RSS Feed
  • ASP & .NET [3] ASP & .NET RSS Feed
  • Literature Archives [4] Literature Archives RSS Feed
  • Design [17] Design RSS Feed
  • Visual Basic [3] Visual Basic RSS Feed
最新评论
  • @gzman 那阵子确实想蛮多...
  • 兄弟,想太多了吧
  • [smile] [wink] [sweat] ...
  • javascript:insertSmilie...
  • 我新建了两个sliderbar都...
  • 不错哦````````
  • 好文,收藏至20ju.com
  • @aflyhorse 我这里没有实...
  • 我上次找了一个识别效果...
  • 第一个实例我只看见了doe...
  • 好文啊,只是我阅读太慢...
  • 其实用<iframe src="java...
  • 还没到那个境界。
  • @tokki 要造也应该造车,...
  • 能不造轮子的程序员太少...
搜索

统计数据
日志: 283
评论: 845
引用: 0
用户: 115
到访: 4059715
在线: 1

新浪微博
Links
  • Zerray
  • realdodo
  • ps album
  • my flickr
  • XiaoFeng
  • 神~ORZ
  • Jiuan's blog
  • yanpeng's blog
  • zhoux's blog
  • winter
  • aoao
  • jerry.qu
  • JoelLeung
  • monyer
  • Miller
  • PuterJam
  • Terry
  • JK
  • akira
  • dh20156's New World!
  • muxrwc
  • Joshua
  • Estyle
  • 互联网人
  • 兔子
  • 电脑爱好者
  • 阿笨狗
Favorite
  • leica china
  • Douglas Crockford
  • dhteumeuleu
  • regexplib
  • webfx
  • ajaxian
  • John Resig
  • dean
  • Adam McCrea
  • css beauty
  • livepipe
  • smashing magazine
  • ericlippert
  • narcissus
  • PPK
widget

Powered by LBS Version 2.0.304 © 2003-2005 SiC/CYAN. - Template writen by never-online - 桂ICP备07010684号
17 DB Queries | Proccessed in 125ms