某人的栖息地 » javascript http://www.ooso.net Linux + Apache + Mysql + Php + Flash Thu, 11 Mar 2010 17:54:31 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 gmail的pop3快速刷新脚本 http://www.ooso.net/archives/526 http://www.ooso.net/archives/526#comments Fri, 30 Oct 2009 13:34:20 +0000 Volcano http://www.ooso.net/?p=526 阅读全文（242字）]]> gmail接收pop3邮件的周期挺长的，如果邮件不是太频繁的话，差不多1小时才会刷新一次。如果你是firefox用户的话，解决办法是：

这个工具的用途是在页面上方的“刷新”旁边新增一个链接“刷新POP3邮件”，点击之后会马上检查所有的POP3邮箱。至于自动刷新功能，还等着看官你自己搞定呢。

BTW:如果是英文版的gmail，请手工修改gmail_pop3_quick_checker.user.js，我都提取出来了。

]]> http://www.ooso.net/archives/526/feed 0 Yahoo yui host提供combo handler服务 http://www.ooso.net/archives/458 http://www.ooso.net/archives/458#comments Thu, 17 Jul 2008 01:42:45 +0000 Volcano http://www.ooso.net/index.php/archives/458 阅读全文（252字）]]> Yahoo之前提供了公开的YUI Hosting，现在又在这个基础上进一步提供了combo handler服务。这项服务的目的是尽可能减少http请求的数目，以提高web前端的展现速度，这也是高性能网页开发的14条军规之首。

此前，如果要使用YUI Rich Text Editor，需要引用若干外部js。共计6个http请求。

PLAIN TEXT
CODE:
  1. <script type="text/javascript"
  2.    src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  3. <script type="text/javascript"
  4.    src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script>
  5. <script type="text/javascript"
  6.    src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
  7. <script type="text/javascript"
  8.    src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
  9. <script type="text/javascript"
  10.    src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>
  11. <script type="text/javascript"
  12.    src="http://yui.yahooapis.com/2.5.2/build/editor/editor-beta-min.js"></script>

如果使用combo handler，那么http请求数可以合并成一个，如下：

PLAIN TEXT
CODE:
  1. <script type="text/javascript"
  2. src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&
  3. 2.5.2/build/container/container_core-min.js&2.5.2/build/menu/menu-min.js&
  4. 2.5.2/build/element/element-beta-min.js&2.5.2/build/button/button-min.js&
  5. 2.5.2/build/editor/editor-beta-min.js"></script>

可惜这个host在国外，对国内的yui用户来说，没有什么帮助。

]]> http://www.ooso.net/archives/458/feed 1 图片预加载效果的实现 http://www.ooso.net/archives/423 http://www.ooso.net/archives/423#comments Sun, 15 Jun 2008 23:25:48 +0000 Volcano http://www.ooso.net/?p=423 阅读全文（363字）]]> 使用picasa的时候，注意到它首先是显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处——picasa的图片翻页是用javascript实现的，如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空虚~~

于是我花了点时间，打探它的实现方式，发觉很简单，不是用的lowsrc之类的标记，而是简单的js。

代码示例

PLAIN TEXT
CODE:
  1. <img id="myImage" src="small_144.jpg" width="640" />
  2. var img = new Image();
  3. img.src = "http://imghost/big_640_480.jpg";
  4. img.onload = function() {
  5.   document.getElementById('myImage').src = this.src;
  6. }

如此这般，待大图载入完成之后，利用js替换原小图的src，就完成了图片预加载效果。关键点是图片的onload事件利用。

]]> http://www.ooso.net/archives/423/feed 10 Google AJAX Feed API的冷门用法 http://www.ooso.net/archives/422 http://www.ooso.net/archives/422#comments Sat, 14 Jun 2008 03:14:28 +0000 Volcano http://www.ooso.net/index.php/archives/422 阅读全文（364字）]]> Google AJAX Feed API是google提供的一个很实用的API，我经常用它来跨域获取某些rss feed并展现。但是使用前需要申请一个API KEY，然后才可以在指定网站上使用，如果有多级子域名的话，挨个申请key是一个很烦人的事情，所以也就有了下面说的冷门用法。

Google AJAX Feed API提供了针对Flash或javascript无效这两种环境的额外接口，其中一种可以支持jsonp方式调用，跨域调用feed就全靠它了。

jsonp调用代码示例

PLAIN TEXT
CODE:
  1. <script>
  2. function foo(rss) {
  3.     console.log(rss);
  4. }
  5. </script>
  6. <script src="http://ajax.googleapis.com/ajax/services/feed/load?q=http%3A%2F%2Ffeed.ooso.net&v=1.0&callback=foo"></script>

