什么是按钮？---谈谈按钮的设计

作者：kun10 发布时间：December 27, 2009 分类：关于设计

看了玉伯的kissy编辑器，不禁觉得很赞，css样式设计的很精致，很难想像这是全一个人做的，再次股一下掌，前端有时候就是有些难以被理解。。。大家都要相互鼓励。。

接下来，说一下自己对于按钮的理解，

按钮----windows里面我们已经很习以为常的东西了，一个大致有几种状态：
1、不可用
2、未按下
3、按下
4、鼠标悬停
一个按钮要可以按下，又可以被按起，他表现的行为应该是对称的，如果你点按钮弹出了一个对话框，如果用户一下子找不到关闭按钮，他可能会首先想到去按那个按钮去关闭。有时候应该把按钮想成是开关类的东西。。其实也就是那样，我在这里所做的也就是强调。

kissy的按钮就做得比较的优秀，于是我也按着他的样子模仿了一个

大致是这样的一个工作的效果---“当当当当”
1、当鼠标经过按钮的时候按钮的边框加亮 (javascript---->onmouseover)
2、当鼠标在按钮上点下的时候，按钮感觉凹下去了 (javascript---->onmousedown)
3、当鼠标在按钮上点下并抬起的时候，按钮“真的”凹下去了 (javascript---->onclick)
4、当鼠标移出按钮的时候，按钮的边框变暗，并保持被按下或是未按下的状态 (javascript---->onmouseout)

还有几种情况：
5、当鼠标在按钮上按下，但是点击抬起的时候不在按钮上时，按钮的状态不变化
6、当鼠标没有按下按钮，但点击抬起的时候在按钮上时，同样按钮不变化状态
另外呢，我们还应该注意tab键对于按钮的可用的操作
当tab使得光标落到按钮上时，按钮应该呈现鼠标hover的效果，
当使用ENTER使用按钮的时候，按钮应该呈现鼠标mousedown的效果
这样一分解，我们设计按钮的状态的时候是不是会清晰一些了呢？
demo稍后等空间搞好再上
如果有什么意见欢迎交流。。。

chrome发布会有感

作者：kun10 发布时间：December 20, 2009 分类：杂七杂八

今天看了一下chrome OS发布会的视频，之前也看过，但是没有仔细看，今天好好的听了听google印度工程师的印度英语，呵呵，听得半懂不懂的，算是练练听力吧，看完之后有些想法，

首先：“chrome is chrome OS”，这句话在演讲中被反复的提到了，google其实在做的一个事情就是计算机直接从浏览器启动，把所有的事情都放到互联网上干，记得视频里面说过一句话，大体的意思就是所有的东西都在互联网上，或许google已经做好了走云服务的准备了；

其次：觉得演示会挺简陋的，演示的国际象棋游戏就是一个swf，音乐就是一个网页音乐播放器，最多就是点google自己的GTalk，wave一些产品，记得答记者问的时候，有些人提了如一些桌面应用能否在googleOS上面使用的问题，那个印度工程师看去对问题有些些的不爽，很潦草的带了一两句，然后说“下一问”，感觉有些回答的不礼貌，或许某些程度上还是看得出google有些心虚

总之，用谷歌的话来说，他们本身就没有打算做桌面级的应用，一个浏览器tab就是一个应用，其实就是说一个网页就是一个应用，或许这在某些程度上意味着我们应该在将来更加注重互联网应用的开发，不断的细化，做得像现在的桌面产品那样，很明显的，我们如果以目前使用互联网的方法去使用chromeOS会很不适应，因为网络的资源虽然多但是相对还是比较的分散的，如果资源得不到整合，google chrome不过是一个浏览器，如果说大家适应了打开电脑就是一个google首页（可以想一下hao123的那种感觉，至少很明确能够找到你要的东西），然后开始一天的工作，谷歌的OS才会慢慢的获得成功。
另外从开发的角度说，JavaScript应该会继续火下去（呵呵）
不管怎么样，不管chrome OS是否会成功，chrome is chrome OS，chrome可进可退，成功了就是操作系统，失败了就是一个浏览器，就这么简单，可以说这次发布会谷歌也达到推广自己的浏览器的效果。。。

