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
|
<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>goog.ui.FilteredMenu</title>
<script src="../base.js"></script>
<script>
goog.require('goog.events');
goog.require('goog.ui.Menu');
goog.require('goog.ui.MenuItem');
goog.require('goog.ui.CheckBoxMenuItem');
goog.require('goog.ui.FilteredMenu');
goog.require('goog.ui.TriStateMenuItem');
goog.require('goog.ui.FilterObservingMenuItem');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/menu.css">
<link rel="stylesheet" href="../css/menuitem.css">
<link rel="stylesheet" href="../css/menuseparator.css">
<link rel="stylesheet" href="../css/filteredmenu.css">
<link rel="stylesheet" href="../css/filterobservingmenuitem.css">
<link rel="stylesheet" href="../css/tristatemenuitem.css">
<style>
.goog-menu {
width: 30ex;
}
.goog-menu-filter input {
width: 100%;
/* width: 100% interferes with the input event handler in IE6 */
width: expression('30ex');
}
</style>
</head>
<body>
<div id="menu1"></div>
<script type="text/javascript">
var folders = [
'Inbox',
'Starred',
'Spam',
'Sent Mail',
'Trash'
];
var labels = [
'Gmail',
'Finance',
'Bugs',
'Apps',
'Apps UI',
'Apps UX',
'Gmail Bugs',
'Reference',
'DO',
'READ',
'misc'
];
var el = goog.dom.getElement('menu1');
var menu1 = new goog.ui.FilteredMenu();
menu1.setFilterLabel('Create / search');
menu1.setAllowMultiple(true);
var lm, cm, cm2;
for (var str, i = 0; str = labels[i]; i++) {
menu1.addItem(lm = new goog.ui.TriStateMenuItem(str));
if (i == 0 || i == 3) {
lm.setCheckedState(goog.ui.TriStateMenuItem.State.PARTIALLY_CHECKED);
} else if (i == 1 || i == 4 || i == 5) {
lm.setCheckedState(goog.ui.TriStateMenuItem.State.FULLY_CHECKED);
}
}
menu1.addItem(new goog.ui.MenuSeparator());
for (var str, i = 0; str = folders[i]; i++) {
menu1.addItem(new goog.ui.MenuItem(str));
}
menu1.addItem(new goog.ui.MenuSeparator());
menu1.addItem(cm = new goog.ui.FilterObservingMenuItem(''));
menu1.addItem(cm2 = new goog.ui.FilterObservingMenuItem('Manage tags'));
menu1.render(el);
menu1.setPosition(10, 10);
cm.setObserver(function(item, str) {
str = goog.string.trim(str);
var b = str == '' || goog.array.contains(folders, str) ||
goog.array.contains(labels, str);
item.setVisible(!b);
if (!b) {
item.setContent(this.dom_.createDom(
'span',
null,
'"',
this.dom_.createDom('b', null, str),
'" (create tag)'));
}
});
cm2.setObserver(function(item, str) {
item.setVisible(str == '');
});
</script>
</body>
</html>
|
