forked from wedgies/jquery-emoji-picker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
94 lines (73 loc) · 2.61 KB
/
demo.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
<!doctype html>
<html>
<head>
<title>jQuery Emoji Picker Demo</title>
<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.emojipicker.js"></script>
<!-- Emoji Data -->
<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.tw.css">
<script type="text/javascript" src="js/jquery.emojis.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#input-default').emojiPicker();
$('#input-custom-size').emojiPicker({
width: '300px',
height: '200px'
});
$('#input-left-position').emojiPicker({
position: 'left'
});
$('#create').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker({
width: '300px',
height: '200px',
button: false
});
});
$('#toggle').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('toggle');
});
$('#destroy').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('destroy');
})
// keyup event is fired
$(".emojiable-question, .emojiable-option").on("keyup", function () {
//console.log("emoji added, input val() is: " + $(this).val());
});
});
</script>
<style type="text/css">
body {background:#888;}
form {margin:200px 0 0 0; text-align:center;}
input {width:400px; height:30px;}
input,textarea,button {padding:5px 10px; font-family:"Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size:24px; font-weight:300; outline:none; border:none;}
#emojiPickerWrap {margin:10px 0 0 0;}
.field { padding: 20px 0; }
textarea { width: 400px; height: 200px; }
</style>
</head>
<body>
<!-- 🌵 -->
<form>
<button id="create">create</button>
<button id="toggle">toggle</button>
<button id="destroy">destroy</button>
<div class="field">
<textarea id="text-custom-trigger" class="emojiable-question" placeholder="Your Question"></textarea>
</div>
<div class="field">
<input type="text" id="input-default" class="emojiable-option" placeholder="Default">
</div>
<div class="field">
<input type="text" id="input-custom-size" class="emojiable-option" placeholder="Custom Size">
</div>
<div class="field">
<input type="text" id="input-left-position" class="emojiable-option" placeholder="Position Left">
</div>
</form>
</body>
</html>