这段代码中，指定了callback function为foo，所以我预先定义了一个function foo，运行时就可以在firebug的控制台里清楚的看到返回的json串结构。

]]> http://www.ooso.net/archives/422/feed 1 jQuerify书签 http://www.ooso.net/archives/417 http://www.ooso.net/archives/417#comments Tue, 10 Jun 2008 00:35:19 +0000 Volcano http://www.ooso.net/?p=417 阅读全文（1057字）]]> 我不知道有多少人在使用浏览器的书签，这东东有时候实在是很有用的，比如现在说到的jQuerify书签。

jQuerify书签的功能很简单，那就是在当前页面中直接载入jquery.js，并以一个粉红色的浮动层提示jquery已经载入。书签的源代码如下：

PLAIN TEXT
CODE:
  1. var s=document.createElement('script');
  2. s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
  3. if(typeof jQuery!='undefined') {
  4.   var msg='This page was already jQuerified'
  5. } else {
  6.   document.getElementsByTagName('head')[0].appendChild(s);
  7.   var msg='This page is now jQuerified'
  8. }
  9. var el=document.createElement('div');
  10.   el.style.position='fixed';
  11.   el.style.height='30';
  12.   el.style.width='200';
  13.   el.style.margin='0 auto 0 auto';
  14.   el.id='jq-kswedberg';
  15.   el.style.top='0';
  16.   el.style.left='40%';
  17.   el.style.padding='5px 10px 5px 10px';
  18.   el.style.backgroundColor='#f99';
  19.   el.innerHTML=msg;
  20. var b=document.getElementsByTagName('body')[0];
  21. b.appendChild(el);
  22. window.setTimeout(function() {
  23.   jQuery('#jq-kswedberg').fadeOut('slow',function() {
  24.     jQuery(this).remove()
  25.   });
  26. }, 2500);
  27. void(s);

书签的链接在下边，如果是firefox的话，可以直接拖拽到firefox的书签栏上。

» jQuerify «

这里用到了最近说到的google cdn，速度可是足够快的。在使用书签之后，就可以尽情享受jquery的便利了，比如在firebug的console输入：

PLAIN TEXT
CODE:
  1. $('body').background('#ffc')

你会看到屏幕的背景色变黄了:)

]]> http://www.ooso.net/archives/417/feed 2 jQuery UI 1.5 http://www.ooso.net/archives/419 http://www.ooso.net/archives/419#comments Mon, 09 Jun 2008 10:55:09 +0000 Volcano http://www.ooso.net/?p=419 阅读全文（503字）]]> jQuery UI 1.5正式版发布，仍然保持了jquery简单易用的特点。

简化的API调用

这个版本最大的改进是重新定义了API规则，之前API提供的95%以上的方法都移除了，取而代之的是更简单的调用规则，每个plugin只保留了一个方法，以draggable为例：

  • $(”div”).draggable() 创建一个拖拽对象
  • $(”div”).draggable(”destroy”) 删掉拖拽对象
  • $(”div”).draggable(”method”) 呼叫这个plugin的其它方法

jQuery UI的另外一个杀手级应用——ThemeRoller

ThemeRoller

利用ThemeRoller，你只要几分钟就可以创建一个自己的主题，可以方便调整色彩并预览效果，在调整满意之后，还能将主题的图片和css以zip包下载，算是相当贴心的一个功能，只可惜从国内访问过去速度有些抱歉。

jQuery UI 1.5的整个包包大小是1.78M，相比yui来说是有过之而无不及。好在包内的各个demo都是真材实料，相当精彩，大一点也无妨。

更详细的信息请看：jQuery UI v1.5 Released, Focus on Consistent API and Effects

]]> http://www.ooso.net/archives/419/feed 1 我也试用YUI Uploader http://www.ooso.net/archives/405 http://www.ooso.net/archives/405#comments Fri, 30 May 2008 01:58:11 +0000 Volcano http://www.ooso.net/index.php/archives/405 阅读全文（1139字）]]> 早就知道YUI里面有Uploader这么一个上传组件，可以按住ctrl多选文件上传(就像flickr那样的上传)，并且可以支持进度条，这样对用户来说是相当方便的。

由于YUI Uploader是利用javascript + flash实现的，所以用户的浏览器上只要有flash player就可以使用，也不需要额外安装别的插件了，这显然也是YUI Uploader的一大优势。

