易操作的jQuery表单提示插件


Posted in Javascript onDecember 01, 2015

本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip。分享给大家供大家参考。具体如下:

jQuery Form Toolltip 特点:

  • 你可以单独自定义提示信息的CSS样式。
  • 你可以指定淡入淡出的方向,当前支持Top, Bottom, Right 和 Left

运行效果截图如下:

易操作的jQuery表单提示插件

具体代码如下:

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 ,很实用,希望大家喜欢。

Javascript 相关文章推荐
基于jQuery的自动完成插件
Feb 03 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
vue-axios使用详解
May 10 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
javascript使用链接跨域下载图片
Nov 01 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
JavaScript保留关键字汇总
Dec 01 #Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 #Javascript
整理Javascript函数学习笔记
Dec 01 #Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 #Javascript
js获取及判断键盘按键的方法
Dec 01 #Javascript
Eclipse引入jquery报错如何解决
Dec 01 #Javascript
JS验证邮件地址格式方法小结
Dec 01 #Javascript
You might like
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP中的类型约束介绍
2015/05/11 PHP
php去掉文件前几行的方法
2015/07/29 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
名片管理系统python版
2018/01/11 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python标准库os库的函数介绍
2020/02/12 Python
animation和transition的区别
2020/10/12 HTML / CSS
台湾最大网路书店:博客来
2018/03/18 全球购物
数据员岗位职责
2013/11/19 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
初中学生评语大全
2014/04/24 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
八项规定整改方案
2014/10/01 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
故宫导游词
2015/01/31 职场文书
好好学习保证书
2015/02/26 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers