1. Memerlukan file JS: jQuery.mailautocomplete-3.1.js
Salinan kode adalah sebagai berikut:
(function ($) {
$ .fn.mailautocomplete = fungsi (opsi) {
var default = {
BoxClass: "Maillistbox", // Gaya Kotak Eksternal
ListClass: "MaillistDefault", // Gaya Daftar Default
FocusClass: "MaillistFocus", // Pilih Gaya dalam Daftar
Markcalss: "Maillisthlignt", // Sorotan Gaya
Zindex: 1,
AutoClass: Benar, // Apakah akan menggunakan plug-in dengan gaya kelasnya sendiri
Mailarr: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "Yahoo.com", "Yahoo.com.cn", "Live. com "," sohu.com "," Sina.com "], // email array
Texthint: false, // tampilan otomatis dan sembunyikan permintaan teks
Hinttext: "",
FocusColor: "#333",
Blurcolor: "#999"
};
var pengaturan = $ .extEnd ({}, default, opsi || {});
// halaman memuat gaya css
if (settings.autoclass && $ ("#maillistappendcss"). size () === 0) {
$ ('<style id = "maillistappendcss" type = "text/css">. maillistbox {border: 1px solid #369; latar belakang: #fff; font: 12px/20px Arial;}. Mail ListDefault {padding: 0 5px; Kursor: pointer; ruang putih: Nowrap;}. MaillistFocus {padding: 0 5px; kursor: pointer; spasi putih: nowrap; latar belakang:#369; warna: putih;}. 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;
// Buat konten daftar internal email
$ .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>';
}kalau tidak{
mailHtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';
}
});
}
kembalikan mailhtml;
};
// Beberapa variabel global
indeks var = -1, s;
$ (this) .each (function () {
var that = $ (this), i = $ (". JustForjs"). size ();
if (i> 0) {// ikat hanya satu kotak teks
kembali;
}
var w = that.outerWidth (), h = that.outerHeight ();
// Inisialisasi gaya
itu.wrap ('<span style = "display: inline-block; position: relatif;"> </span>')
.before ('<div id = "maillistbox _'+i+'" style = "min-width:'+w+'px; _width:'+w+'px; posisi: absolute; kiri: -6000px; atas:'+h+ 'px; z-index:'+z+'; "> </div>');
var x = $ ("#maillistbox_" + i), Livevalue;
itu.focus (function () {
// Tingkat tag induk
$ (ini) .css ("color", fc) .parent (). css ("z-index", z);
// tunjukkan dan sembunyikan teks yang cepat
if (hint && text) {
var focus_v = $ .trim ($ (ini) .val ());
if (focus_v === teks) {
$ (ini) .val ("");
}
}
// acara keyboard
$ (this) .keyup (function (e) {
s = v = $ .trim ($ (ini) .val ());
if (/@/. test (v)) {
s = v.replace (/@.*/, "");
}
if (v.length> 0) {
// Jika kunci naik dan turun kunci
if (e.keycode === 38) {
//ke atas
if (index <= 0) {
index = newarr.length;
}
indeks--;
} lain jika (e.keycode === 40) {
//turun
if (index> = newarr.length - 1) {
indeks = -1;
}
indeks ++;
} lain jika (e.keycode === 13) {
//Memasuki
if (index> -1 && index <newarr.length) {
// Jika saat ini ada daftar aktivasi
$ (ini) .val ($ ("#maillist _"+index) .text ());
}
}kalau tidak{
if (/@/. test (v)) {
indeks = -1;
// Dapatkan nilainya setelah @
// s = v.replace (/@.*/, "");
// Buat array yang cocok baru
var situs = v.replace (/.*@/, "");
newarr = $ .map (mailarr, function (n) {
var reg = regexp baru (situs);
if (reg.test (n)) {
kembali n;
}
});
}kalau tidak{
newarr = mailarr;
}
}
x.html ($. CreateHtml (s, newarr, index)). CSS ("Left", 0);
if (e.keycode === 13) {
//Memasuki
if (index> -1 && index <newarr.length) {
// Jika saat ini ada daftar aktivasi
x.css ("kiri", "-6000px");
}
}
}kalau tidak{
x.css ("kiri", "-6000px");
}
}). blur (function () {
if (hint && text) {
var blur_v = $ .trim ($ (ini) .val ());
if (blur_v === "") {
$ (ini) .val (teks);
}
}
$ (ini) .css ("color", bc) .unbind ("keyup"). Parent (). CSS ("Z-index", 0);
x.css ("kiri", "-6000px");
});
// mouse melewati acara item daftar
// tikus melewati
$ (". MailHover"). Live ("Mouseover", function () {
index = angka ($ (ini) .attr ("id"). split ("_") [1]);
livevalue = $ ("#maillist _"+index) .text ();
x.children ("." + CF) .removeclass (cf) .addclass (cl);
$ (ini) .addclass (cf) .removeclass (cl);
});
});
x.bind ("mousedown", function () {
that.val (livevalue);
});
});
};
}) (jQuery);
2.JQ Perpustakaan tentu saja penting, jadi di sini dihilangkan
Mari kita mengujinya di bawah ini
3. Lembar Gaya:
Salinan kode adalah sebagai berikut:
<type style = "text/css">
.out_box {border: 1px solid #ccc;
.list_box {Border-bottom: 1px solid #eee;
.focus_box {latar belakang:#f0f3f9;}
.mark_box {color:#c00;}
</tyle>
4. Kode uji
Salinan kode adalah sebagai berikut:
<p> Tampilan kelas khusus: <input type = "text" id = "customtest" size = "28" /> </p>
<skrip src = "js/jQuery-1..6.min.js" type = "text/javascript"> </script>
<skrip src = "js/jQuery.mailautocomplete-3.1.js" type = "text/javascript"> </ptript>
<type skrip = "Teks/JavaScript">
$ (function () {
$ ("#CustomTest"). MailAutocomplete ({
BoxClass: "Out_box", // gaya kotak eksternal
ListClass: "list_box", // gaya daftar default
Focusclass: "Focus_Box", // Pilih Gaya dalam Daftar
MarkCalss: "Mark_Box", // Sorot Gaya
Autoclass: Salah,
Texthint: Benar, // Teks prompt secara otomatis disembunyikan
Hinttext: "Harap masukkan alamat email Anda"
});
})
</script>