我的YUI Uploader试用之旅

  • 首先下载Uploader批量上传页的html源文件
  • 解压后放置在你的web服务器上，比如我就是在自己的台式机上安装了一个xampp
  • 现在需要一个处理上传操作的后端程序，在这里我是用php简单的写了一个，如果你用别的语言也是不成问题的。在uploader-advanced-source.html的同一目录下放置upload.php，源文件如下：
    PLAIN TEXT
    PHP:
    1. foreach ($_FILES as $fieldName => $file) {
    2.     $name = md5(microtime());
    3.     move_uploaded_file($file['tmp_name'], "./" . $name . '.jpg');
    4.     echo $fieldName . ' uploaded!';
    5. }

  • 下载http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf，然后把uploader.swf放在和upload.php的同一目录下，这是为了避免javascript和flash交互过程中出现跨域问题。
  • 修改uploader-advanced-source.html
    • 把"YOUR UPLOAD URL GOES HERE"替换成你的upload.php所在的url，比如我的就是http://localhost/yui/upload.php
    • 把YAHOO.widget.Uploader.SWFURL修改成你的uploader.swf实际url
  • 现在访问uploader-advanced-source.html，试试批量上传功能吧

试用的一点补充

  • 这个例子里面的php源文件只是考虑上传n张jpg文件的情况，可根据实际情况调整。
  • 上传后的文件名是md5随机加密的，在upload.php同一目录可见
  • 由于flash的bug，运行在windows下的firefox无法正确获得flash传递过来的cookie，如果上传应用对cookie有依赖，可能会需要做额外的处理。
  • 为了能够确切的显示上传进度条，可能需要php 5.2的apc扩展支持
  • 上传进度由flash完成
  • YUI 2.5.2已经附上uploader.swf的actionscript，有一定的学习价值

贴一张Uploader使用效果图

]]> http://www.ooso.net/archives/405/feed 3 利用Google Ajax Library API加速常用js类库的载入 http://www.ooso.net/archives/404 http://www.ooso.net/archives/404#comments Wed, 28 May 2008 06:56:58 +0000 Volcano http://www.ooso.net/index.php/archives/404 阅读全文（523字）]]> google前不久推出了Google Ajax Library API，说白了就是提供几个知名js库的host，目前有:

google提供的这批js类库都有使用cdn，同时提供压缩和非压缩版本，并gzip输出。比如Prototype在未压缩前是124k，压缩后则只有30k，而jquery经过瘦身以后，也是从97k降到了16k。

这项服务的意义在于，如果各个网站都使用google提供的某个js类库比如jquery，那么由于浏览器缓存的缘故，用户就可以避免下载相同内容的js，这样也就能提高js的载入速度了。

google ajax library api使用方法

传统方式

PLAIN TEXT
CODE:
  1. <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

使用google.load载入

PLAIN TEXT
CODE:
  1. <script src="http://www.google.com/jsapi"></script>
  2. <script>
  3. // Load jQuery
  4. google.load("jquery", "1");
  5. </script>

下面是一段小小的视频用来解释它的工作原理:

Update

昨天在某个小页面上尝试引入google提供的jquery.min.js，结果让我大失所望，虽然有时候访问速度很快，但是偶尔能刷出22秒以上的响应时间，如果是这样不稳定的话，那么实在是不敢放心使用。

]]> http://www.ooso.net/archives/404/feed 9 wordpress plugin – search engine related posts http://www.ooso.net/archives/392 http://www.ooso.net/archives/392#comments Fri, 02 May 2008 05:42:00 +0000 Volcano http://www.ooso.net/?p=392 阅读全文（854字）]]> Table of content

Description

English version

When someone is referred from a search engine like Google, the plugin show your blog content matched the terms they search for.

中文说明

当用户从google搜索到你的博客上，这个wordpress 插件会根据用户搜索的关键词显示你的博客上更多的相关内容。目前也只对google生效，下一个版本将对baidu生效。

这个插件完全使用javascript加上google的api完成，不需要占用服务器端的资源，环保且安全。

Usage

English version:

  • unzip it
  • Put <div style="display:none" id="search_content"></div> at the place in your template where you want the list of related posts
  • Copy search_related_posts.php to direcotry wp-contents/plugin and activate the plugin.
  • done!

中文说明:

  • 解压
  • 在wordpress模板中添加一个id为search_content的html标签，比如
    PLAIN TEXT
    CODE:
    1. <div id="search_content" style="display:none;">
    2. <h1>相关搜索结果</h1>
    3. </div>

  • 复制search_related_posts.php到wp-contents/plugin目录，并激活插件.
  • done! 现在你可以试着从google搜索上先搜到自己的博客，然后点击进去看看插件的效果。

Download

latest search engine related posts

History

]]> http://www.ooso.net/archives/392/feed 12 AIR入门者推荐阅读 — AIR for JavaScript Developers http://www.ooso.net/archives/390 http://www.ooso.net/archives/390#comments Sat, 26 Apr 2008 03:36:24 +0000 Volcano http://www.ooso.net/index.php/archives/390 O'reilly的电子书 AIR for JavaScript 更新了。可以在这里免费下载。

