| <!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.Select & goog.ui.Option</title> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.array'); |
| goog.require('goog.debug.DivConsole'); |
| goog.require('goog.debug.LogManager'); |
| goog.require('goog.events'); |
| goog.require('goog.events.EventType'); |
| goog.require('goog.log'); |
| goog.require('goog.object'); |
| goog.require('goog.ui.Component.EventType'); |
| goog.require('goog.ui.FlatMenuButtonRenderer'); |
| goog.require('goog.ui.Option'); |
| goog.require('goog.ui.Select'); |
| goog.require('goog.ui.Separator'); |
| goog.require('goog.ui.decorate'); |
| </script> |
| <link rel="stylesheet" href="css/demo.css"> |
| <link rel="stylesheet" href="../css/menubutton.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/flatmenubutton.css"> |
| <style> |
| .good { |
| color: #080; |
| vertical-align: middle; |
| } |
| |
| .bad { |
| color: #800; |
| vertical-align: middle; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>goog.ui.Select & goog.ui.Option</h1> |
| <fieldset> |
| <legend>Demo of the <strong>goog.ui.Select</strong> component:</legend> |
| <br> |
| <label id="select1">The best movie of all time is </label> |
| <span class="good" id="value1"></span> |
| <br> |
| <br> |
| <label id="select2">The worst movie of all time is </label> |
| <span class="bad" id="value2"></span> |
| <br> |
| <br> |
| <label id="select3">The <strong>Select</strong> component for worst movie is |
| </label> <i>(This control doesn't auto-highlight; it only dispatches |
| ENTER and LEAVE events.)</i> |
| <br> |
| <br> |
| <a id="add" href="#">Click here</a> to add a new option for the best movie, |
| <a id="hide" href="#">here</a> |
| to hide/show the select component for the best movie, or |
| <a id="worst" href="#">here</a> |
| to set the worst movie of all time to "Catwoman." |
| <br> |
| </fieldset> |
| <br> |
| <fieldset> |
| <legend>This <strong>goog.ui.Select</strong> was decorated:</legend> |
| <br> |
| <label> |
| My favorite Sergio Leone character is |
| <div id="spaghetti" class="goog-select"> |
| Make your choice... |
| <ul class="goog-menu"> |
| <li class="goog-menuitem">the Good</li> |
| <li class="goog-menuitem">the Bad</li> |
| <li class="goog-menuitem">the Ugly</li> |
| <li class="goog-menuitem">the Man with the Harmonica</li> |
| </ul> |
| </div> |
| </label> |
| <span class="good" id="value4"></span> |
| <br> |
| <br> |
| </fieldset> |
| <br> |
| <br> |
| |
| <fieldset> |
| <legend> |
| Demo of <strong>goog.ui.Select</strong> using |
| <strong>goog.ui.FlatMenuButtonRenderer</strong>: |
| </legend> |
| <br> |
| <label id="flat-select1">The best Arnold movie is </label> |
| <span class="good" id="flat-value1"></span> |
| <br> |
| <br> |
| <label id="flat-select2">The worst Arnold movie is </label> |
| <span class="bad" id="flat-value2"></span> |
| <br> |
| <br> |
| <label id="flat-select3"> |
| The <strong>Select</strong> component for worst movie is |
| </label> <i>(This control doesn't auto-highlight; it only dispatches |
| ENTER and LEAVE events.)</i> |
| <br> |
| <br> |
| <a id="flat-add" href="#">Click here</a> |
| to add a new option for the best Arnold movie, |
| <a id="flat-hide" href="#">here</a> |
| to hide/show the select component for the best Arnold movie, or |
| <a id="flat-worst" href="#">here</a> |
| to set the worst Arnold movie to "Jingle All the Way." |
| <br> |
| </fieldset> |
| <br> |
| <fieldset> |
| <legend>This Flat <strong>goog.ui.Select</strong> was decorated:</legend> |
| <br> |
| <label> |
| My favorite Will Ferrell character is |
| <div id="flat-ferrell" class="goog-flat-menu-button"> |
| Make your choice... |
| <ul class="goog-menu"> |
| <li class="goog-menuitem">Ron Burgundy</li> |
| <li class="goog-menuitem">Chazz Reinhold</li> |
| <li class="goog-menuitem">Chazz Michael Michaels</li> |
| <li class="goog-menuitem">Ricky Bobby</li> |
| </ul> |
| </div> |
| </label> |
| <span class="good" id="flat-value4"></span> |
| <br> |
| <br> |
| </fieldset> |
| <br> |
| <br> |
| |
| <!-- Event log. --> |
| <fieldset class="goog-debug-panel"> |
| <legend>Event Log</legend> |
| <div id="log"></div> |
| </fieldset> |
| <br> |
| <div id="perf"></div> |
| <script> |
| var timer = goog.now(); |
| |
| // Set up a logger. |
| goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL); |
| var logger = goog.log.getLogger('demo'); |
| var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log')); |
| logconsole.setCapturing(true); |
| |
| var EVENTS = goog.object.getValues(goog.ui.Component.EventType); |
| goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.'); |
| |
| function logEvent(e) { |
| var component = e.target; |
| var caption = (typeof component.getCaption == 'function') ? |
| component.getCaption() : component.getId(); |
| goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type); |
| } |
| |
| |
| var select1 = new goog.ui.Select(); |
| select1.addItem(new goog.ui.MenuItem('Blade Runner')); |
| select1.addItem(new goog.ui.MenuItem('Godfather Part II')); |
| select1.addItem(new goog.ui.MenuItem('Citizen Kane')); |
| select1.setSelectedIndex(0); |
| select1.render(goog.dom.getElement('select1')); |
| |
| var select2 = new goog.ui.Select(); |
| var disabledItem; |
| select2.addItem(new goog.ui.Option('Transformers')); |
| select2.addItem(new goog.ui.Option('Spider-Man 3')); |
| select2.addItem(disabledItem = new goog.ui.Option('Howard the Duck')); |
| select2.addItem(new goog.ui.Option('Catwoman')); |
| disabledItem.setEnabled(false); |
| select2.setValue('Spider-Man 3'); |
| select2.render(goog.dom.getElement('select2')); |
| |
| var select3 = new goog.ui.Select('Click to select'); |
| // Turn off auto-highlighting, just for fun. |
| select3.setAutoStates(goog.ui.Component.State.HOVER, false); |
| select3.addItem(new goog.ui.Option('enabled', true)); |
| select3.addItem(new goog.ui.Option('disabled', false)); |
| select3.render(goog.dom.getElement('select3')); |
| select3.setSelectedIndex(0); |
| |
| goog.events.listen(select1, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var select = e.target; |
| var value = 'Yay ' + select.getValue() + '!'; |
| goog.dom.setTextContent(goog.dom.getElement('value1'), value); |
| goog.dom.setTextContent(goog.dom.getElement('value2'), ''); |
| }); |
| goog.events.listen(select2, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var select = e.target; |
| var value = 'Boo ' + select.getValue() + '...'; |
| goog.dom.setTextContent(goog.dom.getElement('value2'), value); |
| goog.dom.setTextContent(goog.dom.getElement('value1'), ''); |
| }); |
| goog.events.listen(select3, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var select = e.target; |
| select2.setEnabled(select.getValue()); |
| }); |
| goog.events.listen(goog.dom.getElement('add'), goog.events.EventType.CLICK, |
| function(e) { |
| var good = prompt('What\'s another good movie...?'); |
| if (select1.getItemCount() == 3) { |
| select1.addItem(new goog.ui.Separator()); |
| } |
| select1.addItem(new goog.ui.MenuItem(good)); |
| }); |
| goog.events.listen(goog.dom.getElement('hide'), goog.events.EventType.CLICK, |
| function(e) { |
| select1.setVisible(!select1.isVisible()); |
| }); |
| goog.events.listen(goog.dom.getElement('worst'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| select2.setValue('Catwoman'); |
| }); |
| |
| // Decorate an element with a Select control. |
| var select4 = goog.ui.decorate(goog.dom.getElement('spaghetti')); |
| |
| goog.events.listen(select1, EVENTS, logEvent); |
| goog.events.listen(select2, EVENTS, logEvent); |
| goog.events.listen(select3, EVENTS, logEvent); |
| goog.events.listen(select4, EVENTS, logEvent); |
| |
| // goog.ui.Select using goog.ui.FlatMenuButtonRenderer |
| var flatSelect1 = new goog.ui.Select(null, null, |
| goog.ui.FlatMenuButtonRenderer.getInstance()); |
| flatSelect1.addItem(new goog.ui.MenuItem('Total Recall')); |
| flatSelect1.addItem(new goog.ui.MenuItem('Kindergarten Cop')); |
| flatSelect1.addItem(new goog.ui.MenuItem('Predator')); |
| flatSelect1.setSelectedIndex(0); |
| flatSelect1.render(goog.dom.getElement('flat-select1')); |
| |
| var flatSelect2 = new goog.ui.Select(null, null, |
| goog.ui.FlatMenuButtonRenderer.getInstance()); |
| var flatDisabledItem; |
| flatSelect2.addItem(new goog.ui.Option('Conan the Barbarian')); |
| flatSelect2.addItem(new goog.ui.Option('Last Action Hero')); |
| flatSelect2.addItem( |
| flatDisabledItem = new goog.ui.Option('Eraser')); |
| flatSelect2.addItem(new goog.ui.Option('Jingle All the Way')); |
| flatDisabledItem.setEnabled(false); |
| flatSelect2.setValue('Last Action Hero'); |
| flatSelect2.render(goog.dom.getElement('flat-select2')); |
| |
| var flatSelect3 = new goog.ui.Select('Click to select', null, |
| goog.ui.FlatMenuButtonRenderer.getInstance()); |
| // Turn off auto-highlighting, just for fun. |
| flatSelect3.setAutoStates(goog.ui.Component.State.HOVER, false); |
| flatSelect3.addItem(new goog.ui.Option('enabled', true)); |
| flatSelect3.addItem(new goog.ui.Option('disabled', false)); |
| flatSelect3.render(goog.dom.getElement('flat-select3')); |
| flatSelect3.setSelectedIndex(0); |
| |
| goog.events.listen(flatSelect1, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var select = e.target; |
| var value = 'Yay ' + select.getValue() + '!'; |
| goog.dom.setTextContent(goog.dom.getElement('flat-value1'), value); |
| goog.dom.setTextContent(goog.dom.getElement('flat-value2'), ''); |
| }); |
| goog.events.listen(flatSelect2, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var select = e.target; |
| var value = 'Boo ' + select.getValue() + '...'; |
| goog.dom.setTextContent(goog.dom.getElement('flat-value2'), value); |
| goog.dom.setTextContent(goog.dom.getElement('flat-value1'), ''); |
| }); |
| goog.events.listen(flatSelect3, goog.ui.Component.EventType.ACTION, |
| function(e) { |
| var select = e.target; |
| flatSelect2.setEnabled(select.getValue()); |
| }); |
| goog.events.listen(goog.dom.getElement('flat-add'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| var good = prompt('What\'s another good Arnold movie...?'); |
| if (flatSelect1.getItemCount() == 3) { |
| flatSelect1.addItem(new goog.ui.Separator()); |
| } |
| flatSelect1.addItem(new goog.ui.MenuItem(good)); |
| }); |
| goog.events.listen(goog.dom.getElement('flat-hide'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| flatSelect1.setVisible(!flatSelect1.isVisible()); |
| }); |
| goog.events.listen(goog.dom.getElement('flat-worst'), |
| goog.events.EventType.CLICK, |
| function(e) { |
| flatSelect2.setValue('Jingle All the Way'); |
| }); |
| |
| // Decorate an element with a Select control using FlatMenuButtonRenderer. |
| var flatSelect4 = new goog.ui.Select(null, null, |
| goog.ui.FlatMenuButtonRenderer.getInstance()); |
| flatSelect4.decorate(goog.dom.getElement('flat-ferrell')); |
| |
| goog.events.listen(flatSelect1, EVENTS, logEvent); |
| goog.events.listen(flatSelect2, EVENTS, logEvent); |
| goog.events.listen(flatSelect3, EVENTS, logEvent); |
| goog.events.listen(flatSelect4, EVENTS, logEvent); |
| |
| goog.dom.setTextContent(goog.dom.getElement('perf'), |
| (goog.now() - timer) + 'ms'); |
| </script> |
| </body> |
| </html> |
