bojouElement

轻量的工具集

使用

npm install bojouelement
var bojou = require('bojouelement')

属性方法

bojou.clickRipple

clickRipple可以让你指定元素点击时具有涟漪效果，增强用户的交互感。 只需要在页面中适时地调用bojou.clickRipple.register(el),el 接收一个node 后者nodeList对象。

var box = document.querySelectorAll('.box')
bojou.clickRipple.register(box)

现在你的.box元素click的时候就会有一个涟漪效果。

同时你可以指定涟漪的颜色：
bojou.clickRipple.color = 'rgba(123,13,12,0.3)'

bojou.singleDoubleClick

有时候我们会遇到一个元素上既有单击click又有双击dblclick的事件绑定，这时候就会有冲突。可能会出现你明明是双击，但是单击事件也会响应的情况。这种情况下，你可以在你监听事件的开头使用bojou.sin_dou_click.init() 来让你页面中所有同时监听click和dblclick的元素能够按照正确的逻辑响应。即双击的时候不会响应单击事件。

bojou.sin_dou_clcik.init()

** 需要注意的是 **

• 必须得在所有的el.addEventLister()前面初始化bojou.sin_dou_click
• bojou.sin_dou_click 不能检测到DOM0级的事件绑定
• 同时也能够检测到jQuery.on()监听的事件，但是要求jQuery的版本必须是比较新的。

bojou.wscroll

这个集合用来检测页面上的元素相对于视口的滚动情况。如果你想检测某个元素，什么时候在视口的下边界出现，什么时候在视口的上边界消失，那么这个集合是一个不错的选择。

var scroll = new bojou.WScroll(el,{
    up:{
        topShowInB:fn ,//向上滚动元素上边界出现在视口底部的回调函数
        bottomShowInB:fn, //向上滚动元素下边界出现在视口底部的回调函数
        topHideInT:fn,//向上滚动元素上边界消失在视口顶部的回调函数
        bottomHideInT:fn,//向上滚动元素下边界消失在视口顶部的回调函数
    },
    down:{
        topShowInT:fn,//向下滚动元素，上边界出现在视口顶部时的回调函数
        bottomShowInT:fn,//向下滚动元素，下边界出现在视口顶部时的回调函数
        topHideInB:fn,//向下滚动，上边界消失在视口底部时的回调函数
        bottomHideInB:fn,//向下滚动，下边界消失在视口底部时的回调函数
    }
})

** 需要注意的是 ** 有时候你有可能在上面的八个回掉函数中操作DOM，导致页面元素的位置发生了变化，此时需要调用

bojou.WScroll.reset()

来让检测系统重新计算所有监听元素的位置。