易操作的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调用WebService的实现代码
Jun 19 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
AngularJS实现路由实例
Feb 12 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
Puppet的一些技巧
2018/09/17 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python关于调用函数外的变量实例
2019/12/26 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
指针和引用有什么区别
2013/01/13 面试题
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
数学专业推荐信范文
2013/11/21 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
学校联谊活动方案
2014/02/15 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
西式婚礼主持词
2014/03/13 职场文书
国庆节标语大全
2014/10/08 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
辅导员学期工作总结
2015/08/14 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书