Heim >Web-Frontend >js-Tutorial >Einfach zu bedienendes jQuery-Formular-Eingabeaufforderungs-Plug-in_jquery

Einfach zu bedienendes jQuery-Formular-Eingabeaufforderungs-Plug-in_jquery

WBOY
WBOYOriginal
2016-05-16 15:28:281053Durchsuche

Das Beispiel in diesem Artikel beschreibt ein schlankes Formular-Eingabeaufforderungs-Plug-in – jQuery Form Toolltip. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

jQuery-Formular-Tooltip Funktionen:

  • Sie können den CSS-Stil der Eingabeaufforderungsinformationen individuell anpassen.
  • Sie können die Richtung des Ein- und Ausblendens angeben. Derzeit werden Oben, Unten, Rechts und Links unterstützt

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

jquery-Beispiel: So verwenden Sie den jQuery-Formular-Tooltip
Einführung in Kerndateien

<script src="js/jquery/2.1.1/jquery.min.js"></script>
<script src="src/jquery.formtooltip.js"></script>

HTML erstellen

<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-Initialisierung schreiben

$(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});     
});

Definieren Sie das Feldarray, schreiben Sie die Formularfelder, die nacheinander abgefragt werden müssen, und rufen Sie dann die Formatoolip-Funktion zur Initialisierung auf.

Das Obige ist das für Sie freigegebene jQuery-Formular-Tooltip-Plug-in: jQuery-Formular-Tooltip , es ist sehr praktisch, ich hoffe, es gefällt Ihnen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn