VisualElement

VisualElement是一个 skylark 的类，它封装了一个visual dom节点，提供了许多原型方法并支持链式调用。

velm.VisualElement

var ve = new VisualElement(elm);

• elm
  包装的dom元素或它的id

• domNode
  包装的dom元素

VisualElement的原型方法主要由其他模块提供，包括基本实用模块，如sytler、noder、datax等，以及其他自定义模块。

下面列出的原型方法基础公用事业所提供的模块:

datax

• attr(name,value)
  ve.attr(name,value) –> datax.attr(ve.domNode,name,value)
• data(name,value)
  ve.data(name,value) –> datax.data(ve.domNode,name,value)
• prop(name,value)
  ve.prop(name,value) –> prop.attr(ve.domNode,name,value)
• removeAttr(names)
  ve.removeAttr(name,value) –> datax.removeAttr(ve.domNode,name,value)
• removeData(names)
  ve.removeData(name,value) –> datax.removeData(ve.domNode,name,value)
• text(txt)
  ve.text(name,value) –> datax.text(ve.domNode,name,value)
• val(value)
  ve.val(name,value) –> datax.val(ve.domNode,name,value)

dnd

• draggable(params)
  ve.draggable(params) –> dnd.draggable(ve.domNode,params)
• droppable(params)
  ve.droppable(params) –> dnd.droppable(ve.domNode,params)
• movable(params)
  ve.movable(params) –> dnd.movable(ve.domNode,params)

eventer

• off(events,selector,callback)
  ve.off(events,selector,callback) –> eventer.off(ve.domNode,events,selector,callback)
• on(events,selector,data,callback,one)
  ve.on(events,selector,data,callback,one) –>eventer.on(ve.domNode,events,selector,data,callback,one)
• one(events,selector,data,callback)
  ve.one(events,selector,data,callback) –>eventer.one(ve.domNode,events,selector,data,callback)
• shortcuts()
  ve.shortcuts() –> eventer.shortcuts(ve.domNode)
• trigger(type, args)
  ve.trigger(type, args) –> eventer.shortcuts(ve.domNode,type, args)

filer

• picker(params)
  ve.picker(params) –> filer.picker(ve.domNode,params)
• dropzone(params)
  ve.dropzone(params) –> filer.dropzone(ve.domNode,params)

finder

• ancestor(selector)
  ve.ancestor(selector) –> finder.ancestor(ve.domNode,selector)
• ancestors(selector)
  ve.ancestors(selector) –> finder.ancestors(ve.domNode,selector)
• children(selector)
  ve.children(selector) –> finder.children(ve.domNode,selector)
• descendant(selector)
  ve.descendant(selector) –> finder.descendant(ve.domNode,selector)
• find(selector)
  ve.find(selector) –> finder.find(ve.domNode,selector)
• findAll(selector)
  ve.findAll(selector) –> finder.findAll(ve.domNode,selector)
• firstChild(selector)
  ve.firstChild(selector) –> finder.firstChild(ve.domNode,selector)
• lastChild(selector)
  ve.lastChild(selector) –> finder.lastChild(ve.domNode,selector)
• matches(selector)
  ve.matches(selector) –> finder.matches(ve.domNode,selector)
• nextSibling(selector)
  ve.nextSibling(selector) –> finder.nextSibling(ve.domNode,selector)
• nextSiblings(selector)
  ve.nextSiblings(selector) –> finder.nextSiblings(ve.domNode,selector)
• parent(selector)
  ve.parent(selector) –> finder.parent(ve.domNode,selector)
• previousSibling(selector)
  ve.previousSibling(selector) –> finder.previousSibling(ve.domNode,selector)
• previousSiblings(selector)
  ve.previousSiblings(selector) –> finder.previousSiblings(ve.domNode,selector)
• siblings()
  ve.siblings(selector) –> finder.siblings(ve.domNode,selector)

fx

• animate(properties, duration, ease, callback, delay)
  ve.animate(properties, duration, ease, callback, delay) –> finder.animate(ve.domNode,properties, duration, ease, callback, delay)
• fadeIn(speed, callback)
  ve.fadeIn(speed, callback) –> finder.fadeIn(ve.domNode,speed, callback)
• fadeOut(speed, callback)
  ve.fadeOut(speed, callback) –> finder.fadeOut(ve.domNode,speed, callback)
• fadeTo(speed, opacity, callback)
  ve.fadeTo(speed, opacity, callback) –> finder.fadeTo(ve.domNode,speed, opacity, callback)
• fadeToggle(speed, callback)
  ve.fadeToggle(speed, callback) –> finder.fadeToggle(ve.domNode,speed, callback)
• hide(speed, callback)
  ve.hide(speed, callback) –> finder.hide(ve.domNode,speed, callback)
• scrollToTop(pos, speed, callback)
  ve.scrollToTop(pos, speed, callback) –> finder.scrollToTop(ve.domNode,pos, speed, callback)
• show(speed, callback)
  ve.show(speed, callback) –> finder.show(ve.domNode,speed, callback)
