| <!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.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.debug.LogManager.getRoot().setLevel(goog.debug.Logger.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> |
