阿当的博客

{七月 29, 2009} ie下的firebug

ie下也可以使用firebug。是完全用js实现的一个模拟firefox下firebug的工具，功能当然没有firefox下的firebug强，但在ie下调试是个不错的选择。

详情见：http://uicss.cn/r.php?hr=http://getfirebug.com/lite.html

{七月 24, 2009} [转载 js]一次性解决png在i6下的透明问题（包括做为img和背景的两种情况）

将这段代码放入页面中，可以将png的图片在i6下透明度问题一次性解决，不论在页面内以img标签的形式，还是在css里以background的形式。不用在css里去一个个设滤镜了。

这段代码极大的方便了页面的制作，但仍然有个问题：因为js会自动将css的background-img清零，所以background-repeaqt和background-position还是不能使用的，大家切页面的时候还是要小心。

{七月 21, 2009} [转载 css]用CSS调整scrollbar(滚动条)的配色

原文地址：http://uicss.cn/css-scrollbar/

========================================================================

PSD转html，
设计稿上，有一处内嵌的介绍信息，当文字过长时，要求使用一个经过处理的滚动条来展示。

如果仅要求IE浏览器，可以通过调整CSS的方式，来给滚动条换色。

代码如下：

.uicss-cn
{
height:580px;overflow-y: scroll;
scrollbar-face-color:#EAEAEA;
scrollbar-shadow-color:#EAEAEA;
scrollbar-highlight-color:#EAEAEA;
scrollbar-3dlight-color:#EAEAEA;
scrollbar-darkshadow-color:#697074;
scrollbar-track-color:#F7F7F7;
scrollbar-arrow-color:#666666;
}

具体样式对应的scrollbar区域如图：

scrollbar

{七月 17, 2009} YUI3学习笔记 ( 7 )

[drag & drop类]

<1>YUI3中对 drag & drop类的变化非常大，职能划分很清晰，drag已经不再继承自drop了，对于drag和drop都有自己的事件，事件的可以从drag的角度去监听，也可以从drop的角度去监听。

<2>提供了对特殊样式的css设置功能，比如被lock的drag和drop，拖动中的drag，可用的drop和不可用的drop,被drag滑过的drop等等。让样式控制更轻松。

<3>有了drophit和dropmiss事件，让drop的监听更得心应手。

<4>用插件的形式实现扩展功能，比如之前会单独为一类的drag代理，变成了Y.Plugin.DDProxy插件，并提供moveOnEnd:属性用以控制代理拖动完之后，实体是否要跟着改变位置。而之前在YUI2.xxx中，在以扩展类形式出现的Constrained to a Region，在YUI3中也以插件Y.Plugin.DDConstrained的形式出现，更另人可喜的是，在YUI2中Constrained to a Region是根据坐标来的，如果做用做范围的DOM样式发生变化，比如坐标更改了，长宽更改了，YUI2中拖动范围并不会相应地更改。而YUI3这点就强多了，它监听DOM样式的改变，而调整自己的拖动范围。

<5>drag的配置属性中有data项，可以通过get("data")的方式得到data。这是个很好用的属性，绑定自定义属性可以使用它了。奇怪的是，同属重量级类的anim却没有提供data属性，奇怪。

<6>drag类提供了lastXY和startXY属性了，不必再自行记录了，呵呵。

{七月 17, 2009} [原创] 简单树形菜单

用YUI3做的一个简单小实例。

====================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>
<style type="text/css">
    .content{display:none;}
    ul{list-style:none;}
</style>
<body>
   <ul class="menu">
    <li>
        <div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题1</div>
        <div class="content">
            内容1
        </div>
    </li>
    <li>
        <div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题2</div>
        <div class="content">
            内容2
        </div>
    </li>
    <li>
        <div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题3</div>
        <div class="content">
            内容3
        </div>
    </li>
    <li>
        <div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题4</div>
        <div class="content">
            内容4
        </div>
    </li>
    <li>
        <div><img src="http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif" class="btn" /> 标题5</div>
        <div class="content">
            内容5
        </div>
    </li>
   </ul>
    <script src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js" type="text/javascript"></script>
<script type="text/javascript">
    YUI().use("node","event",function(Y){
        function MenuItem(node){
            var imgSrc = ["http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/expand.gif","http://style.china.alibaba.com/js/myalibaba/AlicnTree/images/collapse.gif"];
            var btn = node.query(".btn");
            var content = node.query(".content");
            btn.on("click",function(){
                Y.all(".content").setStyle("display","none");
                Y.all(".btn").set("src",imgSrc[0]);
                if(content.getStyle("display") == "none"){
                    content.setStyle("display","block");
                    btn.set("src",imgSrc[1]);
                } else {
                    content.setStyle("display","none");
                    btn.set("src",imgSrc[0]);
                }
            },this);
        }
        Y.all(".menu li").each(function(n,k){
            new MenuItem(n);
        });
    });
