(代码太多请查看原文)
加班,加班加班,我爱加班··· 我已经疯了,哦也。
这次发一个刚接触boot的时候用boot做的表单验证,我们扩展一下tooltip的插件,让他可以换颜色。
其实挺简单的,主要是考究代码阅读的能力。
boot的代码写的很简单,能省略“;”的地方就省略掉了,而且他的闭包也很有意思
-
+function($){
-
}(jQuery);
这种写法等同于
-
(function($){
-
})(jQuery);
少些一个符号,比较节俭。
他的对外接口写的就比较正常了:
。。。。
return就好像一个构造函数,.each 让方法对到每个dom上而不是dom数组。这里new一个Tooltip方法,所有的操作多在这个Tooltip中,应用prototype,把方法细分到细分,尽量原子化方法,做一个面向对象的js方法。
大体的架构就是这个样子的了。我们需要做的就是加一个参数,然后再应用到这个参数。
首先我们先给它的默认参数里面加一个:
。。。。
然后在我们调取它的方法时候,也同样加进去这个属性:
。。。。
一起:
。。。。
这个方法在tooltip的init方法里会被调用 :
。。。。
它内部对内容和箭头有特定的命名:$tip 和 $arrow;找了半天,觉得在插入内容的时候,我们来改颜色最好,所以有了下面的代码:
。。。。
这样tooltip的扩展就做好啦。
之后我们就可以用他来做一个简单的表单验证啦。
效果见代码演示。
(代码太多请查看原文)
相关推荐
一个ajax的tooltip例子,一个ajax的tooltip例子
ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该bootstrap jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。
jquery tooltip插件示例完美的页面效果
bettertip 一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活
基于 Vue 的简单 tooltip 工具
之前我们分享过一些比较实用的jQuery/CSS3 Tooltip弹出框,大部分都是鼠标滑过链接文字或者按钮时弹出一个提示层,比如这款jQuery Tooltip气泡提示框插件就拥有多种风格让你选择。这次我们要带来另外一款Tooltip用户...
GoDocTooltip - Go Doc网站的一个chrome扩展,在函数列表用tooltip显示函数描述
jQuery的一款tooltip提示插件,通过鼠标悬停显示提示时间,提示内容使用ajax动态显示。
这是一个vue的tooltip提示信息组件。它使用非常简便,同时它支持自定义样式,提示信息的位置,触发提示信息弹出的事件。提示出现隐藏的延迟时间等。
简单好用的tooltip插件。 $("[title]").tooltip();
表单验证功能非常实用,今天要分享的一款HTML5登录表单验证就非常酷,表单默认只对输入的长度作验证,你也可以自己修改正则表达式来完成更复杂的表单验证。当然这款HTML5表单验证最有优势的是他的外观,不但登录表单...
jQuery UI滑杆插件 可Tooltip提示
ystep流程,扩展驳回功能,BootstrapTooltip动态加载html
jQuery UI滑杆插件 可Tooltip提示是一款jQuery UI实现的,可以设置多种颜色,再加上CSS3上运用,可以让滑杆的游标变得有立体感,滑杆的Tooltip提示框也出现飞入飞出的动画效果。
这是一款简单实用的jQuery tooltip插件。该tooltip插件提供很多参数让你可以控制tooltip的位置、大小、内容和动画等属性,并且还可以设置tooltip的倒计时消失效果,既简单有非常的实用。
一个基于js+AJAX实现的ToolTip AJAX Client Control客户端控件源码。
纯js tooltip工具提示插件
一个简单的Tooltip类 方便在控件中添加
Hint.css是一款功能强大的Tooltip工具提示插件库。hint.css使用SASS来编写,不依赖于JavaScript。该tooltip插件使用data-*属性、伪元素、内容属性和CSS3过渡效果来制作tooltip。
一个简单的基于纯js实现的Tooltip 带有Images及Text显示。