易操作的jQuery表單提示插件
本文實例講述了一款輕量級的表單提示插件---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數(shù)組,把需要提示的表單字段依次寫入,然后調用formatoolip函數(shù)初始化。
以上就是為大家分享的jQuery表單提示插件:jQuery Form Toolltip ,很實用,希望大家喜歡。
相關文章
etmvc+jQuery EasyUI+combobox多值操作實現(xiàn)角色授權實例
本篇文章主要介紹了etmvc+jQuery EasyUI+combobox多值操作實現(xiàn)角色授權,實現(xiàn)對角色role進行授權操作,有需要的可以了解一下。2016-11-11淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小編就為大家?guī)硪黄獪\談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09深入分析jQuery的ready函數(shù)是如何工作的(工作原理)
這篇文章主要介紹了jQuery的ready函數(shù)是如何工作的,深入分析了jQueryready函數(shù)的運作流程及相應的工作原理,需要的朋友可以參考下2015-12-12jQuery插件jquery.kxbdmarquee.js實現(xiàn)無縫滾動效果
這篇文章主要為大家詳細介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02淺析Js(Jquery)中,字符串與JSON格式互相轉換的示例(直接運行實例)
這幾天,遇到了json格式在JS和Jquey的環(huán)境中,需要相互轉換,在網上查了一下,大多為缺胳膊少腿,也許咱是菜鳥吧,終于測試成功后,還是給初學者們一個實例吧2013-07-07