forked from bitdrift/tagmate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
106 lines (99 loc) · 3.42 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
<html>
<head>
<!-- Required dependencies -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.fieldselection.js"></script>
<script type="text/javascript" src="./jquery.scrollTo.js"></script>
<!-- jQuery Tagmate import -->
<script type="text/javascript" src="./jquery.tagmate.js"></script>
<script type="text/javascript">
$(function() {
var options = [
{label: "George Washington", value: "george"},
{label: "Abraham Lincoln", value: "abe"},
{label: "Andrew Jackson", value: "andy"},
{label: "Thomas Jefferson", value: "tj"},
{label: "Alexander Hamilton", value: "alex"},
{label: "John F. Kennedy", value: "jfk"},
{label: "Teddy Roosevelt", value: "teddy"},
{label: "Franklin Delano Roosevelt", value: "fdr"}
];
$("textarea").tagmate({
exprs: {
"@": Tagmate.NAME_TAG_EXPR,
"#": Tagmate.HASH_TAG_EXPR,
"$": Tagmate.PRICE_TAG_EXPR,
"£": Tagmate.PRICE_TAG_EXPR
},
sources: {
"@": function(request, response) {
// use convenience filter function
var filtered = Tagmate.filterOptions(options, request.term);
response(filtered);
}
},
capture_tag: function(tag) {
console.log("Got tag: " + tag);
},
replace_tag: function(tag, value) {
console.log("Replaced tag: " + tag + " with: " + value);
},
highlight_tags: true,
highlight_class: "hilite",
menu_class: "menu",
menu_option_class: "option",
menu_option_active_class: "active"
});
$("#get_all_tags").click(function() {
alert($("textarea").getTags());
});
$("#get_name_tags").click(function() {
alert($("textarea").getTags({
"@": Tagmate.NAME_TAG_EXPR
}));
});
$("#get_hash_tags").click(function() {
alert($("textarea").getTags({
"#": Tagmate.HASH_TAG_EXPR
}));
});
$("#get_price_tags").click(function() {
alert($("textarea").getTags({
"$": Tagmate.MONEY_TAG_EXPR
}));
});
});
</script>
<style type="text/css">
textarea {
height: 150px;
width: 400px;
}
.menu {
overflow: auto;
max-height: 54px;
width: 400px;
background: #EEE;
}
.option {
background: #EEE;
padding: 3px;
}
.option:hover, .active {
background: lightblue;
}
.hilite {
background: lightblue;
}
</style>
</head>
<body>
<div><textarea id="ta"></textarea></div>
<div>
<button id="get_all_tags">Get All Tags</button>
<button id="get_name_tags">Get Name Tags</button>
<button id="get_hash_tags">Get Hash Tags</button>
<button id="get_price_tags">Get Price Tags</button>
</div>
</body>
</html>