[Summary view] [Print] [Text view]

   1  <script type="text/javascript">
   2  
   3      var model = {
   4  
   5          renderAt: '#containerDemo',
   6  
   7          title: 'Resizable Demos',
   8  
   9          demos: [
  10  
  11              {
  12                  title: 'Simple div Resizing',
  13                  desc: 'You can play with the options listed below and check the results on the div.',
  14                  html: '<div id="simpleDiv" class="resizable">Resize me!</div><br>',
  15                  destroy: '$("#simpleDiv").resizable("destroy");',
  16  
  17                  options: [
  18                      {    desc: 'All handles',    source: '$("#simpleDiv").resizable({ handles: "all"});' },
  19                      {    desc: 'Using helper',    source: '$("#simpleDiv").resizable({ handles: "all", helper: "proxy" });' },
  20                      {    desc: 'Preserving ratio',    source: '$("#simpleDiv").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' },
  21                      {    desc: 'Autohide handles',    source: '$("#simpleDiv").resizable({ handles: "all", autoHide:true });' },
  22                      {    desc: 'Transparent handles',    source: '$("#simpleDiv").resizable({ handles: "all", transparent: true, helper: "proxy" });' },
  23                      {    desc: 'Pre-defined handles (e,w)',    source: '$("#simpleDiv").resizable({ handles: "e,w" });' },
  24                      {    desc: 'Resize on a grid [50, 50]',    source: '$("#simpleDiv").resizable({ handles: "all", grid: [50, 50] });' },
  25                      {    desc: 'Min/Max height and width',    source: '$("#simpleDiv").resizable({ handles: "all", minWidth: 100, minHeight: 100,    maxWidth: 250, maxHeight: 250 });' },
  26                      {    desc: 'Animated resizing',    source: '$("#simpleDiv").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
  27                      {    desc: 'Knob handles (image cropper like)',    source: '$("#simpleDiv").resizable({ handles: "all", knobHandles: true });' },
  28                      {    desc: 'Ghost resizing',    source: '$("#simpleDiv").resizable({ handles: "all", ghost:true });' },
  29                      {    desc: 'Prevent default browser resize (safari textarea)',    source: '$("#simpleDiv").resizable({ handles: "all", preventDefault: true });' },
  30                      {    desc: 'Preserve cursor on resize',    source: '$("#simpleDiv").resizable({ handles: "all", preserveCursor: true });' },
  31                      {    desc: 'Using callbacks',    source: '$("#simpleDiv").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
  32                  ]
  33              },
  34  
  35              {
  36                  title: 'Image Resizing',
  37                  desc: 'Try resize images! You can play with the options listed below.',
  38                  html: '<img id="resizebleImage" src="templates/images/puppy.jpg" width="200px" height="135px">',
  39                  destroy: '$("#resizebleImage").resizable("destroy");',
  40  
  41                  options: [
  42                      {    desc: 'Ghost resizing',    source: '$("#resizebleImage").resizable({ handles: "all", ghost:true });' },
  43                      {    desc: 'All handles',    source: '$("#resizebleImage").resizable({ handles: "all"});' },
  44                      {    desc: 'Using helper',    source: '$("#resizebleImage").resizable({ handles: "all", helper: "proxy" });' },
  45                      {    desc: 'Preserving ratio',    source: '$("#resizebleImage").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' },
  46                      {    desc: 'Autohide handles',    source: '$("#resizebleImage").resizable({ handles: "all", autoHide:true });' },
  47                      {    desc: 'Transparent handles',    source: '$("#resizebleImage").resizable({ handles: "all", transparent: true, helper: "proxy" });' },
  48                      {    desc: 'Pre-defined handles (e,w)',    source: '$("#resizebleImage").resizable({ handles: "e,w" });' },
  49                      {    desc: 'Resize on a grid [50, 50]',    source: '$("#resizebleImage").resizable({ handles: "all", grid: [50, 50] });' },
  50                      {    desc: 'Min/Max height and width',    source: '$("#resizebleImage").resizable({ handles: "all", minWidth: 100, minHeight: 100,    maxWidth: 250, maxHeight: 250 });' },
  51                      {    desc: 'Animated resizing',    source: '$("#resizebleImage").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
  52                      {    desc: 'Knob handles (image cropper like)',    source: '$("#resizebleImage").resizable({ handles: "all", knobHandles: true });' },
  53                      {    desc: 'Prevent default browser resize (safari textarea)',    source: '$("#resizebleImage").resizable({ handles: "all", preventDefault: true });' },
  54                      {    desc: 'Preserve cursor on resize',    source: '$("#resizebleImage").resizable({ handles: "all", preserveCursor: true });' },
  55                      {    desc: 'Using callbacks',    source: '$("#resizebleImage").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
  56                  ]
  57              },
  58  
  59              {
  60                  title: 'Textarea Resizing',
  61                  desc: 'Try to <b>resize textarea</b>! You can play with the options listed below.',
  62                  html: '<textarea id="resizebleTextarea">I am a textarea!</textarea>',
  63                  destroy: '$("#resizebleTextarea").resizable("destroy");',
  64                  options: [
  65                      {    desc: 'All handles',    source: '$("#resizebleTextarea").resizable({ handles: "all"});' },
  66                      {    desc: 'Using helper',    source: '$("#resizebleTextarea").resizable({ handles: "all", helper: "proxy" });' },
  67                      {    desc: 'Preserving ratio',    source: '$("#resizebleTextarea").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' },
  68                      {    desc: 'Autohide handles',    source: '$("#resizebleTextarea").resizable({ handles: "all", autoHide:true });' },
  69                      {    desc: 'Transparent handles',    source: '$("#resizebleTextarea").resizable({ handles: "all", transparent: true, helper: "proxy" });' },
  70                      {    desc: 'Pre-defined handles (e,w)',    source: '$("#resizebleTextarea").resizable({ handles: "e,w" });' },
  71                      {    desc: 'Resize on a grid [50, 50]',    source: '$("#resizebleTextarea").resizable({ handles: "all", grid: [50, 50] });' },
  72                      {    desc: 'Min/Max height and width',    source: '$("#resizebleTextarea").resizable({ handles: "all", minWidth: 100, minHeight: 100,    maxWidth: 250, maxHeight: 250 });' },
  73                      {    desc: 'Animated resizing',    source: '$("#resizebleTextarea").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
  74                      {    desc: 'Knob handles (image cropper like)',    source: '$("#resizebleTextarea").resizable({ handles: "all", knobHandles: true });' },
  75                      {    desc: 'Ghost resizing',    source: '$("#resizebleTextarea").resizable({ handles: "all", ghost:true });' },
  76                      {    desc: 'Prevent default browser resize (safari textarea)',    source: '$("#resizebleTextarea").resizable({ handles: "all", preventDefault: true });' },
  77                      {    desc: 'Preserve cursor on resize',    source: '$("#resizebleTextarea").resizable({ handles: "all", preserveCursor: true });' },
  78                      {    desc: 'Using callbacks',    source: '$("#resizebleTextarea").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
  79                  ]
  80              }
  81  
  82          ]
  83  
  84      };
  85  
  86      $(function(){
  87  
  88          uiRenderDemo(model);
  89  
  90      });
  91  
  92  </script>