{ focus : web }

曾经实现过比较复杂的tooltip：TipLite 轻量级的Ext 提示在 positioniseverything 的一篇文章中 提到了很简单的实现，依赖于绝对定位后的不设置css位置属性（left,right,top,bottom）的元素保留在其为定位前的位置，并且同时该绝对定位元素和周围元素不同层，然后利用元素绝对定位后自动为 block 的特性，设置mar...

采样自: yui , closure , kissy editor ,一般 button 分为四种 ： button , toogle button , menu button , split button 。 展现层： button yui      google     kissy editor ...

借鉴自强大的 google button . mvc 分解：总体架构：     Model and control : 不涉及 ui 渲染，用来表示按钮的实质，按钮具备以下数据属性： content : 按钮显示值 value : 按钮的内在存储值 tooltip : 按钮的鼠标掠过（得到焦点）提示 d...

     模拟系统内置下拉框，使得在所有的系统以及浏览器中具有同样的表现，目标是功能分解，利用 mixin 分离实现。 下拉框功能点分析： 1.可以存储值，是一个存储数据的容器，相当于 readonly 的 input。 2.有下拉箭头，点击下拉箭头可以弹出选项列表。（实际上点击存储容器也有同样的表现）。 3.选项列表本质是一个 overlay，选项列表弹出后会...

分类 树是一种常见的 ui 组件，在桌面以及 web 中都经常看到，常见的表现形式有 简单树：  多选树：  如何设计？ 针对树的两种主要分类，这次主要讨论 DRY ，怎么能把重复的功能拆成独立的单元而最终又能完美的整合？我的答案是多继承:   组成部分 BaseNode : 最基本的树节点，类似 dom 树节...

采用 kissy-core，破除常规，不使用flash（也确实不会）demo 实现注意点：-1。类似数字逻辑，由逆时针编号的线条拼凑成数字，数字集合拼凑成时钟。 0。避免过度设计，最小抽象为数字，而不是构成数字的线条。1。每个数字利用线条拼凑，棱角使用css border画出。数字抽象为类 ClockNumber，...

根据 css3 中的 border-radius 属性，将 border-radius 的值设置为和元素的高宽一样，那么这个元素就渲染成了圆形。目前 ie9 以及各大标准浏览器都支持，但是用户份额最多的 ie6,7,8 并不支持，不过 ie6,7,8 支持微软提出的 vml 标准 ( wiki , msdn )，而从 ie9 开始放弃了 vml，转而支持 w3c 推荐的同类...

元素的可视矩阵（区域）计算   元素常常需要展现在用户的可视区域内，而元素是否出现在用户的可视区域实际上受以下因素的限制（目前已知，待补充） : 窗口 ( viewport ) 限制，随浏览器滚动条变化自身是否使用了脱离文档流的定位 ( absolute fixed )父（祖先）元素是否定位父（祖先）元素包括祖先元素是否设置了 overflow != visi...

就是cnbeta常见的评价星，更简单灵活： demo  截图：    目标： 1.可访问性，即使读屏器，css失效,javascript禁用也可正常提交结果。（使用a hover跨浏览器得实现动态改变表现，以及绝对定位的z-index特性使得可以随时鼠标滑动改变星级。）2.灵活的...

之前 taobaoUED 已经详细解释过三角形画法，利用双三角重合实现一个清新的纯线条还是挺不错的：demo 清新线条窗口关键是双三角的重和方法： <div class="arrow_b"> <div class="arrow_a"> </div> &l...

简介  如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“我要买” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。 这种布局适合于小数据块，每个数据块内容相近且...