替TWaver HTML5的Tree组件增加鼠标滑过效果

2012-12-31

为TWaver HTML5的Tree组件增加鼠标滑过效果出于效率和保持js库最小化的考虑，TWaver HTML5的Tree组件默认的

为TWaver HTML5的Tree组件增加鼠标滑过效果

出于效率和保持js库最小化的考虑，TWaver HTML5的Tree组件默认的交互方式比较单调，目前只有选中改变文字背景；但是这不代表TWaver功能不够强大，相反，TWaver预留了很多可以重载的方法方便我们扩展，本文中我们就利用这些方法实现鼠标滑过改变背景色的效果。
先来张gif图片看看效果：
替TWaver HTML5的Tree组件增加鼠标滑过效果

实现方式再简单不过，只有短短几十行代码，先列一下我们用到的方法：

onDataRendered(div, data, row, selected)adjustRowSize()getSelectColor()除了上面三个方法，还有两个事件监听器，稍后我们就会讲解，先来看下这三个方法的原理：
onDataRendered 从字面上很好理解，每当Tree要渲染行数据的时候就会调用此方法

div 行数据的显示容器，每行都有一个div容器，我们可以通过改变div背景色来实现变色效果data 行数据，我们监听鼠标move事件，记录鼠标所在行的数据，然后在onDataRendered里判断当前行是否在鼠标下，如果在就改变div的背景色row 行数selected 当前行是否被选中，如果被选中将div设置为深色背景看一下这个方法的实现：

var DemoTree = function (dataBox) {DemoTree.superClass.constructor.apply(this, arguments);            var self = this;            this.newdata = null;            var olddata = null;            this._view.addEventListener("mouseover", function (e) {                self.newdata = self.getDataAt(e);                if (self.olddata != self.newdata) {                    if (self.olddata) {                        self.invalidateData(self.olddata);                    }                    if (self.newdata) {                        self.invalidateData(self.newdata);                    }                    self.olddata = self.newdata;                }            });            this.onDataRendered = function (div, data, row, selected) {                DemoTree.superClass.onDataRendered(div, data, row, selected);                if (selected) {                    div.style.background = "rgb(216,233,252)";                    div.style.border = "1px solid rgb(125,162,206)";                }                else if (data == self.newdata) {                    div.style.background = "rgb(246,249,253)";                    div.style.border = "1px solid rgb(184, 214, 251)";                }else{div.style.padding="1px";}            }            this.adjustRowSize = function () {var id, div;                var hpx = self.getRowHeight() - self.getRowLineWidth() + 'px';                var wpx = Math.floor((self.getView().scrollLeft + self.getView().clientWidth) / self.getZoom()-2) + 'px';                for (id in self._renderMap) {                    div = self._renderMap[id];                    div.style.height = hpx;                    div.style.width = wpx;                }            };            this.getSelectColor = function () {                return "rgba(0,0,0,0)";            };            this._view.addEventListener("mouseout", function (e) {                if (self.newdata) {                    self.invalidateData(self.newdata);                    self.newdata = null;                }            });        };twaver.Util.ext(DemoTree, twaver.controls.Tree, {});

热点排行

CSS

替TWaver HTML5的Tree组件增加鼠标滑过效果