`

扩展一个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的表达验证

分享到:
评论

相关推荐

    基于Vue的简单tooltip工具

    在本教程中,我们将探讨如何基于Vue框架创建一个简单的Tooltip工具,这将帮助开发者更好地理解Vue组件化编程的概念,并提升用户体验。 Vue.js是一个流行的渐进式JavaScript框架,它允许开发者构建可复用、可维护的...

    jquery tooltip插件示例

    - `container`: Tooltip 的容器,可以是一个选择器或者 DOM 元素,用于指定 Tooltip 在哪里渲染。 在实际应用中,开发者可以根据需求调整这些参数,以实现更个性化的 Tooltip 效果。此外,还可以通过 JavaScript ...

    jQuery tooltip 提示插件

    例如,当用户悬停在一个链接或按钮上时,插件可以发送一个Ajax请求到服务器,获取与该元素相关的详细信息,然后在提示框中显示。这种方式不仅减少了页面的初始加载量,还使得提示内容可以根据用户的操作或服务器状态...

    Jquery ToolTip插件

    在`test.htm`文件中,很可能是包含了一个使用jQuery ToolTip插件的示例页面,我们可以看到实际应用的效果。而`tooltip.js`则是插件的核心脚本文件,其中包含了实现Tooltip功能的JavaScript代码。 为了更好地利用...

    jQuery UI滑杆插件 可Tooltip提示

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互式组件,如日期选择器、对话框、进度条以及我们关注的滑杆(Slider)组件。滑杆插件允许用户通过水平或垂直滑动条来选择一个值,...

    css3动画网页提示插件Tooltip.zip

    "css3动画网页提示插件Tooltip.zip"是一个包含CSS3动画效果的提示插件,能够为网页增加动态视觉效果并提升用户体验。下面将详细探讨这个插件的关键知识点。 首先,CSS3是层叠样式表的第三个主要版本,引入了许多新...

    一个Vue2x的tooltip提示信息组件

    "一个Vue2x的tooltip提示信息组件"就是这样一个专门用于在用户与界面交互时提供额外信息的组件。 该组件的核心功能在于,当用户对某个元素执行特定操作(如悬停、点击等)时,它会动态地显示或隐藏提示信息。这些...

    效果非常棒的tooltip插件

    3. **插件的实现**:jQuery tooltip插件通过扩展jQuery对象,添加了一个新的方法来创建和管理Tooltip。开发者只需调用这个方法并提供必要的参数,即可自定义Tooltip的样式、位置、内容等。 4. **视觉效果**:“效果...

    基于bootstrap 3的jQuery tooltip提示插件

    ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该bootstrap jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。

    一个ajax的tooltip例子

    在网页设计中,Tooltip通常用于提供额外的上下文信息,当用户将鼠标悬停在某个元素上时,会弹出一个小窗口显示详细信息。Ajax Tooltip的优点在于,它无需刷新页面就能获取并展示远程数据,从而提供更加流畅的用户...

    bettertip 一个可以自定义Tooltip的jQuery插件

    `BetterTip`是一个专为jQuery设计的插件,它允许开发者自定义Tooltip的样式、内容和行为,使其更加灵活,能够适应各种复杂的网页布局和交互需求。与jTip相比,`BetterTip`提供了更多的定制选项和更优秀的性能。 **1...

    表单验证ToolTip类型的友好提示方式

    要实现这种友好提示方式,首先我们需要创建一个自定义的Tooltip组件,它可以包含不同的样式和动画效果。在CSS中,我们可以定义Tooltip的位置、颜色、字体等样式,以适应四种方向的显示:上、下、左、右。这通常通过...

    GoDocTooltipGoDoc网站的一个chrome扩展在函数列表用tooltip显示函数描述

    GoDocTooltip扩展通过添加一个实用的功能解决了这个问题:当鼠标悬停在函数名称上时,它会在一个便捷的tooltip(提示框)中显示该函数的简要描述。这样,用户无需离开当前页面或频繁点击,就能快速预览到所需函数的...

    基于Vue.js的Tooltip用户通知弹出框

    之前我们分享过一些比较实用的jQuery/CSS3 Tooltip弹出框,大部分都是鼠标滑过链接文字或者按钮时弹出一个提示层,比如这款jQuery Tooltip气泡提示框插件就拥有多种风格让你选择。这次我们要带来另外一款Tooltip用户...

    纯js tooltip工具提示插件

    例如,一个简单的纯JS Tooltip插件可能会包含以下代码片段: ```javascript class Tooltip { constructor(options) { this.options = options; this.init(); } init() { document.addEventListener('...

    ystep流程,扩展驳回功能,BootstrapTooltip动态加载html

    结合上述分析,我们可以得出,这个项目可能是在一个基于ystep的工作流系统中,利用BootstrapTooltip来增强用户交互体验,特别是在驳回流程节点时,通过动态加载HTML,提供更加详细和动态的提示信息。这样的实现需要...

    jquery Tooltip简易文本提示框插件

    jQuery Tooltip 是一个非常实用的JavaScript库,用于在网页上创建具有动态效果的提示框。这个插件基于流行的jQuery框架,可以轻松地为任何元素添加提示功能,为用户提供更丰富的交互体验。下面将详细介绍jQuery ...

    Tooltip

    【Tooltip】是一个在软件开发中常见的用户界面元素,它的全称是“工具提示”,用于向用户提供额外的信息。当用户将鼠标悬停在某个控件上时,Tooltip会显示一个小窗口,展示该控件的功能或者相关说明,帮助用户理解不...

    js-css-tooltip是一款使用js和css3制作的tooltip工具提示插件

    `js-css-tooltip`是一个利用JavaScript和CSS3技术打造的高效、美观的Tooltip插件。这款插件不仅提供了丰富的自定义选项,还引入了CSS3动画效果,使得提示信息的展示更具吸引力和用户体验。 **一、核心功能** 1. **...

    JQuery 实现的带有Tooltip效果表单验证

    本教程将详细讲解如何使用`jQuery`实现一个带有Tooltip效果的表单验证。 首先,我们需要了解`jQuery`的基础知识。`jQuery`通过简洁的API使DOM操作、事件处理、动画和Ajax交互变得更加容易。在进行表单验证时,我们...

Global site tag (gtag.js) - Google Analytics