1. تتطلب ملف JS: jQuery.mailautocplete-3.1.js
نسخة الكود كما يلي:
(وظيفة ($) {
دولار.
var defaults = {
boxclass: "Maillistbox" ، // styp styp
ListClass: "Maillistdefault" ، // Style List Style
FocusClass: "Maillistfocus" ، // حدد النمط في القائمة
Markcalss: "Maillisthlignt" ، // تسليط الضوء على الأسلوب
Zindex: 1 ،
AutoClass: True ، // ما إذا كنت تريد استخدام المكون الإضافي مع نمط الفئة الخاص به
MailArr: ["qq.com" ، "gmail.com" ، "126.com" ، "163.com" ، "Hotmail.com" ، "Yahoo.com" ، "yahoo.com.cn" ، "Live. com "،" sohu.com "،" sina.com "] ، // صفيف البريد الإلكتروني
Texthint: خطأ ، // عرض تلقائي وإخفاء مطالبات النص
نص التل: "" ،
FocusColor: "#333" ،
Blurcolor: "#999"
} ؛
Var Settings = $ .Extend ({} ، الافتراضات ، الخيارات || {}) ؛
// صفحة تحميل نمط CSS
if (Settings.Autoclass && $ ("#maillistappendcss"). size () === 0) {
$ ('<style id = "maillistappendcss" type = "text/css">. maillistbox {border: 1px solid #369 ؛ background: #fff ؛ font: 12px/20px arial ؛}. mail listdefault {padding: 0 5px ؛ المؤشر: Pointer ؛ White-Space: Nowrap ؛}. 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 ؛
// إنشاء محتوى قائمة داخلية للبريد الإلكتروني
$ .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]+'</viv>' ؛
}آخر{
MailHtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</viv>' ؛
}
}) ؛
}
إرجاع mailHTML ؛
} ؛
// بعض المتغيرات العالمية
var index = -1 ، s ؛
$ (this) .each (function () {
var that = $ (this) ، i = $ (". Justforjs"). size () ؛
إذا (i> 0) {// ربط مربع نص واحد فقط
يعود؛
}
var w = that.outerwidth () ، h = that.outerheight () ؛
// تهيئة النمط
that.wrap ('<span style = "display: inline block ؛ الموضع: النسبية ؛"> </span>')
.before ('<div id = "mailliStbox _'+i+'" style = "min-width:'+w+'px ؛ _width:'+w+'px ؛ الموضع: absolute ؛ اليسار: -6000px ؛ top:'+h+ "px ؛ z-index: '+z+' ؛"> </viv> ') ؛
var x = $ ("#maillistbox_" + i) ، liveValue ؛
that.focus (function () {
// مستوى علامة الأصل
$ (this) .css ("color" ، fc) .Parent (). css ("z-index" ، z) ؛
// إظهار وإخفاء النص السريع
إذا (تلميح ونص) {
var focus_v = $ .trim ($ (this) .val ()) ؛
if (focus_v === text) {
$ (هذا) .val ("") ؛
}
}
// حدث لوحة المفاتيح
$ (this) .Keyup (function (e) {
s = v = $ .trim ($ (this) .val ()) ؛
if (/@/. test (v)) {
s = v.replace (/@.*/ ، "") ؛
}
if (v.length> 0) {
// إذا كان المفتاح صعودًا وهبوطًا
if (e.KeyCode === 38) {
//أعلى
إذا (الفهرس <= 0) {
الفهرس = newarr.length ؛
}
فِهرِس--؛
} آخر إذا (e.KeyCode === 40) {
//تحت
if (index> = newarr.length - 1) {
الفهرس = -1 ؛
}
فهرس ++ ؛
} آخر إذا (e.KeyCode === 13) {
//يدخل
if (index> -1 && index <newarr.length) {
// إذا كانت هناك قائمة تنشيط حاليًا
$ (هذا) .val ($ ("#maillist _"+index) .Text ()) ؛
}
}آخر{
if (/@/. test (v)) {
الفهرس = -1 ؛
// احصل على القيمة بعد @
// s = v.replace (/.@.*/ ، "") ؛
// قم بإنشاء مجموعة مطابقة جديدة
var site = v.replace (/.*@/ ، "") ؛
newarr = $ .map (mailarr ، function (n) {
var reg = new regexp (site) ؛
if (reg.test (n)) {
العودة ن ؛
}
}) ؛
}آخر{
نيار = ميلار ؛
}
}
X.html ($. createHtml (S ، Newarr ، INDEX)). CSS ("Left" ، 0) ؛
if (e.KeyCode === 13) {
//يدخل
if (index> -1 && index <newarr.length) {
// إذا كانت هناك قائمة تنشيط حاليًا
X.CSS ("اليسار" ، "-6000px") ؛
}
}
}آخر{
X.CSS ("اليسار" ، "-6000px") ؛
}
}). Blur (function () {
إذا (تلميح ونص) {
var blur_v = $ .trim ($ (this) .val ()) ؛
if (blur_v === "") {
$ (هذا) .val (نص) ؛
}
}
$ (this) .css ("color" ، bc) .Unbind ("keyup"). parent (). css ("z-index" ، 0) ؛
X.CSS ("اليسار" ، "-6000px") ؛
}) ؛
// يمرر الماوس بحدث عنصر القائمة
// يمر الماوس
$ (". MailHover"). Live ("Mouseover" ، Function () {
index = number ($ (this) .attr ("id"). split ("_") [1]) ؛
LiveValue = $ ("#maillist _"+index) .Text () ؛
X.Children ("." + cf) .removeclass (cf) .addClass (cl) ؛
$ (this) .addClass (cf) .removeclass (cl) ؛
}) ؛
}) ؛
x.bind ("mousedown" ، function () {
that.val (LiveValue) ؛
}) ؛
}) ؛
} ؛
}) (jQuery) ؛
2. jq library بالطبع ضرورية ، لذلك تم حذفه هنا
دعونا نختبره أدناه
3. ورقة النمط:
نسخة الكود كما يلي:
<type type = "text/css">
.out_box {الحدود: 1px Solid #CCC ؛
.list_box {border-bottom: 1px solid #EEE ؛
.focus_box {background:#f0f3f9 ؛}
.mark_box {color:#c00 ؛}
</style>
4. رمز الاختبار
نسخة الكود كما يلي:
<p> عرض الفئة المخصصة: <إدخال type = "text" id = "customtest" size = "28" /> </p>
<script src = "js/jquery-1.6.min.js" type = "text/javaScript"> </script>
<script src = "js/jquery.mailautocplete-33.1.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
$ (function () {
$ ("#customtest"). mailautocplete ({
boxclass: "Out_box" ، // نمط المربع الخارجي
ListClass: "list_box" ، // نمط القائمة الافتراضي
FocusClass: "Focus_box" ، // حدد النمط في القائمة
MarkCalss: "Mark_box" ، // Aightly Style
AutoClass: خطأ ،
Texthint: True ، // يتم إخفاء النص المطري تلقائيًا
Hinttext: "الرجاء إدخال عنوان بريدك الإلكتروني"
}) ؛
})
</script>