易操作的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 学习笔记 选择器之一
Jul 23 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
vue实现分页栏效果
Jun 28 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 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 curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
很可爱的输入框
2008/08/03 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
python 数据的清理行为实例详解
2017/07/12 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
tensorflow 实现数据类型转换
2020/02/17 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
IBatis持久层技术
2016/07/18 面试题
社会发展项目建议书
2014/08/25 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
运动员加油词
2015/07/18 职场文书
Python闭包的定义和使用方法
2022/04/11 Python