易操作的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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
js获取视频时长代码
Apr 10 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
Jquery使用val方法读写value值
May 18 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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 传值赋值与引用赋值的区别
2010/12/29 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
常用简易JavaScript函数
2009/04/09 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
详解Django中的form库的使用
2015/07/18 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
Flask之请求钩子的实现
2018/12/23 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
捐款倡议书范文
2014/02/02 职场文书
顶碗少年教学反思
2014/02/21 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
安全宣传标语
2014/06/10 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2014年科协工作总结
2014/12/09 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript