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

2024-05-01 18:38

本文主要是介绍扩展一个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的表达验证

这篇关于扩展一个boot的插件—tooltip做一个基于boot的表达验证的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/952398

相关文章

JAVA系统中Spring Boot应用程序的配置文件application.yml使用详解

《JAVA系统中SpringBoot应用程序的配置文件application.yml使用详解》:本文主要介绍JAVA系统中SpringBoot应用程序的配置文件application.yml的... 目录文件路径文件内容解释1. Server 配置2. Spring 配置3. Logging 配置4. Ma

解决mybatis-plus-boot-starter与mybatis-spring-boot-starter的错误问题

《解决mybatis-plus-boot-starter与mybatis-spring-boot-starter的错误问题》本文主要讲述了在使用MyBatis和MyBatis-Plus时遇到的绑定异常... 目录myBATis-plus-boot-starpythonter与mybatis-spring-b

Jenkins中自动化部署Spring Boot项目的全过程

《Jenkins中自动化部署SpringBoot项目的全过程》:本文主要介绍如何使用Jenkins从Git仓库拉取SpringBoot项目并进行自动化部署,通过配置Jenkins任务,实现项目的... 目录准备工作启动 Jenkins配置 Jenkins创建及配置任务源码管理构建触发器构建构建后操作构建任务

Spring Boot 中整合 MyBatis-Plus详细步骤(最新推荐)

《SpringBoot中整合MyBatis-Plus详细步骤(最新推荐)》本文详细介绍了如何在SpringBoot项目中整合MyBatis-Plus,包括整合步骤、基本CRUD操作、分页查询、批... 目录一、整合步骤1. 创建 Spring Boot 项目2. 配置项目依赖3. 配置数据源4. 创建实体类

详解Spring Boot接收参数的19种方式

《详解SpringBoot接收参数的19种方式》SpringBoot提供了多种注解来接收不同类型的参数,本文给大家介绍SpringBoot接收参数的19种方式,感兴趣的朋友跟随小编一起看看吧... 目录SpringBoot接受参数相关@PathVariable注解@RequestHeader注解@Reque

IDEA常用插件之代码扫描SonarLint详解

《IDEA常用插件之代码扫描SonarLint详解》SonarLint是一款用于代码扫描的插件,可以帮助查找隐藏的bug,下载并安装插件后,右键点击项目并选择“Analyze”、“Analyzewit... 目录SonajavascriptrLint 查找隐藏的bug下载安装插件扫描代码查看结果总结Sona

Spring Boot实现多数据源连接和切换的解决方案

《SpringBoot实现多数据源连接和切换的解决方案》文章介绍了在SpringBoot中实现多数据源连接和切换的几种方案,并详细描述了一个使用AbstractRoutingDataSource的实... 目录前言一、多数据源配置与切换方案二、实现步骤总结前言在 Spring Boot 中实现多数据源连接

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

科研绘图系列:R语言扩展物种堆积图(Extended Stacked Barplot)

介绍 R语言的扩展物种堆积图是一种数据可视化工具,它不仅展示了物种的堆积结果,还整合了不同样本分组之间的差异性分析结果。这种图形表示方法能够直观地比较不同物种在各个分组中的显著性差异,为研究者提供了一种有效的数据解读方式。 加载R包 knitr::opts_chunk$set(warning = F, message = F)library(tidyverse)library(phyl