forked from ichord/At.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
126 lines (119 loc) · 5.17 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="dist/css/jquery.atwho.css"/>
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="dist/js/jquery.atwho.js"></script>
<script type="text/javascript">
$(function(){
var data = ["Jacob","Isabella","Ethan","Emma","Michael","Olivia","Alexander","Sophia","William","Ava","Joshua","Emily","Daniel","Madison","Jayden","lepture","Abigail","Noah","Chloe","aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","你好","你你你", "高富帅"
];
// =========================
emojis = [
"six_pointed_star", "ski", "skull", "sleepy", "slot_machine", "smile",
"smiley", "smirk", "smoking", "snake", "snowman", "sob", "soccer",
"space_invader", "spades", "spaghetti", "sparkler", "sparkles",
"speaker", "speedboat", "squirrel", "star", "star2", "stars", "station",
"statue_of_liberty", "stew", "strawberry", "sunflower", "sunny",
"sunrise", "sunrise_over_mountains", "surfer", "sushi", "suspect",
"sweat", "sweat_drops", "swimmer", "syringe", "tada", "tangerine",
"taurus", "taxi", "tea", "telephone", "tennis", "tent", "thumbsdown", "+1","-1"]
emojis = $.map(emojis,function(value,i){
return {'key': value+":",'nickname':value}
})
data = $.map(data,function(value,i) {
return {'name':value,'email':value+"@email.com"};
});
$('textarea').atwho('run').atwho({
at: "@",
alias: "at-mentions",
tpl: "<li data-value='${name}'>${name} <small>${name}</small></li>",
max_len: 3,
// 'data':data,
'callbacks': {
// filter: function (query, data, search_key) {
// console.log("custom filter",query, data);
// return this.super_call("filter", query, data, search_key)
// // return $.map(data, function(item, i) {
// // return item[search_key].toLowerCase().indexOf(query) < 0 ? null : item
// // })
// },
remote_filter: function (query, callback) {
// this.super_call("remote_filter", query, callback)
callback(null)
}
}
}).atwho({
at: ":",
// alias: "emojis",
search_key: "nickname",
tpl:"<li data-value='${key}'>${nickname} <img src='http://a248.e.akamai.net/assets.github.com/images/icons/emoji/${nickname}.png' height='20' width='20' /></li>"
,'data':emojis
,'start_with_space': false
}).one('focus', function(e) {
console.log(this, data);
// $(this).atwho('load', "@", data);
$(this).atwho('load', "at-mentions", data);
}).one('matched-at-mentions.atwho', function(e) {
console.log("matched.at-mentions", e.namespace)
}).one('matched-emojis.atwho', function(e) {
console.log("matched emojis", e.namespace)
inputor.atwho('load', ":", data).atwho('run')
}).one('matched.atwho', function(e) {
console.log(e.type, e.namespace)
});
// $("textarea#inputor2").atwho({
// at: "@",
// tpl: "<li data-value='${email}'>${name} <small>${email}</small></li>",
// 'data':data,
// search_key: "email"
// })
// .atwho({
// at: "/:",
// tpl:"<li data-value='${key}'>${name} <img src='http://a248.e.akamai.net/assets.github.com/images/icons/emoji/${name}.png' height='20' width='20' /></li>"
// ,'data':emojis
// ,display_flag: false
// })
// $('input').atwho({at: "@", 'data':data})
});
</script>
<style type="text/css" media="screen">
body {
font: 14px/1.6 "Lucida Grande", "Helvetica", sans-serif;
}
.box {
background:gray;
height:100px;
width:100px;
margin:10px;
}
textarea {
width: 300px;
}
#inputor{
width:480px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<button id="reflash">reflash</button>
<textarea id="inputor" name="at" rows="8" cols="40">
this textarea register "@" with static data
and ":" with ajax.
type "@" to try
</textarea>
<textarea id="inputor2" name="Name" rows="8" cols="40">
this register "/:" with static data
</textarea>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<br/>
<input></input>
</body>
</html>