combobox.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.ComboBox</title>
  <script src="../base.js"></script>
  <script>
    goog.require('goog.events');
    goog.require('goog.ui.ComboBox');
    goog.require('goog.debug.DivConsole');
    goog.require('goog.dispose');
    goog.require('goog.dom');
  </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/combobox.css">
  <style>

  html, body {
    overflow:hidden;
    margin: 0;
    padding: 5px;
  }

  #log {
    position: absolute;
    top: 50%;
    width: 100%;
    right: 0%;
    height: 50%;
    overflow: auto;
  }

  #c {
    margin-bottom: 10px;
    font-size: small;
  }

  /* Size the combobox so that it is sufficiently small to demonstrate the menu
     being positioned to left-align with the control. */
  .goog-combobox input {
    width: 100px;
  }

  fieldset {
    display: inline-block;
    margin: 10px;
    text-align: initial;
  }
  </style>
</head>
<body>
  <h1>goog.ui.ComboBox</h1>
  <div id="c">cb.value = '<span id="v"></span>'</div>

  <fieldset style="float:left">
    <legend>LTR</legend>
    <div class="combo"></div>
  </fieldset>

  <fieldset style="float:right">
    <legend>LTR</legend>
    <div class="combo"></div>
  </fieldset>

  <div style="text-align:center">
    <fieldset>
      <legend>LTR</legend>
      <div class="combo"></div>
    </fieldset>
  </div>

  <div style="clear:both"></div>

  <fieldset dir="rtl" style="float:left">
    <legend>RTL</legend>
    <div class="combo"></div>
  </fieldset>

  <fieldset dir="rtl" style="float:right">
    <legend>RTL</legend>
    <div class="combo"></div>
  </fieldset>

  <div style="text-align:center">
    <fieldset dir="rtl">
      <legend>RTL</legend>
      <div class="combo"></div>
    </fieldset>
  </div>


  <div style="clear:both"></div>

  <a href="javascript:void(logconsole.clear())">Clear Log</a>
  <div id="log"></div>

  <script type="text/javascript">

  // Set up a logger to track responses
  goog.log.setLevel(goog.log.getRootLogger(), goog.log.Level.ALL);
  var logconsole = new goog.debug.DivConsole(document.getElementById('log'));
  logconsole.setCapturing(true);

  function createTestComboBox() {
    var cb = new goog.ui.ComboBox();
    cb.setUseDropdownArrow(true);
    cb.setDefaultText('Select a folder...');

    var caption = new goog.ui.ComboBoxItem('Select folder...');
    caption.setSticky(true);
    caption.setEnabled(false);
    cb.addItem(caption);

    cb.addItem(new goog.ui.ComboBoxItem('Inbox'));
    cb.addItem(new goog.ui.ComboBoxItem('Bills & statements'));
    cb.addItem(new goog.ui.ComboBoxItem('Cal alumni'));
    cb.addItem(new goog.ui.ComboBoxItem('Calendar Stuff'));
    cb.addItem(new goog.ui.ComboBoxItem('Design'));
    cb.addItem(new goog.ui.ComboBoxItem('Music'));
    cb.addItem(new goog.ui.ComboBoxItem('Netflix'));
    cb.addItem(new goog.ui.ComboBoxItem('Personal'));
    cb.addItem(new goog.ui.ComboBoxItem('Photos'));
    cb.addItem(new goog.ui.ComboBoxItem('Programming languages'));
    cb.addItem(new goog.ui.MenuSeparator());

    var newfolder = new goog.ui.ComboBoxItem('New Folder...');
    newfolder.setSticky(true);
    cb.addItem(newfolder);

    return cb;
  }

  var controls = [];
  var containerEls = goog.dom.getElementsByClass(goog.getCssName('combo'));
  for (var i = 0; i < containerEls.length; i++) {
    var cb = createTestComboBox();
    cb.render(containerEls[i]);
    goog.events.listen(cb, 'change', handleChangeEvent);
    controls.push(cb);
  }

  function handleChangeEvent(e) {
    goog.dom.setTextContent(document.getElementById('v'), e.target.getValue());
  }

  window.onbeforeunload = function() {
    goog.disposeAll(controls);
  };

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