这本书按照 创造共用方式授权，这意味着你不仅仅可以合法的免费下载，还可以按照自己的意愿做些修改。我翻看了一些章节，这本书对于AIR的html + js开发者来说，是一本很好的入门教程。这次更新的内容还包括AIR的安全模型介绍。

]]> http://www.ooso.net/archives/390/feed 3 Adobe AIR教程for HTML/JAVASCRIPT开发者 http://www.ooso.net/archives/354 http://www.ooso.net/archives/354#comments Mon, 24 Mar 2008 00:52:15 +0000 Volcano http://www.ooso.net/?p=354 阅读全文（1703字）]]> 最近不是太有空，加上泡网络时间太长，对新鲜事物的敏感度有所下降。因此当Adobe出了个AIR，我还是兴趣缺缺，没功夫去试用。

但是兴趣这玩意可能也有些生理周期，前几天突然来了神把这个AIR好好端详一番，却发觉网上暂时没有适合我这种初级新手看的AIR教程，鼓捣了几天，仍然是毫无进展，我甚至连个hello world之类的简单air package都打不出来。也许小时候特意去踩过狗屎，因此现在我又走上狗屎运，在即将放弃的前一刻找到了一篇比较细致的AIR教程，记录下来，好记性不如烂键盘。

俺目前的情况是，没有安装Dreamweaver，Flash之类的软件，只用一些免费软件，所以我只打算写html/javascript之类的代码，flash方面的暂时不涉及，另外adobe提供的dreamweaver air sdk也是用不上，可谓一穷二白。

第一步 -- 安装Adobe AIR和Adobe AIR SDK

如果你还没装，可以去网站上下载Adobe AIR Runtime和Adobe AIR SDK.

装完Adobe AIR SDK以后，为了方便，你还需要把它的bin目录添加到系统的path变量下，这样你可以直接运行它的打包和debug工具。

第二步 -- 创建一些目录

接下来创建一些目录来放置代码，比如：

/appname/
/appname/source/
/appname/source/icons/
/appname/build/

第三步 -- 创建一个Application Descriptor

AIR需要一个Application Descriptor来描述它的内容和属性，这是一个XML格式的文件。

它的文件名是application.xml，放置在/appname/source/目录。

PLAIN TEXT
XML:
  1. <application xmlns="http://ns.adobe.com/air/application/1.0">
  2.   <id>com.example.appname </id>
  3.   <version>1.0 </version>
  4.   <filename>AppName </filename>
  5.   <initialWindow>
  6.     <content>index.html </content>
  7.     <visible>true </visible>
  8.     <width>600</width>
  9.     <height>600</height>
  10.   </initialWindow>
  11.   <icon>
  12.     <image16x16>icons/appname-16.png</image16x16>
  13.     <image32x32>icons/appname-32.png</image32x32>
  14.     <image48x48>icons/appname-48.png</image48x48>
  15.     <image128x128>icons/appname-128.png</image128x128>
  16.   </icon>
  17. </application>

这个xml文件很有些复杂，也很有一些历史，最可恶的是AIR beta1到后来的beta2乃至最后的1.0，从来就没统一过，变了又变，所以我在网上找到的一些教程都失效了，只能针对早期的beta版使用。

关于它的详细内容，可以参考模板，在adobe sdk安装目录下的templates/descriptor-template.xml.

第四步 -- 创建你的应用

下一步，创建一个index.html.

PLAIN TEXT
HTML:
  1. <html>
  2. <head>
  3.   <title>My Window Title</title>
  4. </head>
  5. <body>
  6.   <h1>Hello World</h1>
  7. </body>
  8. </html>

如果需要添加css,javascript以及图片，可以在/appname/source/下创建子目录放进去，就像平常写web应用那样。

第五步 -- 测试你的应用

如果你已经配置好了path环境变量（见第一步,需要重启电脑），下面很简单，首先打开一个命令行窗口，进入/appname/source/目录，然后运行：

adl application.xml

一切顺利的话，你的应用应该已经跑起来了，一个弹出的AIR应用窗口好不容易的展示它的第一次。

第六步 -- 打包你的AIR应用

在很多磕磕碰碰，反复调试之后，你可能已经完成了应用，现在你准备向朋友或者网上的菜鸟炫耀一下你的处女作。那么我们开始打包，这一步其实比我想象的要简单。

首先需要生成一个签名Certificate，并放置在应用的根目录/appname/

adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.pfx 换成你的密码

然后就是进入source目录打包：

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

不出意外的话，会当场生成一个AppName.air文件，你可以安装一下感受亲手做的第一个Air应用。

原文：Adobe AIR Tutorial for HTML / JavaScript Developers

]]> http://www.ooso.net/archives/354/feed 32 JQUERY和YUI混用出现的问题 http://www.ooso.net/archives/347 http://www.ooso.net/archives/347#comments Sat, 22 Mar 2008 03:06:30 +0000 Volcano http://www.ooso.net/?p=347 阅读全文（368字）]]> 有道是一山不容二虎，其实我本不该把JQUERY和YUI夹杂在一块使用，虽然它们各有长短，结合使用的确能够相得益彰，但是暗地里还存着什么矛盾和冲突，这就不是随便刷新一下网页能够看出来的。

