SOURCE CODE: Basic Marquee

  
  
  
  
  
  
  
  







  
  UIZE JavaScript Framework



  

    JAVASCRIPT EXAMPLES
    Basic Marquee
    

      
SOURCE
    
  

  

  

    
In this basic example, an instance of Uize.Widget.Resizer.Marquee provides a very simple marquee widget. The marquee is configured so that it cannot be moved outside of its container node, by setting its constrained state property to true. It can be resized to an arbitrary aspect ratio, but it cannot be made smaller than 20x20, accomplished by setting the minWidth and minHeight state properties. A handler is registered for the Position Changed instance event, so that the coordinates of the marquee are displayed (in text inputs to the right) as you move and resize it. Additionally, a new marquee can be created by clicking and dragging in a fresh spot outside the marquee's current area.
  

  

  


  

    

      
Current Position:
         
        LEFT: 
         | 
        TOP: 
         | 
        WIDTH: 
         | 
        HEIGHT: 
      
      
Resizing Configurations
        

          

            FIXED WIDTH: marquee.set ({fixedX:true,fixedY:false})
             | 
            FIXED HEIGHT: marquee.set ({fixedX:false,fixedY:true})
          
          

            NOT RESIZABLE: marquee.set ({fixedX:true,fixedY:true})
             | 
            FULLY RESIZABLE: marquee.set ({fixedX:false,fixedY:false})
          
        
      
      
Different Sizes:
         
        marquee.set ({width:50,height:50})
         | 
        marquee.set ({width:100,height:100})
         | 
        marquee.set ({width:300,height:50})
      
      
Nudge Horizontally:
         
        LEFT: marquee.set ({left:marquee.get ('left') - 10})
         | 
        RIGHT: marquee.set ({left:marquee.get ('left') + 10})
      
      
Nudge Vertically:
         
        UP: marquee.set ({top:marquee.get ('top') - 10})
         | 
        DOWN: marquee.set ({top:marquee.get ('top') + 10})