forked from ichord/At.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
114 lines (108 loc) · 5.06 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
<!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="css/jquery.atwho.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.caret.js" ></script>
<script type="text/javascript" src="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","你好","你你你",
"Jacob","Isabella","Ethan","reorx","Emma","Michael","Olivia","Alexander","Sophia","William","Ava","Joshua","Emily","Daniel","Madison","Jayden","Abigail","Noah","Chloe","aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa","你好","你你你"
];
data = $.map(data,function(value,i) {
return {'id':i,'name':value,'email':value+"@email.com"};
});
$("textarea#inputor").atWho("@",{
tpl: "<li id='${id}' data-value='${name}'>${name} <small>${email}</small></li>",
'data':data
})
.atWho(":",{
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>"
,callback:function(query,callback) {
$.ajax({
url:'data.json'
,type:'GET'
,success:function(data) {
datas = $.map(data,function(value,i){
return {'id':i,'key':value+":",'name':value}
})
callback(datas)
}
})
}
});
$("button#reflash").click(function(){
$("textarea#inputor").atWho("@",{"data":data.splice(0,3)})
})
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 {'id':i,'key':value+":",'name':value}
})
$("textarea#inputor2").atWho("@",{
tpl: "<li id='${id}' data-value='${name}' data-choose='${email}'>${name} <small>${email}</small></li>",
'data':data,
choose:'data-choose'
})
.atWho(":",{
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
})
$('input').atWho("@",{'data':data})
$('textarea#i3').atWho('@', {
tpl: '',
callback: function(query, callback) {
return $.ajax({
url: '',
type: 'GET',
success: function(datas) {
return callback([{"id":12,"nickname":"stephen"},{"id":13,"nickname":"ben"}]);
}
});
}
});
});
</script>
<style type="text/css" media="screen">
.box {
background:gray;
height:100px;
width:100px;
margin:10px;
}
textarea {
width: 300px;
}
#inputor{
width:480px;
}
</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 id="i3" name="Name" rows="8" cols="40">
</textarea>
<br/>
<input></input>
</body>
</html>