</script>
</body>
</html>
============================================================

{七月 14, 2009} YUI3学习笔记 ( 6 )

[ anim类 ]

<1> anim类在引入的时候，有两种，一种是"anim"，另一种是"anim-color"，其中前面一种能使用几乎所有的运动，包括形变，位置变化和滚动。后面一种包括形变和颜色变化，但不能使用位置变化。

<2> anim类有实例级的方法，也有类级的静态方法，实例级的方法控制单个动画，类级静态方法可以控制所有实例。

<3> interations和interationCount。interaitons可以用来控制动画的次数，而interaionCount可以得到当前是第几次重复。

<4> 常用的监听事件有"start"——动画开始，“end”——动画结束，“pause”——暂停，“resume”——恢复（暂停后重新run），“interation”——迭代，“tween”——运动中。

{七月 13, 2009} YUI3学习笔记 ( 5 )

[ nodeList类 ]

<1> 首先，nodeList类并不是array类型！和jquery选择符得到的结果无视数组还是非数组不一样，YUI3对数组还是非数组分得非常清楚，用Y.get()和query()返回的一定是单一的结果，而用Y.all()和queryAll()得到的才会是“数组”，其实也不是数组，而是封装后的数组，也就是nodeList对象。这么做的好处其实很明显，也很符合YUI和jquery一贯的定位。jquery的最大特点就是好用，api尽量“简单”，YUI相比jquery显得更精致，api非常“精确”，提供更多细节的接口。

<2> .each()方法。nodeList类也有.each方法，也就使得它看起来似乎更像个数组类型了。.each()方法接受两个参数，第一个是执行函数，第二个是执行函数的this指向对象。执行函数会传入三个参数，第一个是.each()方法中会遍历的每个nodeList中的node，第二个是索引，第三个是一个包含选择符和自动生成id的特殊对象（暂时没想到会有什么用）。值得一提的是，如果不指定执行函数的this指向，那么this指向当前node，也就是赞同于arguments[0]，如此一来，我们就有了更灵活的选择，可以指定执行函数的this指向，需要当前node就使用arguments[0]。

<3>.size()方法。nodeList类是通过.size()方法来获得node个数的。和jquery可以用.length或者size()来获得子元素个数不一样，这里只能用.size()方法，没办法，nodeList不是数组。

<4>.even()方法和.odd()方法。这两个方法都是将nodeList截取一部分，重新返回一个“数组”。其中.even()返回的是奇数索引的数组，而.odd()返回的是偶数索引的数组。

<5>.on()方法。和jquery不同的是，对于“数组”的on()方法，this指针指向的并不是遍历时的当时node,而是整个nodeList。如果要找到当前node，需要用e.target来定位。

{七月 10, 2009} onbeforeunload的拦截与不拦截

一般来说，用addListener的方式比直接用on的方式要好，因为用on会覆盖掉上一次同名的事件******，而addListener则会加一个。就好像是设计模式中的命令模式一样，每addListener一个******，就会把******push到一个数组中，触发事件时，会将数组中的所有事件依次触发出来。

如果一个代码很复杂，或者由多人维护，用on的方式很容易产生冲突，所以一般情况下，都推荐使用addListener。但有一种情况比较特别——特意需要覆盖之前的******。

     举个例子说吧，有这样一个需求：一个页面内有很多链接，只要页面刷新或者是跳转到别的页面或者关闭当前页，都会弹出一个弹窗，询问是否确认离开，点击是才会接着执行，点击否不会执行。这个功能很多人都做过很简单，监听window.onbeforeunload事件，event.returnValue为提示信息，就可以实现。
     可是，如果再加一个需求，页面中有某一个链接，点击不会进行拦截，而是直接跳转，又该怎么做呢？
     没错了，就是覆盖之前的window.onbeforeunload******，用一个空的执行函数代替。demo如下：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阿当制作</title>
</head>

<body>
<a href="http://www.google.cn">google</a>   <a href="http://www.baidu.com" id="test">百度</a>
<script type="text/javascript">
    window.onbeforeunload = function(e){
        var e = e || window.event;
        e.returnValue = "您还没有保存";
    }
    var test = document.getElementById("test");
    test.onclick = function(){
        window.onbeforeunload = function(){};
    }
</script>
</body>
</html>
=================================================================
点击google链接，或者刷新页面，或者关闭页面都会弹出弹窗，但是点击百度链接就会直接跳转了。

{七月 09, 2009} YUI3学习笔记 ( 4 )

[Event类]