列一下最近碰到的问题，备忘。

混用时，YUI的Event在ie6下表现异常

下面代码中，没能在window.onload事件中弹出一个alert弹出窗口。

PLAIN TEXT
CODE:
  1. <script>
  2. YAHOO.util.Event.on(window, 'load', function() {alert('hello');});
  3. </script>

猜想是jQuery重写了window.onload事件引起冲突，解决办法，使用jQuery的event。

PLAIN TEXT
CODE:
  1. <script>
  2. jQuery.event.add(window, "load", function() {alert('hello');});
  3. </script>

]]> http://www.ooso.net/archives/347/feed 2 inline-js 0.4 —— wordpress plugin http://www.ooso.net/archives/379 http://www.ooso.net/archives/379#comments Mon, 10 Mar 2008 16:30:25 +0000 Volcano http://www.ooso.net/index.php/archives/379 阅读全文（107字）]]> Inline-js plugin minor update. It now work fine with exec-php plugin.

Download

Inline-js 0.4

详细信息

inline-js wordpress plugin

]]> http://www.ooso.net/archives/379/feed 4 YUI 2.5.0发布 http://www.ooso.net/archives/382 http://www.ooso.net/archives/382#comments Thu, 21 Feb 2008 07:02:46 +0000 Volcano http://www.ooso.net/index.php/archives/382 阅读全文（432字）]]> YUI 2.5.0发布。

2月20日，YUI Team发布了YUI的最新版本2.5.0。增加了6个全新的组件：Layout Manager, Uploader(结合Flash和Javascript的多文件上传引擎), Resize Utility, ImageCropper, Cookie Utility和ProfilerViewer Control。同时这一版还提升了DataTable Control的功能和Slider Control增加了双滑块功能。

这个版本中的Uploader以及ImageCropper应该是相当有用的控件

  • Uploader采用javascript和flash，不仅支持多文件上传，更可以直观的查看上传进度，以前虽然有类似的代码，但是组件化的代码显然通用性和可用性更好。
  • ImageCroper可用于制作图片切片，基于YUI的Dragdrop和Resize

与YUI 2.5.0相关的链接

]]> http://www.ooso.net/archives/382/feed 3 用来看新浪新闻的greasemonkey脚本 http://www.ooso.net/archives/302 http://www.ooso.net/archives/302#comments Mon, 18 Feb 2008 13:23:36 +0000 Volcano http://www.ooso.net/index.php/archives/302 阅读全文（248字）]]> 刚从灾区长沙回到北京，那段时间虽然是隔三岔五的停电停水，俺还没忘趁着来电爬到新浪上面看看近期新闻，也好对最近的形势有些了解。闲着无聊写了个greasemonkey脚本，把新浪的新闻页右边那块没营养的内容统统隐藏掉。

放出来给需要的同学下载。

安装这个脚本的步骤

]]> http://www.ooso.net/archives/302/feed 1 YUI中国本地版 http://www.ooso.net/archives/370 http://www.ooso.net/archives/370#comments Sun, 20 Jan 2008 08:31:02 +0000 Volcano http://www.ooso.net/index.php/archives/370 阅读全文（259字）]]> 去年yahoo提供了公开的yui主机，这样即便自己没有server也可以直接使用yui的便利。但是由于主机在国外，访问速度不是很理想。现在终于有了本地版的yui hosting，访问速度有大的飞跃。

2008年1月14日雅虎中国正式发布本地版的YUI 2.4.1，今后将与YUI保持同步更新。这对国内的YUI使用者来说绝对是一个好消息，本地版的YUI采用了本地CDN部署，对于国内用户来说访问速度更快(图一)，比较访问国际YUI主机的速度(图二)快了至少5倍以上。

使用firebug查看载入速度

cn yui host

