This time I will share jQuery Plugin and tutorial about Handling Conditional Elements Based On User Input – jQuery dataDisplay.js, hope it will help you in programming stack.
dataDisplay.js is a jQuery plugin for handling conditional elements that allows to control the display of DOM elements based on user input.
Basic usage:
1. Include the jQuery dataDisplay.js after loading jQuery library.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.dataDisplay.min.js"></script> |
2. Initialize the plugin on the target container.
1 |
$('#container').dataDisplay(); |
3. Define the conditions in the ‘data-display’ attribute as these:
03 |
<input type="radio" name="radioTest" value="yes" id="yes" checked/> Yes</label> |
05 |
<input type="radio" name="radioTest" value="no" id="no"/> No</label> |
06 |
<b>Type "testing":</b> |
07 |
<input name="inputTest" type="value"/> |
08 |
<div class="dataDisplay" |
10 |
{radioTest} == 'yes' && (length({inputTest}) is less than or equal to 6); || |
11 |
{radioTest} == 'yes' && ({inputTest} is equal to 'testing' || {inputTest} is equal to 'testinggg'); || |
12 |
{inputTest} is equal to 'testing' || {inputTest}=='testinggg' :: $this.css('background','black'); || |
13 |
{inputTest} is equal to 'testing' :: $this.css('color','white');$this.css('font-size','20px');$this.css('border','1px solid #fff'); || |
14 |
{inputTest} is equal to 'testinggg' :: $this.css('color','yellow');$this.css('border','1px solid yellow');" |
16 |
$this.css('color', 'black'); |
17 |
$this.css('font-size', '16px'); |
18 |
$this.css('background', '#fff'); |
19 |
$this.css('border', '1px solid #000');"> |
20 |
<a>type 'testing' or 'testinggg' in the field above</a> |
21 |
<a>(box will hide when length > 6 when value !== testing or testinggg)</a> |
23 |
<div class="dataDisplay" |
25 |
{radioTest} == 'no';"> |
26 |
<a>select the 'yes' radio field above</a> |
4. Helper methods included:
1 |
data-display="{input} == "value";" |
2 |
data-display="!empty({input});" |
3 |
data-display="empty({input});" |
4 |
data-display="length({input}) > 10;" |
5 |
data-display="{input} is greater than or equal to 10;" |
6 |
data-display="{input} is less than or equal to 10;" |
7 |
data-display="{input} is greater than 10;" |
8 |
data-display="{input} is less than 10;" |
9 |
data-display="{input} is equal to 10;" |
5. Default plugin options:
1 |
$('#container').dataDisplay({ |
2 |
eventName: ".dataDisplay", |
3 |
dataAttr: "dataDisplay", |
4 |
condsAttr: "data-display", |
5 |
resetsAttr: "data-display-resets", |
This awesome jQuery plugin is developed by assetinfo. For more Advanced Usages, please check the demo page or visit the official website.
