jQuery Plugin Entwicklungshilfe

Question

Dies ist mein erster Versuch eines Plugins, aber ich denke, ich vermisse das ganze "How to" dazu.

Ok hier geht:

Der Versuch, einen Fehler Popup-Fenster für Formular-Validierung zu schreiben.

Ich mag das Aussehen und die Funktionalität auf diesem JavaScript-Code auf dieser Seite, Siehe Demo hier und Quelle hier.

Es ist im Grunde, was ich tun möchte, wenn der Benutzer ungültige Daten eingibt.

Jetzt habe ich versucht, eine jQuery-Plugin mit diesem Code zu erstellen, aber es funktioniert nicht, jede mögliche Hilfe würde groß sein :-)

(function($){ 

/* Might use the fadein fadeout functions */ 
var MSGTIMER = 20; 
var MSGSPEED = 5; 
var MSGOFFSET = 3; 
var MSGHIDE = 3; 

var errorBox = function(target, string, autohide, options) 
{ 
    var ebox  = $(ebox); 
    var eboxcontent = $(eboxcontent); 
    var target  = $(target); 
    var string  = $(string); 
    var autohide = $(autohide); 
    var obj = this; 

    if (!document.getElementById('ebox')) { 
     ebox = document.createElement('div'); 
     ebox.id = 'ebox'; 
     eboxcontent = document.createElement('div'); 
     eboxcontent.id = 'eboxcontent'; 
     document.body.appendChild(ebox); 
     ebox.appendChild(eboxcontent); 
     ebox.style.filter = 'alpha(opacity=0)'; 
     ebox.style.opacity = 0; 
     ebox.alpha = 0; 
    } 
    else { 
     ebox = document.getElementById('ebox'); 
     eboxcontent = document.getElementById('eboxcontent'); 
    } 
    eboxcontent.innerHTML = string; 
    ebox.style.display = 'block'; 
    var msgheight = ebox.offsetHeight; 
    var targetdiv = document.getElementById(target); 
    targetdiv.focus(); 
    var targetheight = targetdiv.offsetHeight; 
    var targetwidth = targetdiv.offsetWidth; 
    var topposition = topPosition(targetdiv) - ((msgheight - targetheight)/2); 
    var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET; 
    ebox.style.top = topposition + 'px'; 
    ebox.style.left = leftposition + 'px'; 
    clearInterval(ebox.timer); 
    ebox.timer = setInterval("fadeMsg(1)", MSGTIMER); 
    if (!autohide) { 
     autohide = MSGHIDE; 
    } 
    window.setTimeout("hideMsg()", (autohide * 1000)); 

    // hide the form alert // 
    this.hideMsg(msg) = function(){ 
     var msg = document.getElementById('msg'); 
     if (!msg.timer) { 
      msg.timer = setInterval("fadeMsg(0)", MSGTIMER); 
     } 
    }; 

    // face the message box // 
    this.fadeMsg(flag) = function() { 
     if (flag == null) { 
      flag = 1; 
     } 
     var msg = document.getElementById('msg'); 
     var value; 
     if (flag == 1) { 
      value = msg.alpha + MSGSPEED; 
     } 
     else { 
      value = msg.alpha - MSGSPEED; 
     } 
     msg.alpha = value; 
     msg.style.opacity = (value/100); 
     msg.style.filter = 'alpha(opacity=' + value + ')'; 
     if (value >= 99) { 
      clearInterval(msg.timer); 
      msg.timer = null; 
     } 
     else 
      if (value <= 1) { 
       msg.style.display = "none"; 
       clearInterval(msg.timer); 
      } 
    }; 

    // calculate the position of the element in relation to the left of the browser // 
    this.leftPosition(target) = function() { 
     var left = 0; 
     if (target.offsetParent) { 
      while (1) { 
       left += target.offsetLeft; 
       if (!target.offsetParent) { 
        break; 
       } 
       target = target.offsetParent; 
      } 
     } 
     else 
      if (target.x) { 
       left += target.x; 
      } 
     return left; 
    }; 

    // calculate the position of the element in relation to the top of the browser window // 
    this.topPosition(target) = function() { 
     var top = 0; 
     if (target.offsetParent) { 
      while (1) { 
       top += target.offsetTop; 
       if (!target.offsetParent) { 
        break; 
       } 
       target = target.offsetParent; 
      } 
     } 
     else 
      if (target.y) { 
       top += target.y; 
      } 
     return top; 
    }; 

    // preload the arrow // 
    if (document.images) { 
     arrow = new Image(7, 80); 
     arrow.src = "images/msg_arrow.gif"; 
    } 
}; 

$.fn.errorbox = function(options) 
{ 
    this.each(function() 
    { 
     var element = $(this); 

     // Return early if this element already has a plugin instance 
     if (element.data('errorbox')) return; 

     // pass options to plugin constructor 
     var errorbox = new errorBox(this, options); 

     // Store plugin object in this element's data 
     element.data('errorbox', errorbox); 
    }); 
}; 

}) (jQuery);

Wie Im es

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>jQuery Plugin - Error ToolTip</title> 
    <script type="text/javascript" src="js/jquery.js"> 
    </script> 
    <script type="text/javascript" src="js/jquery.errorbox.js"> 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var name = document.getElementById('name'); 

      if(name == "") { 
       $('#name','You must enter your name.',2).errorbox(); 
       alert("Blank"); 
      } 
     }); 
    </script> 
    <link rel="stylesheet" type="text/css" href="css/errorbox.css" /> 
</head> 
<body> 
    <div> 
     Name: <input type="text" id="name" width="30"></input> 
    </div> 
</body> 

Jede Hilfe bei meinem ersten Plugin wäre toll nennen, Dank im Voraus.

--Phill

Answer 1

Der var errorBox = function(... ändern muss:

$.errorBox = function(... 

dann können Sie es auf dem Jquery-Objekt aufrufen.

Zweitens möchten Sie aus Gründen der Übersichtlichkeit $('#eboxcontent') anstelle von document.getElementById('eboxcontent') verwenden. Es wird nicht schneller sein, aber es ist "klarer" zu anderen Jquery-Entwicklern.

Schließlich hat jQuery viele eingebaute Funktionen zum Überblenden von Dingen über einen bestimmten Zeitraum, und es scheint, dass Sie Ihre eigenen gebaut haben. Ich weiß, dass jQuery Fading Cross-Browser-kompatibel ist. nur verwenden:

$('#someDivId').fadeOut(timeInMilliseconds); 

Answer 2

var name = document.getElementById('name'); 

if(name == "") { 
    //... 
} 

sollte

var name = document.getElementById('name'); 

if(name.value == "") { 
    //... 
} 

oder

var name = $('#name').val(); 

if(name == "") { 
    //... 
}