1. Erfordern Sie eine JS
Die Codekopie lautet wie folgt:
(Funktion ($) {
$ .fn.MailAutOcomplete = Funktion (Optionen) {
var defaults = {
BoxClass: "Maillistbox", // externer Boxstil
ListClass: "Maillistdefault", // Standardlistenstil
FOCUSCLASS: "Maillistfocus", // den Stil in der Liste auswählen
Markcals: "Maillisthlignt", // Highlight -Stil
Zindex: 1,
Autoclass: True, // ob das Plug-In mit einem eigenen Klassenstil verwendet werden soll
Mailarr: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "Live. com "," sohu.com "," Sina.com "], // E -Mail -Array
SMTING: FALSE, // Automatische Anzeige und Ausblenden von Texteingaben
HintText: "",
FocusColor: "#333",
Blurcolor: "#999"
};
var Einstellungen = $ .extend ({}, Standardeinstellungen, Optionen || {});
// Seite laden CSS -Stil
if (Settings.Autoclass && $ ("#Maillistappendcss"). Größe () === 0) {
$ ('<style id = "Maillistappendcss" type = "text/css">. MaillistBox {Border: 1PX Solid #369; Hintergrund: #fff; Schrift: 12px/20px Arial;}. Mail Listdefault {Padding: 0 5PX; Cursor: Zeiger; weißer Raum: Nowrap;}. Maillistfocus {Padding: 0 5px; Cursor: Zeiger; weißer Raum: nowrap; Hintergrund:#369; Farbe: weiß;}. mAILLISTHLIGNT {color: #ffff;} </style> '). appendTo ($ ("head"));
}
var cb = setting.boxclass, cl = Settings.ListClass, CF = Settings.FocusClass, CM = Settings.Markcals;
var z = Settings.zindex, newarr = mailarr = Einstellungen.Mailarr, Hinweis = Settings.TexDinT, text = Settings.HintText, fc = settings.focuscolor, bc = settin gs.blurcolor;
// Erstellen Sie Inhalte der internen Liste der E -Mail
$ .createhtml = function (str, arr, cur) {
var mailhtml = "";
if ($. Isarray (arr)) {
$ .each (arr, function (i, n) {
if (i === cur) {
MailHTML+= '<div id = "Maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';
}anders{
MailHTML+= '<div id = "Maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';
}
});
}
mailhtml zurückgeben;
};
// einige globale Variablen
var index = -1, s;
$ (this) .each (function () {
var das = $ (this), i = $ (". Justforjs"). size ();
if (i> 0) {// Binden Sie nur ein Textfeld
zurückkehren;
}
var w = that.outerwidth (), h = that.outerHeight ();
// Stilinitialisierung
that.wrap ('<span style = "Anzeige: Inline-Block; Position: Relativ;"> </span>')
.beeforen ('<div id = "MaillistBox _'+i+'" style = "min-Width:'+w+'px; _width:'+w+'px; Position: absolut; links: -6000px; top:'+h+ 'px; z-Index:'+z+'; "> </div>');
var x = $ ("#mailistbox_" + i), liveValue;
that.focus (function () {
// die Ebene des übergeordneten Tags
$ (this) .css ("Farbe", fc) .Parent (). CSS ("Z-Index", Z);
// Eingabetext anzeigen und ausblenden
if (tipp && text) {
var focus_v = $ .trim ($ (this) .val ());
if (focus_v === text) {
$ (this) .val ("");
}
}
// Tastaturereignis
$ (this) .Keyup (Funktion (e) {
s = v = $ .trim ($ (this) .val ());
if (/@/. test (v)) {
S = V.Replace (/@.*/, "");
}
if (v.length> 0) {
// Wenn der Schlüssel auf und ab Taste ist
if (e.keycode === 38) {
//hoch
if (index <= 0) {
Index = newarr.length;
}
Index--;
} else if (e.keycode === 40) {
//runter
if (index> = newarr.length - 1) {
Index = -1;
}
Index ++;
} else if (e.keycode === 13) {
//Eingeben
if (index> -1 && index <newarr.length) {
// Wenn derzeit eine Aktivierungsliste vorliegt
$ (this) .val ($ ("#Maillist _"+Index) .Text ());
}
}anders{
if (/@/. test (v)) {
Index = -1;
// Erhalten Sie den Wert nach @
// s = v.replace (/@.*/, "");
// Erstellen Sie ein neues passendes Array
var Site = v.Replace (/.*@/, "");
newarr = $ .map (Mailarr, Funktion (n) {
var reg = neuer regexp (Site);
if (reg.test (n)) {
return n;
}
});
}anders{
newarr = mailarr;
}
}
X.html ($. createHtml (S, Newarr, Index)). CSS ("links", 0);
if (e.keycode === 13) {
//Eingeben
if (index> -1 && index <newarr.length) {
// Wenn derzeit eine Aktivierungsliste vorliegt
X.css ("links", "-6000px");
}
}
}anders{
X.css ("links", "-6000px");
}
}). Blur (function () {
if (tipp && text) {
var bblur_v = $ .trim ($ (this) .val ());
if (Blur_v === "") {
$ (this) .val (Text);
}
}
$ (this) .css ("color", bc) .unbind ("keyUp"). Elternteil (). CSS ("Z-Index", 0);
X.css ("links", "-6000px");
});
// Die Maus übergibt das Listenelement -Ereignis
// Die Maus passt
$ (". Mailhover"). Live ("Mouseover", Funktion () {
index = nummer ($ (this) .attr ("id"). split ("_") [1]);
LiveValue = $ ("#mailist _"+index) .Text ();
X.Children ("." + cf) .removeclass (vgl.) .AddClass (cl);
$ (this) .addClass (vgl.) .removeclass (cl);
});
});
X.bind ("MouseDown", function () {
this.val (LiveValue);
});
});
};
}) (jQuery);
2.JQ -Bibliothek ist natürlich unerlässlich, also wird hier weggelassen
Testen wir es unten
3. Stilblatt:
Die Codekopie lautet wie folgt:
<style type = "text/css">
.out_box {Border: 1PX Solid #CCC;
.List_box {Border-Bottom: 1px Solid #eee;
.focus_box {Hintergrund:#f0f3f9;}
.mark_box {color:#c00;}
</style>
4. Testcode
Die Codekopie lautet wie folgt:
<p> Benutzerdefinierte Klasse Anzeige: <Eingabe type = "text" id = "customTest" size = "28" /> < /p>
<script src = "js/jQuery-1.6.min.js" type = "text/javaScript"> </script>
<script src = "js/jQuery.mailAutoComplete-3.1.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
$ (function () {
$ ("#CustomTest"). MailAutOcplete ({{{
BoxClass: "out_box", // externer Boxstil
ListClass: "List_box", // Standardlistenstil
FocusClass: "Focus_box", // Wählen Sie den Stil in der Liste aus
Markcals: "mark_box", // Highlight -Stil
Autoklas: Falsch,
STEXTING: TRUE, // Der schnelle Text ist automatisch versteckt
HintText: "Bitte geben Sie Ihre E -Mail -Adresse ein."
});
})
</script>