易操作的jQuery表单提示插件
- 更新时间:2023-01-05 09:10:26
- 编辑:公春柏
本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip。分享给大家供大家参考。具体如下:
jQuery Form Toolltip 特点:
- 你可以单独自定义提示信息的CSS样式。
- 你可以指定淡入淡出的方向,当前支持Top, Bottom, Right 和 Left
运行效果截图如下:
具体代码如下:
jquery实例:jQuery Form Toolltip使用方法
引入核心文件
<script src="js/jquery/2.1.1/jquery.min.js"></script> <script src="src/jquery.formtooltip.js"></script>
构建html
<form id="formname"> <table> <tr> <td> Title </td> <td><input type="text" value="blank" name="title"/></td> </tr> <tr> <td> Name </td> <td><input type="name" value="Blank Name" name="name"/></td> </tr> <tr> <td> Color </td> <td><input type="color" value="#000FFF" name="color"/></td> </tr> <tr> <td> TextArea </td> <td><textarea type="month" value="" name="text"></textarea></td> </tr> </table> </form>
写入JS初始化
$(document).ready(function(){ var fields = { title: { tooltip : "This field is actually for bla bla bla...</br>and bla bla bla", position: 'bottom' }, name : { tooltip: "This is for fun!!!!", //提示的信息 position: 'right', //动画的方向 backgroundColor: "#FF0000", //背景颜色 color: '#FFFF00' //字体颜色 }, color : { tooltip: "This is for your cover color~~~<a href='#'>here</a>" }, text : { tooltip: "Please provide your comment here." } }; //Include Global Color $("#formname").formtoolip(fields, { backgroundColor: "#000000" , color : "#FFFFFF", fontSize : 15, padding : 10, borderRadius : 5}); });
定义fields数组,把需要提示的表单字段依次写入,然后调用formatoolip函数初始化。
以上就是为大家分享的jQuery表单提示插件:jQuery Form Toolltip ,很实用,希望大家喜欢。
相关教程
-
关于jQuery检查某个元素是否存在代码
本文给大家讲解的是使用jQuery检测某个元素是否存在的代码和思路,十分的实用,有需要的小伙伴可以参考下。
发布时间:2020-02-14
-
jQuery实现鼠标经过图片变亮离开变暗的效果代码
jQuery实现的仿商城图片变亮变暗效果,鼠标悬停图片之后该图片变亮,其他图片变暗。移开鼠标所有图片变亮,兼容主流浏览器,适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、
发布时间:2019-08-09
-
jquery.rotate.js实现抽奖次数及中奖内容的转盘抽奖实例
这篇文章主要介绍了jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码,需要的朋友可以参考下
发布时间:2020-05-13
-
JavaScript的jQuery库中表单转化为JSON对象的实例代码
这篇文章主要介绍了将JavaScript的jQuery库中表单转化为JSON对象的方法,包括对序列化时空格问题的处理方法,需要的朋友可以参考下
发布时间:2020-01-13
-
JQuery程序的代码风格详解
良好的代码风格可以有效的增加可读性,本节为大家介绍jQuery程序的代码风格,感兴趣的朋友可以参考下
发布时间:2019-11-26
-
jQuery轻松实现无缝轮播实例代码
这篇文章主要为大家详细介绍了jQuery轻松实现无缝轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
发布时间:2020-01-21
-
关于jQuery Tools tab使用说明
jQuery Tools tab使用介绍,需要的朋友可以参考下
发布时间:2020-01-24
-
jquery插件dialog实现弹框效果的实例内容
这篇文章介绍了jquery中插件dialog实现弹框效果实例代码,有需要的朋友可以参考一下
发布时间:2020-04-23
-
全面解析jQuery无冲突模式
在本篇文章里小编给大家分享了关于jQuery无冲突模式知识点分析内容,需要的朋友们可以学习下。
发布时间:2020-01-19