1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Faceclick Test Page</title>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <link rel="stylesheet" href="faceclick.css">
8 <style>
9 body { background: #073642; color: #fdf6e3; font-size: 1.2em; }
10 h1 { color: #cb4b16; }
11 textarea {
12 display: block;
13 border: 2px solid #268bd2;
14 border-radius: 10px;
15 background: #002b36;
16 color: #fdf6e3;
17 width: 700px;
18 height: 200px;
19 padding: 20px;
20 font-size: 1.1em;
21 }
22 button {
23 border: 2px solid #d33682;
24 border-radius: 10px;
25 color: #d33682;
26 background: #000;
27 padding: 5px;
28 margin: 5px;
29 font-size: 1.2em;
30 }
31 </style>
32
33 <!-- Include Faceclick. You can do this anywhere so long
34 as you don't try to use it before it's been included! -->
35 <script src="faceclick.js"></script>
36
37 </head>
38 <body>
39
40 <h1>Faceclick Test Page</h1>
41 <p>Let's click some faces!</p>
42
43 <textarea id="text1"></textarea>
44 <button id="btn1">Insert emoji into textarea at cursor</button>
45
46 <script>
47 // This is the simplest way to use Faceclick. The first parameter
48 // is the id of the element that will be clicked to open the Emoji
49 // picker. The second parameter is the id of the text input element
50 // into which the picked Emoji will be inserted.
51 FC.attach("btn1", "text1");
52 </script>
53
54 <hr>
55
56 <p>Get an Emoji and show it in an alert:<br>
57 <button id="btn2">Get Emoji</button></p>
58
59 <script>
60 // This is still pretty simple, but now you're handling the callback
61 // function and supplying a DOM element rather than an ID string.
62 // The second parameter is your function, which will be called with
63 // the picked Emoji. See README.md for even more control.
64 var my_btn = document.getElementById("btn2");
65 FC.attach_cb(my_btn, function(emoji){
66 FC.close();
67 alert(emoji);
68 });
69 </script>
70
71 </body>
72 </html>
Ratfactor.com
>
Dave's Repos