易操作的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 相关文章推荐
浅谈js的setInterval事件
Dec 05 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 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制作的意见反馈表源码
2007/03/11 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
jQuery实现可以扩展的日历
2020/12/01 jQuery
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
python实现可变变量名方法详解
2019/07/01 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python for循环及基础用法详解
2019/11/08 Python
python with (as)语句实例详解
2020/02/04 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
毕业生评语大全
2015/01/04 职场文书
介绍长城的导游词
2015/01/30 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL