JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://dl.dropbox.com/u/28322516/source/js/storeJson2.min.js"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/28322516/source/css/bootstrap.min.css">
<div>
<h4>Testing Local Storage</h4>
<p>Select options below &darr;.</p>
<br>

<label>Client</label>
<select name="client" id="client" class="chzn-select" data-placeholder="Select a Client...">
    <option value=""></option>
    <option value="58">French Connection US</option>
    <option value="27">Tegan UK</option>
    <option value="14">Intuit</option>
</select>
<div id="input-network" style="display:none;">
    <label>Network</label>
    <select id="network">
        <option value=""></option>
        <option value="1">Google</option>
        <option value="2">Facebook</option>
        <option value="3">MSN</option>
    </select>
</div>

<table id="summaries" class="table" style="display:none;">
    <thead>
        <tr>
            <th colspan="4" id="summaries_checks">
                <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox0" value="column_all">All</label>
                <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox1" value="column_1" checked>column 1</label>
                <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox2" value="column_2" checked>column 2</label>
                <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox3" value="column_3" checked>column 3</label>
                <label class="checkbox inline"><input type="checkbox" id="inlineCheckbox4" value="column_4" checked>column 4</label>
            </th>
        </tr>
        <tr>
            <th class="column_1">Column 1</th>
            <th class="column_2">Column 2</th>
            <th class="column_3">Column 3</th>
            <th class="column_4">Column 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="column_1">Column 1</td>
            <td class="column_2">Column 2</td>
 ...

CSS

body { padding: 9px;-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
fieldset {
-moz-column-count: 2;
-moz-column-gap: 3px;
-webkit-column-count: 2;
-webkit-column-gap: 3px;
column-count: 2;
column-gap: 3px;
}
.alert{margin-top:20px;}
{
    display: block;
    position:fixed;
    bottom:20px;
    left:20px;
}
.fixed{
    position: fixed;
    top:20px;
    right:50px;
}
.fixed a{color:white;}

JavaScript

// Simulate data from real database
var miniDatabase = {
    "clients":[ 
        {"name":"French Connection US","sr3":"FC2S","id":58},
        {"name":"Tegan UK",            "sr3":"TG2K","id":27},
        {"name":"Intuit",              "sr3":"INTU",'id':14}
    ],
    "networks":[ 
        {"name":"Google","id":1},
        {"name":"Facebook","id":2},
        {"name":"MSN","id":3}
    ]
};

 
$(document).ready(function() {
    
    if( store.enabled ){
        
        // Load client preferences from localStorage and set the UI
        if( store.get('clientPref') ){
            var id = store.get('clientPref').id;
            $('#client').val(id);
            $("#input-network").show();
            $("#summaries").show();
            
            var network = store.get('clientPref').network;
            if(network){
                $('#network').val(network);
            }
        }
        
        // Load table preferences from localStorage
        var uiPref = {};
        var columns = {};
        
        if( store.get('uiPref') ){
            uiPref = store.get('uiPref');
            $('#toolbar').attr('class',uiPref.pager);
            
            // Loop over each value in the array.
            $.each(uiPref.columns, function(intIndex, objValue){
                console.log( intIndex, objValue );
                $("#"+intIndex).prop('checked', objValue);
            });
        }
        else{
            // No data stored. Create data based on default HTML values.
            uiPref.pager = $('#toolbar').attr('class');
            
            $("#summaries_checks").find(":checkbox").each(function(){
                // store value for each column
                columns[$(this).attr('id')] = $(this).is(':checked'); 
                uiPref.columns = columns;
            });
            store.set('uiPref', uiPref);
        }
    }
    else{
        console.error('localStorage disabled');
    }
    
    // Dropbox Client
   ...