1
코드 사본은 다음과 같습니다.
(기능 ($) {
$ .fn.mailautocomplete = 함수 (옵션) {
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, // 텍스트 프롬프트의 자동 표시 및 숨기기
힌트 텍스트 : "",
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; 배경 : #fff; font : 12px/20px arial;}. Mail ListDefault {Padding : 0 5px; 커서 : 포인터; 흰색 공간 : nowrap;}. maillistfocus {패딩 : 0 5px; 커서; 흰색 공간 : nowrap; backgring :#369; 컬러 : 흰색;}. maillisthlignt {color : #ffff;} </style> '). 부록 ($ ( "head"));
}
var cb = 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]+'</div>';
}또 다른{
mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';
}
});
}
Mailhtml을 반환합니다.
};
// 일부 글로벌 변수
var index = -1, s;
$ (this) .Each (function () {
var that = $ (this), i = $ ( ". JustForjs"). size ();
if (i> 0) {// 하나의 텍스트 상자 만 바인딩합니다
반품;
}
var w = that.outerwidth (), h = that.outerheight ();
// 스타일 초기화
that.wrap ( '<span style = "display : inline-block; 위치 : 상대;"> </span>')
.fore ( '<div id = "maillistbox _'+i+'"style = "min-width :'+w+'px; _width :'+w+'px; 위치 : 절대; 왼쪽 : -6000px; 상단 :'+h+ 'px; z-index :'+z+'; "> </div>');
var x = $ ( "#maillistbox_" + i), LiveValue;
that.focus (function () {
// 부모 태그 수준
$ (this) .css ( "color", fc) .parent (). css ( "z-index", z);
// 프롬프트 텍스트를 표시하고 숨 깁니다
if (힌트 && 텍스트) {
var focus_v = $ .trim ($ (this) .val ());
if (focus_v === 텍스트) {
$ (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) {
색인 = newarr.length;
}
색인--;
} else if (e.keyCode === 40) {
//아래에
if (index> = newarr.length -1) {
색인 = -1;
}
색인 ++;
} else if (e.keyCode === 13) {
//입력하다
if (index> -1 && index <newarr.length) {
// 현재 활성화 목록이있는 경우
$ (this) .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");
}
}). blur (function () {
if (힌트 && 텍스트) {
var blur_v = $ .trim ($ (this) .val ());
if (blur_v === "") {
$ (this) .Val (텍스트);
}
}
$ (this) .css ( "color", bc) .unbind ( "keyup"). parent (). css ( "z-index", 0);
x.css ( "왼쪽", "-6000px");
});
// 마우스가 목록 항목 이벤트를 통과합니다
// 마우스가 통과합니다
$ ( ". mailhover"). live ( "마우스 오버", 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 라이브러리는 물론 필수적이므로 여기에 생략됩니다.
아래에서 테스트합시다
3 스타일 시트 :
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
.out_box {Border : 1px solid #ccc; #ffff;
.list_box {Border-Bottom : 1px solid #eee;
.focus_box {배경 :#f0f3f9;}
.mark_box {color :#c00;}
</스타일>
4. 테스트 코드
코드 사본은 다음과 같습니다.
<p> 사용자 정의 클래스 디스플레이 : <입력 유형 = "텍스트"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", // 하이라이트 스타일
오토 클래스 : 거짓,
Texthint : true, // 프롬프트 텍스트는 자동으로 숨겨져 있습니다
힌트 텍스트 : "이메일 주소를 입력하십시오"
});
})
</스크립트>