易操作的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 事件查询综合
Jul 13 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
详解Backbone.js框架中的模型Model与其集合collection
May 05 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
详解php用static方法的原因
2018/09/12 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
JS实现滑动插件
2020/01/15 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
python顺序执行多个py文件的方法
2019/06/29 Python
Python colormap库的安装和使用详情
2020/10/06 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
化学专业毕业生自荐信
2013/11/15 职场文书
党员个人思想汇报
2013/12/28 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
高中生职业规划范文
2014/03/09 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
python中的sys模块和os模块
2022/03/20 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
nginx 添加http_stub_status_module模块
2022/05/25 Servers
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python