易操作的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国旗变换效果代码
Aug 13 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
js仿京东放大镜效果
Aug 09 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js location.replace与location.reload的区别
2010/09/08 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python中的连接符(+、+=)示例详解
2017/01/13 Python
基于Python闭包及其作用域详解
2017/08/28 Python
python scatter函数用法实例详解
2020/02/11 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
Django model class Meta原理解析
2020/11/14 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
Linux操作面试题
2015/02/11 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
车间核算员岗位职责
2014/07/01 职场文书
工会趣味活动方案
2014/08/18 职场文书
会计岗位工作总结
2015/08/12 职场文书
2016小学新学期寄语
2015/12/04 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis