易操作的jQuery表單提示插件
本文實(shí)例講述了一款輕量級(jí)的表單提示插件---jQuery Form Toolltip。分享給大家供大家參考。具體如下:
jQuery Form Toolltip 特點(diǎn):
- 你可以單獨(dú)自定義提示信息的CSS樣式。
- 你可以指定淡入淡出的方向,當(dāng)前支持Top, Bottom, Right 和 Left
運(yùn)行效果截圖如下:
具體代碼如下:
jquery實(shí)例:jQuery Form Toolltip使用方法
引入核心文件
<script src="js/jquery/2.1.1/jquery.min.js"></script> <script src="src/jquery.formtooltip.js"></script>
構(gòu)建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', //動(dòng)畫的方向 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ù)組,把需要提示的表單字段依次寫入,然后調(diào)用formatoolip函數(shù)初始化。
以上就是為大家分享的jQuery表單提示插件:jQuery Form Toolltip ,很實(shí)用,希望大家喜歡。
- qTip2 精致的基于jQuery提示信息插件
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)彈出提示信息的地圖熱點(diǎn)效果
- jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)提示信息的地圖熱點(diǎn)效果
- jquery 提示信息顯示后自動(dòng)消失的具體實(shí)現(xiàn)
- jquery 簡(jiǎn)短幾句代碼實(shí)現(xiàn)給元素動(dòng)態(tài)添加及獲取提示信息
- 基于JQuery的浮動(dòng)DIV顯示提示信息并自動(dòng)隱藏
- JQuery浮動(dòng)DIV提示信息并自動(dòng)隱藏的代碼
- jquery-tips懸浮提示插件分享
- jQuery實(shí)現(xiàn)的簡(jiǎn)單提示信息插件
相關(guān)文章
etmvc+jQuery EasyUI+combobox多值操作實(shí)現(xiàn)角色授權(quán)實(shí)例
本篇文章主要介紹了etmvc+jQuery EasyUI+combobox多值操作實(shí)現(xiàn)角色授權(quán),實(shí)現(xiàn)對(duì)角色role進(jìn)行授權(quán)操作,有需要的可以了解一下。2016-11-11jQuery 學(xué)習(xí)6 操縱元素顯示效果的函數(shù)
jQuery提供了hide() ,show()對(duì)元素進(jìn)行隱藏和顯示,下面看兩個(gè)函數(shù)的應(yīng)用2010-02-02淺談jquery.form.js的ajaxSubmit和ajaxForm的使用
下面小編就為大家?guī)?lái)一篇淺談jquery.form.js的ajaxSubmit和ajaxForm的使用。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09深入分析jQuery的ready函數(shù)是如何工作的(工作原理)
這篇文章主要介紹了jQuery的ready函數(shù)是如何工作的,深入分析了jQueryready函數(shù)的運(yùn)作流程及相應(yīng)的工作原理,需要的朋友可以參考下2015-12-12jQuery插件jquery.kxbdmarquee.js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼
jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-10-10jQuery產(chǎn)品間斷向下滾動(dòng)效果核心代碼
這篇文章主要為大家分享了jQuery產(chǎn)品間斷向下滾動(dòng)的核心代碼,需要的朋友可以參考下2014-05-05淺析Js(Jquery)中,字符串與JSON格式互相轉(zhuǎn)換的示例(直接運(yùn)行實(shí)例)
這幾天,遇到了json格式在JS和Jquey的環(huán)境中,需要相互轉(zhuǎn)換,在網(wǎng)上查了一下,大多為缺胳膊少腿,也許咱是菜鳥吧,終于測(cè)試成功后,還是給初學(xué)者們一個(gè)實(shí)例吧2013-07-07使用 jQuery.ajax 上傳帶文件的表單遇到的問(wèn)題
使用 jQuery 上傳帶文件的表單時(shí),會(huì)遇到一些小問(wèn)題。今天小編抽時(shí)間給大家介紹使用 jQuery.ajax 上傳帶文件的表單遇到的問(wèn)題,感興趣的朋友一起看看吧2016-10-10