1. ต้องการไฟล์ JS: jQuery.Mailautocomplete-3.1.js
การคัดลอกรหัสมีดังนี้:
(ฟังก์ชั่น ($) {
$ .fn.mailautocomplete = function (ตัวเลือก) {
var defaults = {
BoxClass: "Maillistbox", // สไตล์กล่องภายนอก
ListClass: "Maillistdefault", // สไตล์รายการเริ่มต้น
FocusClass: "Maillistfocus", // เลือกสไตล์ในรายการ
Markcalss: "MaillisthLignt", // สไตล์ไฮไลท์
Zindex: 1,
Autoclass: จริง // ว่าจะใช้ปลั๊กอินกับสไตล์คลาสของตัวเอง
Mailarr: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "สด com "," sohu.com "," sina.com "], // email array
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; แบบอักษร: 12px/20px arial;}. จดหมาย เคอร์เซอร์: Pointer; White-Space: Nowrap;}. Maillistfocus {padding: 0 5px; เคอร์เซอร์: ตัวชี้; Space White-space: Nowrap; พื้นหลัง:#369; สี: สีขาว;} MaillisthLignt {color: #ffff;} </style> '). ภาคผนวก ($ ("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 = "";
ถ้า ($. isarray (arr)) {
$ .Each (arr, function (i, n) {
ถ้า (i === cur) {
mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';
}อื่น{
mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';
-
-
-
ส่งคืน mailhtml;
-
// ตัวแปรทั่วโลกบางตัว
ดัชนี var = -1, s;
$ (นี่) .each (ฟังก์ชัน () {
var that = $ (this), i = $ (". justforjs"). size ();
if (i> 0) {// ผูกเฉพาะกล่องข้อความเดียว
กลับ;
-
var w = that.outerwidth (), h = that.outerheight ();
// การเริ่มต้นสไตล์
That.wrap ('<span style = "แสดง: inline-block; ตำแหน่ง: สัมพัทธ์;"> </span>')
. ก่อน ('<div id = "maillistbox _'+i+'" style = "min-width:'+w+'px; _width:'+w+'px; ตำแหน่ง: Absolute; ซ้าย: -6000px; top:'+H+ 'px; z-index:'+z+'; "> </div>');
var x = $ ("#maillistbox_" + i), livevalue;
That.focus (function () {
// ระดับของแท็กแม่
$ (นี่) .css ("สี", fc) .parent (). css ("z-index", z);
// แสดงและซ่อนข้อความพรอมต์
ถ้า (คำแนะนำ && ข้อความ) {
var focus_v = $ .trim ($ (this) .val ());
if (focus_v === ข้อความ) {
$ (นี่) .val ("");
-
-
// กิจกรรมคีย์บอร์ด
$ (นี่) .KeyUp (ฟังก์ชั่น (e) {
S = V = $ .TRIM ($ (นี่) .val ());
if (/@/. test (v)) {
s = v.replace (/@.*/, "");
-
if (v.length> 0) {
// ถ้าคีย์ขึ้นและลงคีย์
if (e.keycode === 38) {
//ขึ้น
ถ้า (ดัชนี <= 0) {
index = 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 = ใหม่ 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");
-
}). เบลอ (ฟังก์ชัน () {
ถ้า (คำแนะนำ && ข้อความ) {
var blur_v = $ .trim ($ (this) .val ());
if (blur_v === "") {
$ (นี่) .val (ข้อความ);
-
-
$ (นี่) .css ("สี", bc) .unbind ("keyup"). parent (). css ("z-index", 0);
x.css ("ซ้าย", "-6000px");
-
// เมาส์ผ่านเหตุการณ์รายการ
// เมาส์ผ่าน
$ (". mailhover"). live ("mouseover", function () {
index = number ($ (นี่) .attr ("id"). แยก ("_") [1]);
liveValue = $ ("#maillist _"+index) .text ();
x.children ("." + cf) .removeclass (cf) .AddClass (CL);
$ (นี่) .AddClass (CF) .removeClass (CL);
-
-
x.bind ("mousedown", function () {
นั่น val (livevalue);
-
-
-
}) (jQuery);
2.JQ ห้องสมุดเป็นสิ่งจำเป็นแน่นอนดังนั้นฉันจะพลาดที่นี่
ลองทดสอบด้านล่าง
3. แผ่นสไตล์:
การคัดลอกรหัสมีดังนี้:
<style type = "text/css">
.OUT_BOX {Border: 1px Solid #CCC;
.list_box {border-bottom: 1px solid #EEE;
.focus_box {พื้นหลัง:#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.mailautocomplete-3.1.js" type = "text/javascript"> </script>
<script type = "text/javascript">
$ (function () {
$ ("#customtest"). mailautocomplete ({
BoxClass: "out_box", // สไตล์กล่องภายนอก
ListClass: "list_box", // สไตล์รายการเริ่มต้น
FocusClass: "focus_box", // เลือกสไตล์ในรายการ
Markcalss: "mark_box", // ไฮไลต์สไตล์
autoclass: เท็จ
Texthint: จริง // ข้อความแจ้งจะถูกซ่อนไว้โดยอัตโนมัติ
Hinttext: "โปรดป้อนที่อยู่อีเมลของคุณ"
-
-
</script>