JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Layout Demo</title>
<link type="text/css" rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css" />
<script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.net//lib/js/jquery-ui-1.7.2.js"></script>
<script type="text/javascript" src="http://layout.jquery-dev.net//lib/js/jquery.layout-1.2.0.js"></script>
<script type="text/javascript">
var myLayout;
$(document).ready(function () {
// this layout could be created with NO OPTIONS - but showing some here just as a sample...
// myLayout = $('body').layout(); -- syntax with No Options
myLayout = $('body').layout({
// enable showOverflow on west-pane so popups will overlap north pane
west__showOverflowOnHover: true
// reference only - these options are NOT required because are already the 'default'
, closable: true // pane can open & close
, resizable: true // when open, pane can be resized
, resizeWhileDragging: true // add from peter
, slidable: true // when closed, pane can 'slide' open over other panes - closes on mouse-out
// some resizing/toggling settings
, north__slidable: false // OVERRIDE the pane-default of 'slidable=true'
, north__togglerLength_closed: '100%' // toggle-button is full-width of resizer-bar
, north__spacing_closed: 20 // big resizer-bar when open (zero height)
, south__resizable: false // OVERRIDE the pane-default of 'resizable=true'
, south__spacing_open: 0 // no resizer-bar when open (zero...