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

忘是亡心i 2022-08-13 13:36 23阅读 0赞

[![641873c9-18b1-47a6-9480-93dccb93018b.png][]][641873c9-18b1-47a6-9480-93dccb93018b.png 1]

[在线演示][Link 1]

[本地下载][Link 2]

（代码太多请查看原文）

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

这次发一个刚接触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的表达验证 ][Link 2]

[641873c9-18b1-47a6-9480-93dccb93018b.png]: http://www.gbtags.com/gb/networks/uploadimgthumb/641873c9-18b1-47a6-9480-93dccb93018b.png
[641873c9-18b1-47a6-9480-93dccb93018b.png 1]: http://www.gbtags.com/gb/networks/uploadimg/641873c9-18b1-47a6-9480-93dccb93018b.png
[Link 1]: http://www.gbtags.com/gb/demoviewer/4042/01afdc5a-592c-49f6-a895-b6e640186317/myBootstrap%7Cp_myFirstPage.html.htm
[Link 2]: http://www.gbtags.com/gb/share/4042.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关【spring boot】开发一个mybatis基于双数据源的分页插件

单数据源的分页没什么说的用现成的pageHelper插件就可以了，而双数据源因为存在两个数据源方言差异的问题，已经无法通过pageHelper搞定，是时候自己搞一个分页插...

蔚落/ 2024年04月20日 09:06/ 0 赞/ 32 阅读

相关一个基于 Spring Boot Redis 的幂等

1. 此流程图为简化版本。 2. 此流程图对应的开源项目：[https://github.com/xuxiaowei-com-cn/spring-boot-starter-

落日映苍穹つ/ 2022年11月05日 03:16/ 0 赞/ 115 阅读

相关做一个Spring Boot小例子

在我的[《Spring Boot 框架介绍和使用》][Spring Boot]里介绍了Spring Boot，但是没有例子。所以这一篇的主要内容就是来做一个小例子。结合我上面那

青旅半醒/ 2022年09月30日 07:07/ 0 赞/ 175 阅读

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

[![641873c9-18b1-47a6-9480-93dccb93018b.png][]][641873c9-18b1-47a6-9480-93dccb93018b.png

忘是亡心i/ 2022年08月13日 13:36/ 0 赞/ 24 阅读

相关做一个运行Python文件的Atom插件

最近在学习Python，自然也安装了Atom编辑器的一些Python插件。有一个插件名字叫做[atom-python-run][]，作用很简单，就是按F5运行当前Python文

落日映苍穹つ/ 2022年06月17日 05:19/ 0 赞/ 149 阅读

相关做一个spring boot小项目

口号：省钱小帮手 1、开启一个spring boot项目，用于做后端服务器 2、用微信小程序作为前端，小程序实现扫描入库和输入入库两种模式 3、实现获取淘宝、京东（

- 日理万妓/ 2022年04月22日 14:16/ 0 赞/ 232 阅读

相关推荐一个jQuery的表单验证插件

jquery.validate.min.js 官网：[https://jqueryvalidation.org/][https_jqueryvalidation.or

比眉伴天荒/ 2022年03月18日 15:56/ 0 赞/ 244 阅读

相关写了一个验证相关的jquery插件

　　这次的项目中用了jquery这个javascript框架，项目中涉及验证表单的地方不少．网上也有一些有关表单验证的插件，看了看，感觉很复杂，不够灵活，于是自己试着写了一个这

骑猪看日落/ 2021年11月16日 07:04/ 0 赞/ 332 阅读

相关一个基于 Spring Boot 的在线考试系统

![format_png][] 今天推荐一款超级美观的在线考试系统，感兴趣可以先去预览地址看看该项目。在线 Demo预览，http://129.211.88.191

水深无声/ 2021年09月02日 03:03/ 0 赞/ 751 阅读

相关一个基于 Spring Boot 的项目骨架

点击上方 [Java后端][Java]，选择设为星标优质文章，及时送达 -------------------- 最近使用Spring Boot 配合 MyBatis

墨蓝/ 2021年08月27日 19:32/ 0 赞/ 281 阅读