易操作的jQuery表单提示插件

前端技术 2023/09/04 JavaScript

本文实例讲述了一款轻量级的表单提示插件---jQuery Form Toolltip。分享给大家供大家参考。具体如下：

jQuery Form Toolltip 特点：

  • 你可以单独自定义提示信息的CSS样式。
  • 你可以指定淡入淡出的方向，当前支持Top, Bottom, Right 和 Left

运行效果截图如下：

具体代码如下：

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 ，很实用，希望大家喜欢。

本文地址：https://www.stayed.cn/item/11074

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案