<1>.mouseenter()方法和.mouseleave()方法。之前mouseout的冒泡一直是个头疼不已的问题！YUI2的时候还不得不通过判断祖先元素的方法来阻止冒泡导致的意外响应。到了YUI3终于有了mouseleave()方法了，这也应该是从jquery偷来的吧，哈。

<2>.delegate()方法。Event类也有.delegate()方法，但格式不如Node类的更符合使用习惯。我个人还是会选择Node类的使用方法。YUI3中很多类的方法有重叠，Node中的,YUI中的，Event中也有，汗。

<3>Event类的使用方法已经不像YUI2那样，通过一个全局的YAHOO.util.Event类，传入event对象来进行控制了，而是以参数的形式传入回调函数中，也就是说，Y.on("click",function(e){},"#test");这样一个典型用法中，function(e)中的e已经不是原生event，而是Event类对象了！在回调函数中，可以直接使用e.xxx来执行Event类的方法。方法名基本没有太大变化，就是YUI2中的.stopEvent()方法名字变化大一点，在YUI3中叫做.halt()。

{七月 07, 2009} YUI3学习笔记 ( 3 )

[Node类]

<1>.scrollIntoView()方法。这个方法的效果就是让指定的node实例出现在窗口内，和锚点定位的效果相近。在不同浏览器下表现不同。在FF下，指定的node节点出现在窗口的底部，也就是“刚刚可见”；在ie6,ie7下无效果，在ie8下出现在窗口顶部，和锚点定位效果一模一样。因为兼容不好，所以这个方法不推荐使用。

<2>.setStyles()方法。YUI终于有了批量处理样式的方法了 T_T，之前写一排setStyle()，或者需要在css中定义个类，然后改变className的日子一去不复返了。虽然后者仍然很有用，但有时仅仅是过渡用的，只需要设内置的样式即可，有了setStyles()，我们就多了一种选择。

<3>.append()方法和.appendChild()方法。.append()和.appendChild()方法都可以为Node实例添加一个子元素，他们都接受Node实例，DOM对象作为参数，但前者还接受字符串，后者不接受，比如myNode.append("<p>hello world</p>")是对的，myNode.appendChild("<p>hello world</p>")就会报错了。另外，官方api文件说.append()方法是void类型，没有返回值，而.appendChild()方法有Node类型的返回值，其实是错误的。.append()方法也会有返回值，只是和.appendChild()的返回值不同。例如,myNode.append(newNode)的返回值是myNode，而myNode.appendChild(newNode)的返回值是newNode。

<4>.compare()方法和.contains()方法都只接受Node和DOM类型的参数，不接受字符串选择符。

<5>.create()方法虽然很容易让人联想到原生的document.createElement()方法，但其实两者是有区别的。.create()方法接受的参数是完整的html，而不是标签名，也就是说，如果要创建一个包含123456为内容的p标签，用原生js需要写var nod = document.creaElement("p"); nod.innerHTML = 123456;而如果用.create()方法，不能用Y.Node.create("p"),而要用Y.node.create("<p>123456</p>");。.create()方法返回的是Node，document.createElement()返回的是DOM。

<6>.delegate()方法接受三个参数，其中第三个参数是对于children的选择符，这里只能是children，不能写node自身，而且不能省略。支持*全选。

<7>.inDoc()方法,.inRegion()方法和.intersect()方法。.inDoc()方法的参数只能是document类型的，不能是普通DOM型或者Node型。如果要测试是否在某个DOM内，可以用inRegion方法，不过，这个方法也支持样式上的重叠，而事实上并没有包含关系的判断。官方api文档中说，.inRegion()方法会返回一个包含位置信息的对象，事实上，这是错的。.inRegion()方法返回的是布尔型。而.intersect()方法才会返回包含位置信息的对象。

<8>.insert()方法和.insertBefore()方法。这两个方法和.append()，.appendChild()方法有些类似，同样的，.insert()方法支持字符串型参数，而.insertBefore()不支持。前者返回值是myNode,后者返回值是newNode。值得一提的是，.insert()方法和第二个参数，用于表明插入位置的参数不好用，并不能按照我想要插入到指定节点前，.insertBefore()的第二个参数就很好用。

<9>.get()方法。Node是DOM封装后的类型，其get方法不仅能获得id,tagName之类DOM.xxx的属性，还能获得region等扩展属性。注，dom的class仍然通过get("className")获得，而不是get("class")。

<10>.getAttribute()方法。一般情况下，其实.get()方法就完全够用了，为什么还要有个.getAttribute()方法呢？对于自定义属性，.get()方法是取不到值的，要使用.getAttribute()方法。例如<div myattr = "adang"></div>，如果用Y.get("div").get("myattr")取的值是undefined，需要用Y.get("div").getAttribute("myattr")取值。