DOM元素位置比较

作者：kun10 发布时间：December 1, 2009 分类：JavaScript

最近在制作页面信息搜集时遇到了一个很棘手的问题，元素onmouseover事件的触发过于混乱，由于记录信息的页面结构比较复杂，一旦鼠标移出或是移入某个元素，都会触发一次onmouseover，如何准确的找到那些自己期望的srcElement和target成了一大问题，利用中饭后的时间看了一下组长的资料，发现很有用。讲的是页面元素的比较：

1、DOMElement.contains(DOMNode)---IE

这个方法起先用在 IE ，用来确定 DOM Node 是否包含在另一个 DOM Element 中。

当尝试优化 CSS 选择器遍历（像：“#id1 #id2”），这个方法很有用。你可以通过 getElementById 得到元素，然后使用 .contains() 确定 #id1 实际上是否包含 #id2。

注意点：如果 DOM Node 和 DOM Element 相一致，.contains() 将返回 true ，虽然，一个元素不能包含自己。

这里有一个简单的执行包装，可以运行在：Internet Explorer, Firefox, Opera, and Safari。

function contains(a, b) {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(arg) & 16);
}

2、NodeA.compareDocumentPosition(NodeB)---W3C

这个方法是 DOM Level 3 specification 的一部分，允许你确定 2 个 DOM Node 之间的相互位置。这个方法比 .contains() 强大。这个方法的一个可能应用是排序 DOM Node 成一个详细精确的顺序。

使用这个方法你可以确定关于一个元素位置的一连串的信息。所有的这些信息将返回一个比特码（Bit，比特，亦称二进制位）。

对于那些，人们知之甚少。比特码是将多重数据存储为一个简单的数字（译者注：0 或 1）。你最终打开 / 关闭个别数目（译者注：打开/关闭对应 0 /1），将给你一个最终的结果。

这里是从 NodeA.compareDocumentPosition(NodeB) 返回的结果，包含你可以得到的信息。

个人认为的精华之处在此

Bits Number Meaning
000000 0 元素一致
000001 1 节点在不同的文档（或者一个在文档之外）
000010 2 节点 B 在节点 A 之前
000100 4 节点 A 在节点 B 之前
001000 8 节点 B 包含节点 A
010000 16 节点 A 包含节点 B
100000 32 浏览器的私有使用

现在，这意味着一个可能的结果类似于：

<div id="a">
<div id="b"></div>
</div>
<script>
alert( document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20);
</script>

一旦一个节点 A 包含另一个节点 B，包含 B（+16） 且在 B 之前（+4），则最后的结果是数字 20 。如果你查看比特发生的变化，将增加你的理解。

000100 (4) + 010000 (16) = 010100 (20)

这个，毫无疑问，有助于理解单个最混乱的 DOM API 方法。当然，他的价值当之无愧的。

现在，DOMNode.compareDocumentPosition 在 Firefox 和 Opera 中是可用的。然而，有一些技巧，我们可以用来在 IE 中执行他。

// Compare Position - MIT Licensed, John Resig
function comparePosition(a, b){
    return a.compareDocumentPosition ?
        a.compareDocumentPosition(b) :
        a.contains ?
            ( a != b && a.contains(b) && 16 ) +
            ( a != b && b.contains(a) && 8 ) +
            ( a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
                (a.sourceIndex < b.sourceIndex && 4 ) +
                (a.sourceIndex > b.sourceIndex && 2 ) :
                1 ) :
                0;
}



返回4说明元素a在b的前面，2说明a在b的后面，20说明a被b包含，10说明a包含了b

写得很好的东西，当时直接拿来就能用~~~~

  1. 1