JSFiddle - React, Tailwind, and code Playground

by rosenfeld

HTML

<link rel="stylesheet" href="http://layout.jquery-dev.net/lib/css/layout-default-latest.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<!-- manually attach allowOverflow method to pane -->
<div class="ui-layout-north" onmouseover="myLayout.allowOverflow('north')" onmouseout="myLayout.resetOverflow(this)">
    This is the north pane, closable, slidable and resizable

    <ul>
        <li>
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
            </ul>
            Drop-Down <!-- put this below so IE and FF render the same! -->
        </li>
    </ul>

</div>

<!-- allowOverflow auto-attached by option: west__showOverflowOnHover = true -->
<div class="ui-layout-west">
    This is the west pane, closable, slidable and resizable
<button onclick="debugData(myLayout.options.west)">West Options</button>
    <ul>
        <li>
            <ul>
                <li>one</li>
                <li>two</li>
                <li>three</li>
                <li>four</li>
                <li>five</li>
            </ul>
            Pop-Up <!-- put this below so IE and FF render the same! -->
        </li>
    </ul>

    <p><button onclick="myLayout.close('west')">Close Me</button></p>

</div>

<div class="ui-layout-south">
    This is the south pane, closable, slidable and resizable &nbsp;

    <!-- this button has its event added dynamically in document.ready -->
    <button class="south-toggler">Toggle This Pane</button>
</div>

<div class="ui-layout-east">
    This is the east pane, closable, slidable and resizable

    <!-- attach allowOverflow method to this specific element -->
    <ul...

CSS

p {
        font-size:        1em;
        margin:            1ex 0;
    }
    p.buttons {
        text-align:        center;
        line-height:    2.5em;
    }
    button {
        line-height:    normal;
    }
    .hidden {
        display:        none;
    }

    /*
     *    Rules for simulated drop-down/pop-up lists
     */
    ul {
        /* rules common to BOTH inner and outer UL */
        z-index:    100000;
        margin:        1ex 0;
        padding:    0;
        list-style:    none;
        cursor:        pointer;
        border:        1px solid Black;
        /* rules for outer UL only */
        width:        15ex;
        position:    relative;
    }
    ul li {
        background-color: #EEE;
        padding: 0.15em 1em 0.3em 5px;
    }
    ul ul {
        display:    none;
        position:    absolute;
        width:        100%;
        left:        -1px;
        /* Pop-Up */
        bottom:        0;
        margin:        0;
        margin-bottom: 1.55em;
    }
    .ui-layout-north ul ul {
        /* Drop-Down */
        bottom:        auto;
        margin:        0;
        margin-top:    1.45em;
    }
    ul ul li        { padding: 3px 1em 3px 5px; }
    ul ul li:hover    { background-color: #FF9; }
    ul li:hover ul    { display:    block; background-color: #EEE; }

JavaScript

function toggleLiveResizing () {
        $.each( $.layout.config.borderPanes, function (i, pane) {
            var o = myLayout.options[ pane ];
            o.livePaneResizing = !o.livePaneResizing;
        });
    };
    
    function toggleStateManagement ( skipAlert, mode ) {
        if (!$.layout.plugins.stateManagement) return;

        var options    = myLayout.options.stateManagement
        ,    enabled    = options.enabled // current setting
        ;
        if ($.type( mode ) === "boolean") {
            if (enabled === mode) return; // already correct
            enabled    = options.enabled = mode
        }
        else
            enabled    = options.enabled = !enabled; // toggle option

        if (!enabled) { // if disabling state management...
            myLayout.deleteCookie(); // ...clear cookie so will NOT be found on next refresh
            if (!skipAlert)
                alert( 'This layout will reload as the options specify \nwhen the page is refreshed.' );
        }
        else if (!skipAlert)
            alert( 'This layout will save & restore its last state \nwhen the page is refreshed.' );

        // update text on button
        var $Btn = $('#btnToggleState'), text = $Btn.html();
        if (enabled)
            $Btn.html( text.replace(/Enable/i, "Disable") );
        else
            $Btn.html( text.replace(/Disable/i, "Enable") );
    };

    // set EVERY 'state' here so will undo ALL layout changes
    // used by the 'Reset State' button: myLayout.loadState( stateResetSettings )
    var stateResetSettings = {
        north__size:        "auto"
    ,    north__initClosed:    false
    ,    north__initHidden:    false
    ,    south__size:        "auto"
    ,    south__initClosed:    false
    ,    south__initHidden:    false
    ,    west__size:            200
    ,    west__initClosed:    false
    ,    west__initHidden:    false
    ,    east__size:            300
    ,    east__initClosed:    false
    ,    east__initHidden:...