JSFiddle - React, Tailwind, and code Playground

by jonlb

HTML

<script src="http://jxlib.org/reference/3.1.1/examples/lib/jxlib.standalone.uncompressed.js"></script>
<script src="http://jxlib.org/reference/3.1.1/examples/js/locale.js"></script>
<link rel="stylesheet" href="http://jxlib.org/reference/3.1.1/examples/lib/themes/crispin/jxtheme.uncompressed.css">
 <div id="containerBox"></div>
    
    
    
    <div id="layoutOffsetElement1">
        <p>This element has variable width and a fixed height, attached to the top of the container.</p>
    </div>
    <div id="layoutOffsetElement2">
        <p>This element has fixed width, variable height, and is attached to the left of the container.</p>
    </div>
    <div id="layoutOffsetElement3">
        <p>This element has variable width and height with fixed left, top, right and bottom offsets.</p>
    </div>
    <div id="layoutOffsetElement4">
        <p>This element was pulled from the HTML and added to this form.</p>
    </div>
    <div id="layoutOffsetElement5">
        <p>This element has variable width and fixed height, attached to the bottom of the container.</p>
    </div>
    <div id="starContent"><p>This tab just has an image.</p></div>

CSS

.jxContainerContent {
    background: #fff;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    margin: 2px;
}

.jxContainerContent .jxContainerContent {
    margin: 0;
    border: none;
}

#containerBox {
    position: relative;
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid #ccc;
}

JavaScript

function drawContainerLayout() {
    
    var data = [];
    for (i = 1; i < 30; i++) {
        data.push({id: i, label: 'test' + i});
    }
    var parser = new Jx.Store.Parser.JSON();
    var paginate = new Jx.Store.Strategy.Paginate({
        startingItemsPerPage: 10  
    });
  
    var store = new Jx.Store({
        fields: [{
            name: 'label',
            type: 'alphanumeric'
        }, {
            name: 'id',
            type: 'numeric'
        }],
        protocol: new Jx.Store.Protocol.Local(data, {
            parser: parser
        }),
        strategies: [paginate],
        record: Jx.Record,
        recordOptions: {
            primaryKey: 'id'
        }
    });
    
    store.load();
    
    new Jx.Container({
        parent: 'containerBox',
        layoutManager: 'anchored',
        topLevel: true,
        items: [{
            //Top
            id: 'layoutOffsetElement1' ,
            layoutOpts: {
                height: 50
            }
        },{
            //left
            'class': Jx.Panel,
            options: {
                image: 'http://jxlib.org/reference/3.1.1/examples/images/page_white_world.png',
                label: 'Just a Panel',
                content: 'layoutOffsetElement2',
                loadOnDemand: true,   // this option is ignored in panels
                menu: true,
                height: 200,
                id: 'leftPanel'
            },
            layoutOpts: {
                top: 50,
                bottom: 50,
                width: 200
            }
        },{
            //center panel
            'class': Jx.TabBox,
            options: {
                id: 'centerTabBox',
                items: [{
                    'class': 'tab',
                    options: {
                        image: 'http://jxlib.org/reference/3.1.1/examples/images/star.png',
                        content: 'starContent'
                    }
                },{
                    'class': 'tab',
         ...