filteredmenu.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright 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');
  goog.require('goog.dom.TagName');
</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(
        goog.dom.TagName.SPAN,
        null,
        '"',
        this.dom_.createDom(goog.dom.TagName.B, null, str),
        '" (create tag)'));
  }
});

cm2.setObserver(function(item, str) {
  item.setVisible(str == '');
});

</script>

</body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/filteredmenu.html
