1. Exiger un fichier JS: jQuery.mailAutocomplete-3.1.js
La copie de code est la suivante:
(fonction ($) {
$ .fn.mailautocompletele = fonction (options) {
var defaults = {
BoxClass: "MailListbox", // Style de boîte externe
ListClass: "MaillistDefault", // Style de liste par défaut
FocusClass: "MaillistFocus", // Sélectionnez le style dans la liste
Markcalss: "Maillisthlignnt", // Style de surbrillance
Zindex: 1,
AutoClass: Vrai, // Il faut utiliser le plug-in avec son propre style de classe
Mailarr: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "live. com "," sohu.com "," sina.com "], // Array par e-mail
Texthint: Faux, // Affichage automatique et masque d'invites de texte
Hinttext: "",
focuscolor: "# 333",
Blurcolor: "# 999"
};
var paramètres = $ .extend ({}, par défaut, options || {});
// Page Chargement CSS Style
if (settings.autoclass && $ ("# MailListAPPEndCSS"). size () === 0) {
$ ('<style id = "MailListAPPEndCSS" type = "Text / CSS">. curseur: pointeur; espace blanc: nowrap;}. MaillistFocus {padding: 0 5px; curseur: pointeur; espace blanc: nowrap; fond: # 369; couleur: blanc;}. MAILLISTHLIGNT {COLOR: #FFFF;} </ Style> '). APPENDTO ($ ("head"));
}
var cb = settings.boxclass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markcalss;
var z = settings.zindex, newArr = MailArr = settings.mailarr, hint = settings.texthint, text = settings.hintText, fc = settings.focuscolor, bc = settin gs.blurColor;
// Créer un contenu de liste interne de l'e-mail
$ .CreateHtml = fonction (str, arr, cur) {
var mailhtml = "";
if ($. isArray (arr)) {
$ .each (arr, fonction (i, n) {
if (i === cur) {
MailHtml + = '<div id = "Maillist _' + i + '"> <span>' + str + '</span> @' + arr [i] + '</div>';
}autre{
MailHtml + = '<div id = "Maillist _' + i + '"> <span>' + str + '</span> @' + arr [i] + '</div>';
}
});
}
return MailHTML;
};
// quelques variables globales
var index = -1, s;
$ (this) .each (function () {
var that = $ (this), i = $ (". Justforjs"). size ();
if (i> 0) {// lier une seule zone de texte
retour;
}
var w = that.outerwidth (), h = that.outerHeight ();
// Initialisation de style
that.wrap ('<span style = "affichage: bloc en ligne; position: relative;"> </span>')
.before ('<div id = "MailListbox _' + i + '" style = "min-width:' + w + 'px; _width:' + w + 'px; position: absolu; gauche: -6000px; top:' + h + 'px; z-index:' + z + '; "> </div>');
var x = $ ("# MailListbox_" + i), liveValue;
that.focus (function () {
// le niveau de la balise parent
$ (this) .css ("couleur", fc) .parent (). css ("z-index", z);
// Afficher et masquer le texte de l'invite
if (hint && text) {
var focus_v = $ .trim ($ (this) .val ());
if (focus_v === texte) {
$ (this) .val ("");
}
}
// Événement de clavier
$ (this) .keyup (fonction (e) {
s = v = $ .trim ($ (this) .val ());
if (/ @ /. test (v)) {
s = v.replace (/@.*/, "");
}
if (v.length> 0) {
// Si la clé est de haut en bas
if (e.Keyycode === 38) {
//en haut
if (index <= 0) {
index = newarr.length;
}
indice--;
} else if (e.KeyCode === 40) {
//vers le bas
if (index> = newarr.length - 1) {
index = -1;
}
index ++;
} else if (e.KeyCode === 13) {
//Entrer
if (index> -1 && index <newarr.length) {
// s'il y a actuellement une liste d'activation
$ (this) .val ($ ("# MailList _" + index) .Text ());
}
}autre{
if (/ @ /. test (v)) {
index = -1;
// Obtenez la valeur après @
// s = v.replace (/@.*/, "");
// Créer un nouveau tableau de correspondance
Var Site = V.replace (/.*//, "");
newarr = $ .map (MailArr, fonction (n) {
var reg = new regexp (site);
if (reg.test (n)) {
retour n;
}
});
}autre{
newarr = Mailarr;
}
}
x.html ($. CreateHtml (S, NewAr, index)). CSS ("Left", 0);
if (e.Keyycode === 13) {
//Entrer
if (index> -1 && index <newarr.length) {
// s'il y a actuellement une liste d'activation
x.css ("Left", "-6000px");
}
}
}autre{
x.css ("Left", "-6000px");
}
}). blur (function () {
if (hint && text) {
var blur_v = $ .trim ($ (this) .val ());
if (blur_v === "") {
$ (this) .val (texte);
}
}
$ (this) .css ("couleur", bc) .unbind ("keyup"). Parent (). CSS ("Z-index", 0);
x.css ("Left", "-6000px");
});
// La souris passe l'événement de l'élément de liste
// La souris passe
$ (". MailHover"). Live ("Mouseover", fonction () {
index = nombre ($ (this) .attr ("id"). Split ("_") [1]);
LiveValue = $ ("# MailList _" + index) .Text ();
x.children ("." + cf) .RemoveClass (cf) .AddClass (CL);
$ (this) .addclass (cf) .removeclass (cl);
});
});
x.bind ("Mousedown", fonction () {
that.val (liveValue);
});
});
};
}) (jQuery);
2. La bibliothèque JQ est bien sûr essentielle, donc je vais le manquer ici
Tessons-le ci-dessous
3. Feuille de style:
La copie de code est la suivante:
<style type = "text / css">
.out_box {Border: 1px Solid #ccc;
.List_box {Border-Bottom: 1px solide #eee;
.focus_box {fond: # f0f3f9;}
.mark_box {couleur: # c00;}
</ style>
4. Code de test
La copie de code est la suivante:
<p> Affichage de la classe personnalisée: <input type = "text" id = "personnalisé" 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"). MailAutoComplete ({{
BoxClass: "out_box", // Style de boîte externe
ListClass: "list_box", // Style de liste par défaut
FocusClass: "focus_box", // sélectionnez le style dans la liste
Markcalss: "Mark_box", // Style de surbrillance
AutoClass: False,
texthint: vrai, // le texte de l'invite est automatiquement caché
Hinttext: "Veuillez saisir votre adresse e-mail"
});
})
</cript>