易操作的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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
js控制web打印(局部打印)方法整理
May 29 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
解析js如何获取css样式
Dec 11 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 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
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
JavaScript 冒泡排序和选择排序的实现代码
2016/09/03 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python 字符串格式化代码
2013/03/17 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python实现宿舍管理系统
2019/11/22 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
C++是不是类型安全的
2014/02/18 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
科级干部考察材料
2014/02/15 职场文书
骨干教师考核评语
2014/12/31 职场文书
答辩状格式范本
2015/05/22 职场文书
公司转让协议书
2016/03/19 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电