Close Advertisement
今天刚发现的, 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的示例:
<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>
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也是白搭. 看个示例
<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>
具体应用不再举例.<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浏览器,请运行以下代码:
<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>
<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: http://www.never-online.net/blog/feed.asp?q=comment&id=219
浏览模式: 显示全部 |
评论: 2 |
引用: 0 | 排序 | 浏览: 3573
[ 2008-08-14 09:52:44 ]
COOL! ^_^
[ 2008-08-15 11:44:28 ]

