Webtop——html5 桌面 app 开发引擎。基于 webtop,你可以使用 html5 和 css3 等新技术构建桌面 app,即开发直接运行于 windows 上的软件,使用透明渲染模式能将网页直接渲染在桌面上,轻松实现透明阴影等特效。而且,提供了大量的本地 api,使你的 app 能达到跟本地 app 一样的体验。基于它,你可以开发诸如浏览器,QQ,PS,桌面 widget 等桌面 app。这种开发软件的方式,相比传统桌面软件开发方式的开发效率,个人认为至少是其的 10 倍。
时至今日,这个问题已经不能简单回答了。html5,css3 技术的出现已经使 web 的能力得到了很大的提高,但,web 仍有局限!由于安全性的考虑,浏览器对 web 进行了种种限制,例如:
九宫格布局一直是前端比较纠结的一个问题,一是切图麻烦,二是修改 css 麻烦。本文将要介绍一种用一张小图实现九宫格布局的方法。使用此方法每次只要传图片路径跟四个边角的剪裁尺寸即可实现九宫格布局。请先看例子:melodyui.sinaapp.com
下面讲讲原理:
其实原理很简单,就是使用了 css 的 clip 属性。对中间需要平铺的区域进行了拉伸,然后再进行剪裁定位。主要的工作量都在坐标的计算上面,所以我这里不多说,可自行查看源代码。
最后希望这个方法能对大家有所帮助,谢谢大家。
今天写了一个滚动条 UI 组件。欢迎大家体验:http://alloyteam.github.com/ui/
为何称之为完美呢?只因其具有以下优点:
下面讲核心部分。
这段时间做一个关于 widget 的项目,忙了一两个月了。在临发布的时候突然出现一个问题,一个音乐 widget 的内存不断上涨,且不会回落,最终导致这个 widget 只能下架。
因为我在 ie9 没发现内存上涨的问题,所以我觉得这是 webkit 内存管理的问题。所以一直没去看他,等待客户端的同事去解决。直到有一天,客户端同事说了一个方法,说防止 src 频繁切换,建议延迟 1s 去设置 audio 标签的 src。开始我想这不是 web 的原因,所以给予断然拒绝,另外也是怕维护麻烦。但是,我还是进行了尝试。没想到效果出奇的明显,内存基本不会上涨了。
从这件事,我意识到了,凡事不能说绝对。因为它包括了太多情况,涵盖了很长的一段时间,而且使你不能有回旋的余地。
下面说说解决的方法。因为我们想要的是 src 不频繁切换,所以单单做延迟是不会有任何结果的。关键是要使一首歌保持 1s 以上才会去设置它的 src。这句话我说来简简单单,但是要真正理解是需要很深入的思考的。代码我会在最后面给出来,大家可以自己试着写写,然后对照一下。
通过客户端同事的进一步研究发现,发现对 Dom 对象的某个属性就行频繁操作就会导致上涨。这里还有个比较明显的属性就是 buffered,大家可以通过设置一个频率为 20ms 的定时器去读取这个属性,就可以进行测试了。
以此类推,是否对于 img 标签也有类似的情况呢。这个有待各位同仁进行验证。
相关代码:
1 2 3 4 5 6 7 8 9 10 11 |
var id,audioEl=new Audio(); function loadAudio(src){ if(id){ clearTimeout(id); id=null; } id=setTimeout(function(){ audioEl.src=src; id=null; }, 1000); } |
这个工具的实现,是我长久以来的一个愿望,缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下,没仔细研究,只觉得很难用,于是心底就有了一颗种子,希望有一天自己能开发出这样的工具。感谢伟大的谷歌,给了我一种优雅的实现方式——谷歌插件。
下面说说技术部分:
一开始用的是浏览器原生的 css rules,可是后来发现谷歌的 css rules 是经过解析的,而 ie 的不是。由于对谷歌的偏爱,所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer,可以把页面引用到的 css 文件内容都显示出来。于是,在控制台把代码复制了下来,考到了我的 js 里面。它的实现原理是用 ajax 请求把所有 css 文件内容给抓下来,这涉及到一个跨域问题。不过不用怕,我们是插件嘛,当然有特殊的权利——跨域 ajax 请求。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var CustomEvent = { events:{}, dispatchEvent:function(ev,data){ if(this.events[ev]){ var handlers=this.events[ev]; for(var i=0,l=handlers.length;i<l;++i){ try{ handlers[i](data); } catch(e){ } } } }, addEventListener:function(ev,handler){ if(!this.events[ev]){ this.events[ev]=[handler]; } else{ this.events[ev].push(handler); } }, removeEventListener:function(ev,handler){ if(this.events[ev]){ var handlers=this.events[ev]; for(var i=0,l=handlers.length;i<l;++i){ if(handlers[i]==handler){ handlers.splice(i); break; } } } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> html, body { margin: 0px; padding: 0px; _overflow:hidden; _height:100%; } .lay_topfixed { width: 100%; height: 34px; position: relative; z-index: 400; } .lay_topfixed .lay_topfixed_inner { left: 0px; top: 0px; width: 100%; position: fixed; _position: absolute; background-color:#4B97BD; color:white; text-align:center; height: 34px; line-height:34px; } .container{ _margin-right:15px; _overflow:auto; _height:100%; } </style> </head> <body> <div class="container"> <div class="lay_topfixed"> <div class="lay_topfixed_inner"> 哈哈,我一直不动~~ </div> </div> <div style="height:2000px"> <br /><br /> adfadfasdf asdf a sdfasdf sdf asd fa sdf asd fa sdf asd fsdf sdf as df </div> </div> </body> </html> |
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2