原文：YUI Blog China

]]> http://www.ooso.net/archives/370/feed 2 YUI 2.3.0的Rich Text Editor http://www.ooso.net/archives/367 http://www.ooso.net/archives/367#comments Sun, 05 Aug 2007 00:05:56 +0000 Volcano http://www.ooso.net/index.php/archives/367 阅读全文（299字）]]> YUI 2.3.0正式发布了。这个版本新增了一些新的组件，其中最大的亮点是它的Rich Text Editor (beta)，样式见下图：
YUI Rich Text Editor

    YUI Rich Text Editor的特点

  • 标识为A级的浏览器支持良好，跨浏览器也有很好的表现
  • 扩充方便，可以添加你自己的button
  • 从图片上看，这个编辑器还支持直接从flickr抓取图片——可惜flickr在国内已经被和谐...

    YUI 2.3.0另外新增的5个组件

  • Base CSS
  • YUILoader Utility (beta)
  • ImageLoader Utility (experimental)
  • Color Picker Control (beta)
  • YUI Test Utility (beta)
]]> http://www.ooso.net/archives/367/feed 2 javascript在ie和firefox下的一些差异 http://www.ooso.net/archives/362 http://www.ooso.net/archives/362#comments Tue, 31 Jul 2007 00:40:30 +0000 Volcano http://www.ooso.net/index.php/archives/362 阅读全文（486字）]]> javascript在ie和firefox下,运行结果有一些差异。下面把最近碰到的情况做个记录，以后也会不断补充以备忘。

    object操作

  • firefox:可支持
    PLAIN TEXT
    CODE:
    1. var obj = { 'key' : 'aaa', }

  • ie:不支持
    PLAIN TEXT
    CODE:
    1. var obj = { 'key' : 'aaa', }

    会报javascript错误,最后的","必须去掉

    • javascript对select元素的option操作

  • firefox:可直接设置
    PLAIN TEXT
    CODE:
    1. option.text = 'foooooooo';

  • ie:只能设置
    PLAIN TEXT
    CODE:
    1. option.innerHTML = 'fooooooo';

    • 删除一个select的option

  • firefox:可以
    PLAIN TEXT
    CODE:
    1. select.options.remove(selectedIndex);

  • ie7:可以用
    PLAIN TEXT
    CODE:
    1. select.options[i] = null;

  • ie6:需要写
    PLAIN TEXT
    CODE:
    1. select.options[i].outerHTML = null;

真是万恶的浏览器。

]]> http://www.ooso.net/archives/362/feed 4 可以用button代替input type=”submit”吗 http://www.ooso.net/archives/352 http://www.ooso.net/archives/352#comments Mon, 16 Jul 2007 23:37:24 +0000 Volcano http://www.ooso.net/index.php/archives/352 阅读全文（404字）]]> 在ie下，<button>标记恐怕还存在几个不大不小的问题。

  1. 在一个表单里，如果有一个以上"submit"类型的<button>标签存在，在表单被提交时，不管你点击哪个<button>，所有<button>的值都会被post/get。
  2. <button>的缺省type属性被设置为"button"，但是在A级别浏览器下，应该设置为"submit"才对
  3. 如果你用javascript去访问<button>的value属性，IE却返回了<button>的innerHTML属性，很让人恼火。 (可以使用"getAttributeNode"方法来避免.)

例如，一段HTML:

PLAIN TEXT
CODE:
  1. <form>
  2. <button type="submit" value="1" name="action-1">text 1</button>
  3. <button type="submit" value="2" name="action-2">text 2</button>
  4. </form>

在IE下，上面两个button的数据都会被提交。并且ie会提交这两个button的innerText而不是value。而其它浏览器仅仅提交你点击的那个button。

以上，应该尽量避免使用button标记。

]]> http://www.ooso.net/archives/352/feed 11 Ajax+PHP+YUI手工制作rss阅读器 http://www.ooso.net/archives/307 http://www.ooso.net/archives/307#comments Thu, 05 Jul 2007 00:06:14 +0000 Volcano http://www.ooso.net/index.php/archives/307 阅读全文（736字）]]> 上次俺的简陋练习作品Ajax+json小有心得，这次继续尝试利用Ajax+PHP+YUI手工制作rss阅读器。

写一点html来展示RSS的内容

PLAIN TEXT
CODE:
  1. <body>
  2. <h1>RSS阅读器</h1>
  3. <div id="rss_bd">内容待填补</div>
  4. </body>

利用YUI的Connection manager来处理XHR

yahoo已经提供了在线的YUI Hosting,直接引用:

PLAIN TEXT
CODE:
  1. <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js"></script>
  2. <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js"></script>
  3.  
  4. <script type="text/javascript">
  5. var sUrl = 'proxy.php';
  6. var callback =
  7. {
  8.   success: function(o) {
  9.      document.getElementById('rss_bd').innerHTML = o.responseText;
  10.   },
  11.   failure: function(o) {/*failure handler code*/}
  12. }
  13. var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null);
  14. </script>

很困，这部分没写完整，下次来补齐。

用php做一个proxy来避免跨站访问的问题

proxy的要点
一定要输出header，否则在解析的时候你可能会遇到莫名奇妙的问题。
如果你的服务器不支持远程url open，可以考虑使用curl，比如说在dreamhost的主机上

PLAIN TEXT
CODE:
  1. <?php
  2. $searchUrl = 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&results=4&output=json&query=';
  3. if(!empty($_POST['query']))
  4.  echo file_get_contents($searchUrl . $_POST['query']);
  5. ?>

