1. Требуется файл JS: jquery.mailautocomplete-3.1.js
Кода -копия выглядит следующим образом:
(function ($) {
$ .fn.mailautocomplete = function (options) {
var defaults = {
Boxclass: "Maillistbox", // Внешний стиль коробки
ListClass: "MaillistDefault", // Стиль списка по умолчанию
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: false, // автоматический отображение и скрыть текстовые подсказки
HintText: "",
Focuscolor: "#333",
Blurcolor: "#999"
};
настройки var = $ .extend ({}, по умолчанию, опции || {});
// Загрузка страницы стиль CSS
if (settings.autoclass && $ ("#maillistappendcss"). size () === 0) {
$ ('<style id = "maillistappendcss" type = "text/css">. Maillistbox {Border: 1px solid #369; фон: #fff; font: 12px/20px arial;}. Mail listdefault {padding: 0 5px; Курсор: Pointer; Белое пространство: nowrap;}. Maillistfocus {Padding: 0 5px; Cursor: Pointer; белое пространство: nowrap; фон:#369; цвет: белый;}. 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 = cettin gs.blurcolor;
// Создание внутреннего содержимого списка электронной почты
$ .createhtml = function (str, arr, cur) {
var mailhtml = "";
if ($. isarray (arr)) {
$.
if (i === cur) {
mailhtml+= '<div id = "maillist _'+i+'"> <pan>'+str+'</span>@'+arr [i]+'</div>';
}еще{
mailhtml+= '<div id = "maillist _'+i+'"> <pan>'+str+'</span>@'+arr [i]+'</div>';
}
});
}
вернуть mailHtml;
};
// некоторые глобальные переменные
var index = -1, s;
$ (this).
var that = $ (this), i = $ (". Justforjs"). size ();
if (i> 0) {// Привязан только одно текстовое поле
возвращаться;
}
var w = that.outerwidth (), h = that.outerheight ();
// инициализация стиля
это.
.pefore ('<<div id = "maillistbox _'+i+'" style = "min-width:'+w+'px; _width:'+w+'px; положение: абсолют; слева: -6000px; top:'+h+ 'px; z-index:'+z+'; "> </div>');
var x = $ ("#maillistbox_" + i), livevalue;
that.focus (function () {
// Уровень родительского тега
$ (this) .css ("color", fc) .parent (). css ("z-index", z);
// Показать и скрыть текст
if (int && text) {
var Focus_v = $ .Trim ($ (this) .val ());
if (Focus_v === Text) {
$ (this) .val ("");
}
}
// событие клавиатуры
$ (this) .keyup (function (e) {
s = v = $ .trim ($ (this) .val ());
if (/@/. test (v)) {
s = v.replace (/@.*/, "");
}
if (v.length> 0) {
// Если ключ вверх и вниз
if (e.keycode === 38) {
//вверх
if (index <= 0) {
index = newarr.length;
}
Индекс-;
} else if (e.keycode === 40) {
//вниз
if (index> = newarr.length - 1) {
index = -1;
}
index ++;
} else if (e.keycode === 13) {
//Входить
if (index> -1 && index <newarr.length) {
// Если в настоящее время есть список активации
$ (this) .val ($ ("#maillist _"+index) .text ());
}
}еще{
if (/@/. test (v)) {
index = -1;
// Получить значение после @
// s = v.replace (/@.*/, "");
// Создать новый соответствующий массив
var site = v.replace (/.*@/, "");
newarr = $ .map (mailarr, function (n) {
var reg = new Regexp (сайт);
if (reg.test (n)) {
возврат n;
}
});
}еще{
newarr = mailarr;
}
}
x.html ($. createhtml (s, newarr, index)). css ("слева", 0);
if (e.keycode === 13) {
//Входить
if (index> -1 && index <newarr.length) {
// Если в настоящее время есть список активации
x.css («слева», «-6000px»);
}
}
}еще{
x.css («слева», «-6000px»);
}
}). Blur (function () {
if (int && text) {
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) .AdClass (cl);
$ (this) .addclass (cf) .RemoveClass (CL);
});
});
x.bind ("mousedown", function () {
что. Val (LiveValue);
});
});
};
}) (jQuery);
2. JQ Библиотека, конечно, необходима, поэтому я буду скучать по ней здесь
Давайте проверим это ниже
3. Стильский лист:
Кода -копия выглядит следующим образом:
<стиль типа = "text/css">
.out_box {Border: 1px solid #ccc;
.list_box {Border-Bottom: 1px solid #EEE;
.focus_box {fourene:#f0f3f9;}
.mark_box {color:#c00;}
</style>
4. Тестовый код
Кода -копия выглядит следующим образом:
<p> Пользовательский класс отображение: <input type = "text" id = "customStest" 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 () {
$ ("#CustomStest"). MailAutoCoplete ({
BoxClass: "out_box", // Внешний стиль коробки
ListClass: "List_box", // Стиль списка по умолчанию
Focusclass: "Focus_box", // выберите стиль в списке
Markcalss: "mark_box", // выделить стиль
AutoClass: ложь,
Texthint: True, // Текст подсказки автоматически скрыт
HintText: «Пожалуйста, введите свой адрес электронной почты»
});
})
</script>