jQueryベースのemail suggestプラグイン
30597 ワード
最近、プロジェクトにフォームが提出されたところはユーザーがメールボックスに記入する必要があり、PM(プロダクトマネージャ)と運営はユーザーがメールボックスに記入する際にsuggestリストが現れ、ユーザーが入力する記入プロセスを簡素化することを強く要求している.考えてみると、これもよく使われる機能だと思いますが、細心の注意を払っている友达は、検索狐白社会ログイン、私の捜狐ログインなど、ログインや他のフォームの提出があるところをたくさん発見するかもしれません.
ここでは具体的なコードを詳しく説明しないで、実現の構想と流れだけを話します.まずデフォルト設定defaultsがあります
sugClassは、ユーザーがsuggestにスタイルを追加し、プラグインコンテンツjsフックとして使用し、domainsはsuggestリストコンテンツであり、ユーザーがプラグインを使用するときにパラメータを渡さない場合はデフォルト構成を使用します.
プラグインの内部にはEmailSugコンストラクタがあり、プラグインを呼び出すたびにEmailSugのインスタンスが新しく作成されます.各インスタンスには独自のプロパティと構成があります.
インスタンスを作成すると初期化関数が実行され、初期化関数はイベントバインドメソッドを呼び出します.
イベントバインドメソッドはinput要素をkeyup blurイベントにバインドし,ユーザがコンテンツを入力するときにsuggest更新とblurを行うときにsuggestプロンプトを閉じる.
blurイベント処理はsettimeout処理を使用する必要があります.ユーザーがsuggestの要素をマウスでクリックするとinputのblurイベントがトリガーされるため、settimeout処理をしないと選択する要素がクリックされません.
createメソッドはfilterメソッドを呼び出し、ユーザーが入力した内容に基づいて構成パラメータdomainsをフィルタリングし、ユーザー入力と一致する配列に戻り、suggestリストを作成して要素を選択し、input要素の位置に基づいてsuggestを位置決めし、最後にページにレンダリングして表示します.各インスタンスはsuggest要素を1つだけ作成し、ユーザーが入力した内容に基づいてリストを更新します.
filterメソッド、ロジックを実現するのはよく理解します
doSelectメソッドユーザはユーザのキーボード操作を処理し,Up Down Enter Escこれらのキー処理を行う.
showとhideの方法は簡単な最もsuggestで表示と非表示の操作を行います
実現は簡単でしょう.ソースコードは300行を超えません.不合理や不備がある場合は指摘を歓迎します.
最後にdemoアドレスとソースコードを添付します
jQueryプラグインemail suggest-demo
$('.email').emailSug({
sugClass: 'ema-sug',
domains: [
'sohu.com',
'sogou.com',
'163.com',
'126.com',
'139.com',
'sina.com',
'qq.com',
'gmail.com'
]
});
ここでは具体的なコードを詳しく説明しないで、実現の構想と流れだけを話します.まずデフォルト設定defaultsがあります
1 //
2 defaults = {
3 sugClass: 'ema-sug',
4 domains: [
5 'sohu.com',
6 '163.com',
7 '126.com',
8 '139.com',
9 'sina.com',
10 'qq.com',
11 'gmail.com'
12 ]
13 }sugClassは、ユーザーがsuggestにスタイルを追加し、プラグインコンテンツjsフックとして使用し、domainsはsuggestリストコンテンツであり、ユーザーがプラグインを使用するときにパラメータを渡さない場合はデフォルト構成を使用します.
プラグインの内部にはEmailSugコンストラクタがあり、プラグインを呼び出すたびにEmailSugのインスタンスが新しく作成されます.各インスタンスには独自のプロパティと構成があります.
1 function EmailSug(elem, options) {
2 this.$field = $(elem);
3 this.options = $.extend(true, {}, defaults, options);
4 this._defaults = defaults;
5 this._domains = this.options.domains;
6 //
7 this.selectedIndex = 0;
8
9 this.init();
10 }インスタンスを作成すると初期化関数が実行され、初期化関数はイベントバインドメソッドを呼び出します.
init: function() {
this.addEvent();
}イベントバインドメソッドはinput要素をkeyup blurイベントにバインドし,ユーザがコンテンツを入力するときにsuggest更新とblurを行うときにsuggestプロンプトを閉じる.
1 addEvent: function() {
2 var
3 //
4 that = this,
5
6 //
7 value;
8
9 this.$field.on('keyup.ema', function(e) {
10 value = $.trim(this.value);
11
12 if (value) {
13 that.create(this, value);
14
15 that.doSelect(e.keyCode);
16 } else {
17 that.hide();
18 }
19 }).on('blur.ema', function() {
20 setTimeout(function() {
21 that.hide();
22 }, 200);
23 });
24 }blurイベント処理はsettimeout処理を使用する必要があります.ユーザーがsuggestの要素をマウスでクリックするとinputのblurイベントがトリガーされるため、settimeout処理をしないと選択する要素がクリックされません.
1 create: function(elem, value) {
2 var
3 //
4 that = this,
5
6 arr,
7
8 len,
9
10 //
11 fragment,
12
13 //
14 ul = [],
15
16 //
17 offset,
18
19 left,
20
21 top,
22
23 width,
24
25 height,
26
27 style,
28
29 //
30 borderWidth = 2;
31
32 elem = $(elem);
33 offset = elem.offset();
34
35 width = elem.outerWidth(true) - borderWidth;
36 height = elem.outerHeight(true);
37 left = offset.left;
38 top = offset.top + height;
39 style = 'left: ' + left + 'px; top: ' + top + 'px; width: ' + width + 'px; border: 1px solid #e2e2e2; border-top: 0; display: none';
40
41 //
42 fragment = $('<div class="' + this.options.sugClass + '-wrapper" style="' + style + '" />');
43 ul.push('<ul class="' + this.options.sugClass + '-list">');
44
45 arr = this.filter(value, this._domains);
46 len = arr.length;
47 $.each(arr, function(i, domain) {
48 var
49 //
50 _class = that.options.sugClass + '-item';
51
52 if (that.selectedIndex > len - 1) {
53 if (i === 0) {
54 _class += ' active';
55
56 that.selectedIndex = 0;
57 }
58 } else {
59 if (i === that.selectedIndex) {
60 _class += ' active';
61 }
62 }
63
64 ul.push('<li class="' + _class + '" data-index="' + i + '">' + value.replace(/@.*/, '') + '@' + domain + '</li>');
65 });
66
67 ul.push('</ul>');
68 ul = ul.join('');
69
70 if (this.$suggest) {
71 this.$suggest.empty();
72 this.$suggest.append(ul);
73 } else {
74 fragment.append(ul);
75
76 //
77 $('body').append(fragment);
78 this.$suggest = fragment;
79
80 ///
81 this.$suggest.on('mouseenter click', '.' + this.options.sugClass + '-item', function(e) {
82 var lis,
83
84 li;
85
86 li = $(this);
87 lis = li.parent().children();
88
89 if (e.type === 'mouseenter') {
90 li.addClass('active').siblings().removeClass('active');
91
92 that.selectedIndex = $.inArray(this, lis);
93 } else {
94 //
95 that.$field.val(lis.eq(that.selectedIndex).text());
96
97 // email sug
98 that.hide();
99 }
100 });
101 }
102
103 //
104 this.show();
105 }createメソッドはfilterメソッドを呼び出し、ユーザーが入力した内容に基づいて構成パラメータdomainsをフィルタリングし、ユーザー入力と一致する配列に戻り、suggestリストを作成して要素を選択し、input要素の位置に基づいてsuggestを位置決めし、最後にページにレンダリングして表示します.各インスタンスはsuggest要素を1つだけ作成し、ユーザーが入力した内容に基づいてリストを更新します.
1 //
2 filter: function(value, arr) {
3 var
4 //
5 start,
6
7 suffix,
8
9 r = [];
10
11 start = value.indexOf('@');
12 if (start > -1) {
13 suffix = value.substring(start + 1);
14
15 $.each(arr, function(i, str) {
16 if (str.indexOf(suffix) > -1) {
17 r.push(str);
18 }
19 });
20 } else {
21 r = arr;
22 }
23
24 return r;
25 }filterメソッド、ロジックを実現するのはよく理解します
1 doSelect: function(keyCode) {
2 var
3 //
4 elems = $('.' + this.options.sugClass + '-item', this.$suggest),
5
6 //
7 min = 0,
8
9 //
10 max = elems.length - 1;
11
12 switch (keyCode) {
13 case 13:
14 //
15 $('li.active', this.$suggest).trigger('click');
16
17 //
18 this.selectedIndex = 0;
19
20 break;
21 //
22 case 38:
23 this.selectedIndex --;
24
25 if (this.selectedIndex < min) {
26 this.selectedIndex = max;
27 }
28
29 elems.removeClass('active').eq(this.selectedIndex).addClass('active');
30 break;
31 //
32 case 40:
33 this.selectedIndex ++;
34
35 if (this.selectedIndex > max) {
36 this.selectedIndex = min;
37 }
38
39 elems.removeClass('active').eq(this.selectedIndex).addClass('active');
40 break;
41 default:
42 break;
43 }
44 }doSelectメソッドユーザはユーザのキーボード操作を処理し,Up Down Enter Escこれらのキー処理を行う.
1 show: function() {
2 if (this.$suggest) {
3 this.$suggest.show();
4 }
5 }
6
7 hide: function() {
8 if (this.$suggest) {
9 this.$suggest.hide();
10 }
11 }showとhideの方法は簡単な最もsuggestで表示と非表示の操作を行います
実現は簡単でしょう.ソースコードは300行を超えません.不合理や不備がある場合は指摘を歓迎します.
最後にdemoアドレスとソースコードを添付します
$('.email').emailSug({
sugClass: 'ema-sug',
domains: [
'sohu.com',
'sogou.com',
'163.com',
'126.com',
'139.com',
'sina.com',
'qq.com',
'gmail.com'
]
});