到这里，一个简陋的RSS阅读器的雏形已经完备了。

什么是ajax

在百度知道上面搜索的答案，一本正经的告诉你：

Ajax（Asynchronous JavaScript and XML）是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

看了后立马一口茶水做雾状均匀喷洒到本本的屏幕上，Ajax本身和java有嘛关系？

]]> http://www.ooso.net/archives/307/feed 4 jquery和greasemonkey齐上阵 http://www.ooso.net/archives/346 http://www.ooso.net/archives/346#comments Tue, 03 Jul 2007 22:27:01 +0000 Volcano http://www.ooso.net/index.php/archives/346 阅读全文（940字）]]> jquery写起来真的很简单，连我这刚接触jquery不久的新人都能很快用它码出大段的javascript。唯一的坏处是代码里充斥了大量的$。既然写javascript如此简单，那么用jquery+greasemonkey插件同时干活怎么样呢？

这里是一段提醒jquery已经载入的脚本，为了避免和页面上原有的代码冲突，得运行$.noConflict().

PLAIN TEXT
CODE:
  1. // All your GM code must be inside this function
  2. function letsJQuery() {
  3. //make sure there is no conflict between jQuery and other libraries
  4. $.noConflict()
  5. //notify that jQuery is running...
  6.   $('<div>jQuery is running!</div>')
  7.     .css({padding: '10px', background: '#ffc', position: 'absolute',top: '0', width: '100%'})
  8.     .prependTo('body')
  9.     .fadeIn('fast')
  10.     .animate({opacity: 1.0}, 300)
  11.     .fadeOut('fast', function() {
  12.       $(this).remove();
  13.     });
  14. //start custom jQuery scripting.
  15. }

引入jquery.js只用简单的一行，感谢greasemonkey!

PLAIN TEXT
CODE:
  1. GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';

载入jquery的脚本

PLAIN TEXT
CODE:
  1. var GM_JQ = document.createElement('script');
  2. GM_JQ.src = 'http://code.jquery.com/jquery-latest.js';
  3. GM_JQ.type = 'text/javascript';
  4. document.getElementsByTagName('head')[0].appendChild(GM_JQ);

原文:Have Your jQuery Fun on Any Site with Greasemonkey

]]> http://www.ooso.net/archives/346/feed 4 过滤掉起点可恶的广告 http://www.ooso.net/archives/323 http://www.ooso.net/archives/323#comments Tue, 19 Jun 2007 23:26:08 +0000 Volcano http://www.ooso.net/index.php/archives/323 阅读全文（234字）]]> 有时候会跑到起点上去看书，打发无聊时光。但是起点的文章页不是太厚道，有一块狗皮膏药广告非常碍眼，牢牢的占据了屏幕右下方一块比较大的面积，这部分的字是看也看不到，很让人难受。

这时候祭出greasemonkey来教训它，写一点javascript就可以了：
document.getElementById("ifPage").style.display = "none";

上面的代码能把广告所在的div隐藏~~

greasemonkey脚本下载

CmfuReader.user.js

]]> http://www.ooso.net/archives/323/feed 3 在页面中动态载入外部javascript http://www.ooso.net/archives/312 http://www.ooso.net/archives/312#comments Tue, 12 Jun 2007 15:03:40 +0000 Volcano http://www.ooso.net/index.php/archives/312 阅读全文（1144字）]]> 有时候需要在网页中某个div载入之后，动态引入一段javascript，IE下的解决方案：

PLAIN TEXT
CODE:
  1. newjs.onreadystatechange = function () {
  2.         if (newjs.readyState == 'loaded') {
  3.             // ready!
  4.         }
  5.     }
  6.  
  7.     newjs.onload = function () {
  8.         // ready!
  9.     }

主要利用了onload以及onreadystatechange事件。把这个加以利用，也能动态载入外部css。下面是同时适合Ie/firefox的写法。

PLAIN TEXT
CODE:
  1. var css;
  2. function include_css(css_file) {
  3.     var html_doc = document.getElementsByTagName('head')[0];
  4.     css = document.createElement('link');
  5.     css.setAttribute('rel', 'stylesheet');
  6.     css.setAttribute('type', 'text/css');
  7.     css.setAttribute('href', css_file);
  8.     html_doc.appendChild(css);
  9.  
  10.     // alert state change
  11.     css.onreadystatechange = function () {
  12.         if (css.readyState == 'complete') {
  13.             alert('CSS onreadystatechange fired');
  14.         }
  15.     }
  16.     css.onload = function () {
  17.         alert('CSS onload fired');
  18.     }
  19.     return false;
  20. }
  21.  
  22. var js;
  23. function include_js(file) {
  24.     var html_doc = document.getElementsByTagName('head')[0];
  25.     js = document.createElement('script');
  26.     js.setAttribute('type', 'text/javascript');
  27.     js.setAttribute('src', file);
  28.     html_doc.appendChild(js);
  29.  
  30.     js.onreadystatechange = function () {
  31.         if (js.readyState == 'complete') {
  32.             alert('JS onreadystate fired');
  33.         }
  34.     }
  35.  
  36.     js.onload = function () {
  37.         alert('JS onload fired');
  38.     }
  39.     return false;
  40. }

