JQUERY和YUI混用出现的问题

有道是一山不容二虎,其实我本不该把JQUERYYUI夹杂在一块使用,虽然它们各有长短,结合使用的确能够相得益彰,但是暗地里还存着什么矛盾和冲突,这就不是随便刷新一下网页能够看出来的。

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

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

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

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

YUI 2.5.0发布

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相关的链接

用来看新浪新闻的greasemonkey脚本

刚从灾区长沙回到北京,那段时间虽然是隔三岔五的停电停水,俺还没忘趁着来电爬到新浪上面看看近期新闻,也好对最近的形势有些了解。闲着无聊写了个greasemonkey脚本,把新浪的新闻页右边那块没营养的内容统统隐藏掉。

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

安装这个脚本的步骤

YUI中国本地版

去年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

YUI 2.3.0的Rich Text Editor

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)

javascript在ie和firefox下的一些差异

javascript在ie和firefox下,运行结果有一些差异。下面把最近碰到的情况做个记录,以后也会不断补充以备忘。

    object操作

  • firefox:可支持
    var obj = { 'key' : 'aaa', }
  • ie:不支持
    var obj = { 'key' : 'aaa', } 

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

  • javascript对select元素的option操作

  • firefox:可直接设置
    option.text = 'foooooooo';
  • ie:只能设置
    option.innerHTML = 'fooooooo';
  • 删除一个select的option

  • firefox:可以
    select.options.remove(selectedIndex);
  • ie7:可以用
    select.options[i] = null;
  • ie6:需要写
    select.options[i].outerHTML = null;

真是万恶的浏览器。

可以用button代替input type=”submit”吗

在ie下,<button>标记恐怕还存在几个不大不小的问题。

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

例如,一段HTML:

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

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

jquery和greasemonkey齐上阵

jquery写起来真的很简单,连我这刚接触jquery不久的新人都能很快用它码出大段的javascript。唯一的坏处是代码里充斥了大量的$。既然写javascript如此简单,那么用jquery+greasemonkey插件同时干活怎么样呢?

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

// All your GM code must be inside this function
function letsJQuery() {
//make sure there is no conflict between jQuery and other libraries
$.noConflict()
//notify that jQuery is running...
  $('
jQuery is running!
') .css({padding: '10px', background: '#ffc', position: 'absolute',top: '0', width: '100%'}) .prependTo('body') .fadeIn('fast') .animate({opacity: 1.0}, 300) .fadeOut('fast', function() { $(this).remove(); }); //start custom jQuery scripting. }

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

GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';

载入jquery的脚本

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

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