JSFiddle - React, Tailwind, and code Playground

by forresto

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
jquery 1.6.4 works

<div id="things"></div>

<div id="status">status</div>

CSS

div.thing {
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

.ui-resizable-helper {
    border: 1px dotted #AAA;
}

JavaScript

var testView = Backbone.View.extend({
  
  tagName: "div",
  className: "view",
  events: {
    "resizestart .thing": "resizestart",
    "resize .thing":      "resize",
    "resizestop .thing":  "resizestop"
  },
  initialize: function () {
    this.render();
    this.$(".nohelper")
      .resizable();
    this.$(".withhelper")
      .resizable({
        helper: "ui-resizable-helper"
      });
  },
  render: function () {
    $(this.el).html('<div class="thing nohelper">no helper</div><div class="thing withhelper">helper</div>');
    return this;
  },
  resizestart: function (event, ui) {
      $("#status").text("resizestart");
  },
  resize: function (event, ui) {
      $("#status").text("resize");
  },
  resizestop: function (event, ui) {
      $("#status").text("resizestop");
  }

});

var view = new testView();
$("#things").append(view.el);