• toggle(speed, callback)
  ve.toggle(speed, callback) –> finder.toggle(ve.domNode,speed, callback)

geom

• borderExtents()
  ve.borderExtents() –> geom.borderExtents(ve.domNode)
• boundingPosition(coords)
  ve.boundingPosition(coords) –> geom.boundingPosition(ve.domNode,coords)
• boundingRect(coords)
  ve.boundingRect(coords) –> geom.boundingRect(ve.domNode,coords)
• clientHeight(value)
  ve.clientHeight(value) –> geom.clientHeight(ve.domNode,value)
• clientSize(dimension)
  ve.clientSize(dimension) –> geom.clientSize(ve.domNode,dimension)
• clientWidth(value)
  ve.clientWidth(value) –> geom.clientWidth(ve.domNode,value)
• contentRect()
  ve.contentRect() –> geom.contentRect(ve.domNode)
• height(value)
  ve.height(value) –> geom.height(ve.domNode,value)
• marginExtents()
  ve.marginExtents() –> geom.marginExtents(ve.domNode)
• offsetParent()
  ve.offsetParent() –> geom.offsetParent(ve.domNode)
• paddingExtents()
  ve.paddingExtents() –> geom.paddingExtents(ve.domNode)
• pagePosition(coords)
  ve.pagePosition(coords) –> geom.pagePosition(ve.domNode,coords)
• pageRect(coords)
  ve.pageRect(coords) –> geom.pageRect(ve.domNode,coords)
• relativePosition(coords)
  ve.relativePosition(coords) –> geom.relativePosition(ve.domNode,coords)
• relativeRect(coords)
  ve.relativeRect(coords) –> geom.relativeRect(ve.domNode,coords)
• scrollIntoView()
  ve.scrollIntoView() –> geom.scrollIntoView(ve.domNode)
• scrollLeft(value)
  ve.scrollLeft(value) –> geom.scrollLeft(ve.domNode,value)
• scrollTop(value)
  ve.scrollTop(value) –> geom.scrollTop(ve.domNode,value)
• size(dimension)
  ve.size(dimension) –> geom.size(ve.domNode,dimension)
• width(value)
  ve.width(value) –> geom.width(ve.domNode,value)

noder

• clone(deep)
  ve.clone(deep) –> noder.clone(ve.domNode,deep)
• contains(child)
  ve.contains(child) –> noder.contains(ve.domNode,child)
• contents()
  ve.contents() –> noder.contains(ve.domNode)
• empty()
  ve.empty() –> noder.empty(ve.domNode)
• html(html)
  ve.html(html) –> noder.html(ve.domNode,html)
• isChildOf(parent)
  ve.isChildOf(parent) –> noder.isChildOf(ve.domNode,parent)
• ownerDoc()
  ve.ownerDoc() –> noder.ownerDoc(ve.domNode)
• placeAfter(placing, copyByClone)
  ve.placeAfter(placing, copyByClone) –> noder.placeAfter(ve.domNode,placing, copyByClone)
• placeBefore(placing, copyByClone)
  ve.placeBefore(placing, copyByClone) –> noder.placeBefore(ve.domNode,placing, copyByClone)
• placeChildFirst(placing, copyByClone)
  ve.placeChildFirst(placing, copyByClone) –> noder.placeChildFirst(ve.domNode,placing, copyByClone)
• placeChild(placing, copyByClone)
  ve.placeChild(placing, copyByClone) –> noder.placeChild(ve.domNode,placing, copyByClone)
• remove()
  ve.remove() –> noder.remove(ve.domNode)
• replace(oldNode)
  ve.replace(oldNode) –> noder.replace(ve.domNode,oldNode)
• reverse()
  ve.reverse() –> noder.reverse(ve.domNode)
• throb(params)
  ve.throb(params) –> noder.throb(ve.domNode,params)
• traverse(fn)
  ve.traverse(fn) –> noder.traverse(ve.domNode,fn)
• wrapper(wrapperNode)
  ve.wrapper(wrapperNode) –> noder.wrapper(ve.domNode,wrapperNode)
• wrapperInner(wrapperNode)
  ve.wrapperInner(wrapperNode) –> noder.wrapperInner(ve.domNode,wrapperNode)
• unwrap()
  ve.unwrap() –> noder.unwrap(ve.domNode)

styler

• addClass(name)
  ve.addClass(name) –> styler.addClass(ve.domNode,name)
• className(name)
  ve.className(name) –> styler.className(ve.domNode,name)
• css(property, value)
  ve.css(property, value) –> styler.css(ve.domNode,property, value)
• hasClass(name)
  ve.hasClass(name) –> styler.hasClass(ve.domNode,name)
• hide()
  ve.hide() –> styler.hide(ve.domNode)
• isInvisible()
  ve.isInvisible() –> styler.isInvisible(ve.domNode)
• removeClass(name)
  ve.removeClass(name) –> styler.removeClass(ve.domNode,name)
• show()
  ve.show() –> styler.show(ve.domNode)
• toggleClass(name)
  ve.toggleClass(name) –> styler.toggleClass(ve.domNode,name)