易操作的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 获取鼠标左右键的键值方法
Oct 11 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
javascript对象的创建和访问
Mar 08 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
PHP编程风格规范分享
2014/01/15 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python列表的增删改查实例代码
2018/01/30 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
python开发游戏的前期准备
2019/05/05 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
财务与信息服务专业推荐信
2013/11/28 职场文书
毕业设计计划书
2014/01/09 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
交通事故私了协议书
2014/04/16 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
利用Python实现Picgo图床工具
2021/11/23 Python