jQuery.dataDisplay - http://github.com/assetinfo/jquery.dataDisplay Example

jQuery.dataDisplay.js aids the developer in writing concise conditions against elements within a form based setting, in order to control the display of elements based on the state of a form.

by Graham Dixon

HTML

<script src="https://rawgit.com/assetinfo/jquery.dataDisplay/master/dist/jquery.dataDisplay.js"></script>
<link rel="stylesheet" href="https://rawgit.com/assetinfo/jquery.dataDisplay/master/dist/jquery.dataDisplay.optimised.css">
<div id="container">
    <h1>Example of jQuery.dataDisplay.js...</h1>
    <h2>1. Conditionally display &amp; style an element</h2>
    <h3>(based on an input form and conditions defined in markup)</h3>
    <b>Select "yes":</b>
    <label for="yes">
        <input type="radio" name="radioTest" value="yes" id="yes" checked> Yes</label>
    <label for="no">
        <input type="radio" name="radioTest" value="no" id="no"> No</label>
    <b>Type "testing":</b>
    <input name="inputTest" type="value"/>
    <div class="dataDisplay" 
        data-display="
            {radioTest} is equal to 'yes' && (length({inputTest}) is less than or equal to 6); ||
            {radioTest} is equal to 'yes' && ({inputTest} is equal to 'testing' || {inputTest} is equal to 'testinggg'); ||
            {inputTest} is equal to 'testing' || {inputTest}=='testinggg' :: 
                $this.css('background','black'); ||
            {inputTest} is equal to 'testing' :: 
                $this.css('color','white');
                $this.css('font-size','20px');
                $this.css('border','1px solid #fff'); ||
            {inputTest} is equal to 'testinggg' :: 
                $this.css('color','yellow');
                $this.css('border','1px solid yellow');" 
        data-display-resets="
            $this.css('color', 'black');
            $this.css('font-size', '16px');
            $this.css('background', '#fff');
            $this.css('border', '1px solid #000');">
        <a>type 'testing' or 'testinggg' in the field above</a>
        <a>(box will hide when length > 6 when value !== testing or testinggg)</a>
    </div>
    <div class="dataDisplay" 
        data-display="
            {radioTest} == 'no';">
        <a>select the 'yes' radio field...

JavaScript

$(function() {
    /*! 
     * basic example 
     * - initiates jquery.dataDisplay.js instance against #container
     * - conditions defined agaist attributes in the HTML
     */
    $('#container').dataDisplay();
});