扩展一个boot的插件—tooltip&做一个基于boot的表达验证

扩展一个boot的插件—tooltip&做一个基于boot的表达验证

在线演示

本地下载

(代码太多请查看原文)

加班,加班加班,我爱加班··· 我已经疯了,哦也。

这次发一个刚接触boot的时候用boot做的表单验证,我们扩展一下tooltip的插件,让他可以换颜色。

其实挺简单的,主要是考究代码阅读的能力。

boot的代码写的很简单,能省略“;”的地方就省略掉了,而且他的闭包也很有意思

  1. +function($){

  2. }(jQuery);

这种写法等同于

  1. (function($){

  2. })(jQuery);

少些一个符号,比较节俭。

他的对外接口写的就比较正常了:

。。。。

return就好像一个构造函数,.each 让方法对到每个dom上而不是dom数组。这里new一个Tooltip方法,所有的操作多在这个Tooltip中,应用prototype,把方法细分到细分,尽量原子化方法,做一个面向对象的js方法。

大体的架构就是这个样子的了。我们需要做的就是加一个参数,然后再应用到这个参数。

首先我们先给它的默认参数里面加一个:

。。。。

然后在我们调取它的方法时候,也同样加进去这个属性:

。。。。

一起:

。。。。

这个方法在tooltip的init方法里会被调用 :

。。。。

它内部对内容和箭头有特定的命名:$tip 和 $arrow;找了半天,觉得在插入内容的时候,我们来改颜色最好,所以有了下面的代码:

。。。。

这样tooltip的扩展就做好啦。

之后我们就可以用他来做一个简单的表单验证啦。

效果见代码演示。

(代码太多请查看原文)

阅读全文:扩展一个boot的插件—tooltip&做一个基于boot的表达验证

你可能感兴趣的:(tooltip)