All Downloads are FREE. Search and download functionalities are using the official Maven repository.

goog.demos.container.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of google-closure-library

The Google Closure Library is a collection of JavaScript code designed for use with the Google Closure JavaScript Compiler. This non-official distribution was prepared by the ClojureScript team at http://clojure.org/

There is a newer version: 0.0-20230227-c7c0a541

Show newest version





  goog.ui.Container
  
  
  
  
  
  


  goog.ui.Container
  goog.ui.Container is a base class for menus and toolbars.
  
    These containers were created programmatically:
    
      
        
          
            Vertical container example:
          
          
            Horizontal container example:
          
        
        
          
            
              Show vertical container:
              
            
             
            
              Enable vertical container:
              
            
            

            
              Show Porthos:
              
            
             
            
              Enable Porthos:
              
            
            

            
              Enable transition events:
              
            
          
          
            
              Show horizontal container:
              
            
             
            
              Enable horizontal container:
              
            
            

            
              Show Doc:
              
            
             
            
              Enable Doc:
              
            
            

            
              Enable transition events:
              
            
          
        
      
    
    Try enabling and disabling containers with & without
      state transition events, and compare performance!
  
  

  

  
    Non-focusable container with focusable controls:
    In this case, the container itself isn't focusable, but each control is:

    
  
  

  

  
    Another horizontal container:
    
      This is starting to look useful...  Enable toolbar:
      
    
    
  
  

  

  
    A decorated container:
    
      It's much easier to decorate than to create programmatically...
      Enable decorated toolbar:
      
    
    
      
        Select month
        
          January
          February
          March
          April
          May
          June
          July
          August
          September
          October
          November
          December
        
      
      
        Year
        
          2001
          2002
          2003
          2004
          2005
          2006
          2007
          2008
          2009
          2010
        
      
      
        Toggle Button
      
      
        Fancy Toggle Button
      
      
        Another Button
      
    
  
  

  

  
    The same container, right-to-left:
    
      Show right-to-left toolbar:
      
    
    
      Enable right-to-left toolbar:
      
    
    
      
        Select month
        
          January
          February
          March
          April
          May
          June
          July
          August
          September
          October
          November
          December
        
      
      
        Year
        
          2001
          2002
          2003
          2004
          2005
          2006
          2007
          2008
          2009
          2010
        
      
      
        Toggle Button
      
      
        Fancy Toggle Button
      
      
        Another Button
      
    
  
  

  

  
    A scrolling container:
    
      This container scrolls so that the highlighted item is visible.
      Here's a mix of block items and inline block items, which both work.
    
    
      Put focus in the text box and use the arrow keys:
      
    
    
      Or quick jump to item:
      
        0 1 2 3
        4 5 6 7
        8 9 10 11
        12 13 14 15
      
    
    
      menuitem 0
      menuitem 1
      menuitem 2
      menuitem 3
      tog 4
      tog 5
      tog 6
      toggley 7
      toggley 8
      toggley 9
      toggley 10
      toggley 11
      toggley 12
      toggley 13
      menuitem 14
      menuitem 15
    
  
  

  

  
  
    Event Log

Vertical container example:	Horizontal container example:
Show vertical container: Enable vertical container: Show Porthos: Enable Porthos: Enable transition events:	Show horizontal container: Enable horizontal container: Show Doc: Enable Doc: Enable transition events: