git.roojs.org Git - roojs1/blob - examples/resizable/basic.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11 var ResizableExample = {
  12     init : function(){
  13
  14         var basic = new Roo.Resizable('basic', {
  15                 width: 200,
  16                 height: 100,
  17                 minWidth:100,
  18                 minHeight:50
  19         });
  20
  21         var animated = new Roo.Resizable('animated', {
  22                 width: 200,
  23                 pinned: true,
  24                 height: 100,
  25                 minWidth:100,
  26                 minHeight:50,
  27                 animate:true,
  28                 easing: 'backIn',
  29                 duration:.6
  30         });
  31
  32         var wrapped = new Roo.Resizable('wrapped', {
  33             wrap:true,
  34             pinned:true,
  35             minWidth:50,
  36             minHeight: 50,
  37             preserveRatio: true
  38         });
  39
  40         var transparent = new Roo.Resizable('transparent', {
  41             wrap:true,
  42             minWidth:50,
  43             minHeight: 50,
  44             preserveRatio: true,
  45             transparent:true
  46         });
  47
  48         var custom = new Roo.Resizable('custom', {
  49             wrap:true,
  50             pinned:true,
  51             minWidth:50,
  52             minHeight: 50,
  53             preserveRatio: true,
  54             handles: 'all',
  55             draggable:true,
  56             dynamic:true
  57         });
  58         var customEl = custom.getEl();
  59         // move to the body to prevent overlap on my blog
  60         document.body.insertBefore(customEl.dom, document.body.firstChild);
  61
  62         customEl.on('dblclick', function(){
  63             customEl.hide(true);
  64         });
  65         customEl.hide();
  66
  67         Roo.get('showMe').on('click', function(){
  68             customEl.center();
  69             customEl.show(true);
  70         });
  71
  72         var dwrapped = new Roo.Resizable('dwrapped', {
  73             wrap:true,
  74             pinned:true,
  75             width:450,
  76             height:150,
  77             minWidth:200,
  78             minHeight: 50,
  79             dynamic: true
  80         });
  81
  82         var snap = new Roo.Resizable('snap', {
  83             pinned:true,
  84             width:250,
  85             height:100,
  86             minX : 0,
  87             handles: 'e w hd',
  88             widthIncrement:50,
  89             minWidth: 50,
  90             dynamic: true
  91         });
  92
  93
  94         new Roo.Resizable('box1', {
  95             wrap:true,
  96             width: 150,
  97             height: 100,
  98             minWidth:20,
  99             minHeight:20,
 100             handles: 'all',
 101             dynamic: true,
 102             draggable: true
 103         });
 104
 105         new Roo.Resizable('box2', {
 106             wrap:true,
 107             width: 150,
 108             height: 100,
 109             minWidth:20,
 110             minHeight:20,
 111             handles: 'all',
 112             dynamic: true,
 113             draggable: true
 114         });
 115
 116         new Roo.Resizable('box3', {
 117             wrap:true,
 118             width: 150,
 119             height: 100,
 120             minWidth:20,
 121             minHeight:20,
 122             handles: 'all',
 123             dynamic: true,
 124             draggable: true
 125         });
 126
 127         this.multi = new Roo.Resizable('multi-box', {
 128
 129             width: 595,
 130             height: 200,
 131             minWidth:20,
 132             minHeight:20,
 133             handles: 'all',
 134             dynamic: true,
 135             draggable: true,
 136             resizeChild: true,
 137
 138         });
 139     },
 140     multi : Roo.emptyFn
 141 };
 142
 143 Roo.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);