这里是Demo，有动态载入css以及js的例子。

原文地址

http://www.phpied.com/javascript-include-ready-onload/

]]> http://www.ooso.net/archives/312/feed 2 YUI 2.3.0 即将发布 http://www.ooso.net/archives/318 http://www.ooso.net/archives/318#comments Mon, 11 Jun 2007 00:07:14 +0000 Volcano http://www.ooso.net/index.php/archives/318 阅读全文（2057字）]]> YUI 2.3.0 即将发布,最迟七月份可以看到。新的YUI组件和特点:

1. Rich Text Editor
The YUI RTE beta comprises an editor window and toolbar, the latter of which has a simple, extensible plugin architecture. It will feature full A-grade support. (Dav Glass)

2. ImageLoader Utility
Images often constitute the most data-heavy parts of a page, but many times users load images that they never see — because the image is below the fold, because it is in an obscured tab in a TabView, etc. The YUI ImageLoader is a new, experimental component that allows you to defer the loading of images based on criteria you specify and to then load those images when a specific "trigger" is hit. In some cases, use of ImageLoader can significantly reduce bandwidth and increase performance. (Matt Mlinac)

3. Base CSS
YUI's Reset CSS normalizes browser CSS styles by stripping out browser-defined styles; this allows you to begin your CSS styles with all style decisions being intentional rather than inherited. YUI's Base CSS will help you begin the process of making your styles intentional by providing a common set of treatments that most implementations share. (Nate Koechley)

4. Color Picker
Previous versions of YUI shipped a Color Picker example as part of the Slider Control. In 2.3, we're formalizing Color Picker and completing its API to make it easier to implement this powerful control in your apps. (Adam Moore)

Notable Changes to Existing Components:

1. Button
Button remains in beta as we modify the architecture a bit. As of 2.3, the SplitButton implementation will replace MenuButton and be generic — allowing you to implement Buttons that have Menus or any other sub-control you wish. (Todd Kloots)

2. Connection Manager
YUI's XHR utility will be enhanced with a Custom Event API that adds granularity to the interesting moments you can pipe into on your XHR transactions. (Thomas Sha)

3. DataTable
DataTable will undergo a major rearchitecture as it evolves to its second beta. Details on the DataTable evolution for 2.3 will be presented during an open conference call for all interested implementers during the second half of June. An invitation to the call will be sent out to this list a week prior to that call. (Jenny Han)

4. Browser History Manager
Browser History Manager comes out of experimental status with 2.3 and is promoted to beta, accompanied by several bug fixes and some key enhancements requested by YUI implementers during the experimental phase. (Julien Lecomte)

]]> http://www.ooso.net/archives/318/feed 0 inline-js 0.3 — wordpress插件 http://www.ooso.net/archives/290 http://www.ooso.net/archives/290#comments Thu, 10 May 2007 15:26:31 +0000 Volcano http://www.ooso.net/index.php/archives/290 阅读全文（789字）]]> 最近加班比较多，时间相当的紧张，今天终于得闲把inline-js升级了。这个版本对最初的插件处理方式做了改进，不再粗暴的中止其它the_content filter的运行:)

Plugin Name: Inline Javascript Plugin
Plugin URI: http://www.ooso.net/index.php/inline-js/
Feed URI: http://www.ooso.net/index.php/feed/
Description: Plugin that insert inline javascript in Posts/Pages
Version: 0.3
Author: Volcano
Author URI: http://www.ooso.net

使用方法

  • 解压
  • Copy inline-js.php到目录wp-contents/plugin并激活插件.
  • 用标签[inline] and [/inline]围绕你要发表的javascript,and post it
  • Ok

Usage

  • Unzip
  • Copy inline-js.php to direcotry wp-contents/plugin and activate the plugin.
  • Use [inline] and [/inline] tag around the javascript,and post it
  • Ok

Example

PLAIN TEXT
CODE:
  1. [inline]
  2. <script type="text/javascript">
  3. document.write("hello world!");
  4. </script>
  5. [/inline]

Download

latest inline-js plugin

inline-js的主题页

这个页面会记录inline-js的更新情况。
http://www.ooso.net/index.php/inline-js

俺在wp-plugins.net上的相关链接：
http://wp-plugins.net/author/volcano/

]]> http://www.ooso.net/archives/290/feed 4