Field flow
Transform a basic list into a selectable list.
- Field flow (current)
- Field flow basic configuration
- Field flow advanced
- Field flow alternatives
Redirection
Find the plugin for the action you need:
<div class="wb-fieldflow">
<p>Find the plugin for the action you need:</p>
<ul>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
<li><!--test comment--><a href="https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
<li>
<a href="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a>
</li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html"><strong>Popup</strong> content</a></li>
</ul>
</div>Ajax
This functionality depends on the Data ajax plugin.
Choose content to be ajaxed:
- (Set 1) Nunc sed mauris id nisi molestie porta at quis erat.
- (Set 2) Vestibulum pretium tortor vel facilisis sodales.
- (Set 3) Nunc sit amet dui ut justo efficitur dapibus.
- (Set 4) Praesent at purus ut turpis sollicitudin aliquam.
- (Set 5) Sed eget dui ac nunc mattis consequat in a ex.
Consult one page with the full list of all options (Link not working)
<div class="wb-fieldflow">
<p>Choose content to be ajaxed:</p>
<ul>
<li data-wb-fieldflow="ajax/ajax-1.html">(Set 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
<li data-wb-fieldflow="ajax/ajax-2.html">(Set 2) Vestibulum pretium tortor vel facilisis sodales.</li>
<li data-wb-fieldflow="ajax/ajax-3.html">(Set 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
<li data-wb-fieldflow="ajax/ajax-4.html">(Set 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
<li data-wb-fieldflow="ajax/ajax-5.html">(Set 5) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
</ul>
</div>
<!-- Providing an alternative/multiple way could be required for WCAG conformance and/or design conform to progressive enhancement -->
<p><em><a rel="alternate" href="#">Consult one page with the full list of all options</a> (Link not working)</em></p>Grouping
Find the plugin for the action you need.
- Layout and rendering
- Interactive
<div class="wb-fieldflow">
<p>Find the plugin for the action you need.</p>
<ul>
<li>Layout <strong>and</strong> rendering
<ul>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a></li>
</ul>
</li>
<li>Interactive
<ul>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
</ul>
</li>
</ul>
</div>Nesting Adding subsequent control
Consider to insert a textual clue into an item that will open up a subsequent drop down. Like, by adding a plus sign "+" at the beginning of the label. Remark that the subsequent drop down is identified by: <div class="wb-fieldflow-sub">.
Find the plugin for the action you need.
- + Layout and rendering
It is for?..
- + Esthetic
What kind of transformation
- Inserting content
- Draw charts
- + Esthetic
- + Interactive
What kind of interaction?
<div class="wb-fieldflow">
<p>Find the plugin for the action you need.</p>
<ul>
<li>+ Layout <strong>and</strong> rendering
<div class="wb-fieldflow-sub">
<p>It is for?..</p>
<ul>
<li>+ Esthetic
<div class="wb-fieldflow-sub">
<p>What kind of transformation</p>
<ul>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a></li>
</ul>
</div>
</li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
</ul>
</div>
</li>
<li>+ Interactive
<div class="wb-fieldflow-sub">
<p class="wb-fieldflow-label">What kind of interaction?</p>
<ul>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
</ul>
</div>
</li>
</ul>
</div>Inline button, select an option to go to...
Note: when inline, its context must be clear enough in terms of how to use the selection of options. It's designed to be use where there is one heading representing the action, one description and one field flow control.
Find the plugin for the action you need:
<div class="wb-fieldflow" data-wb-fieldflow='{"inline": true}'>
<p>Find the plugin for the action you need:</p>
<ul>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
</ul>
</div>
Color for inline button
Note: CSS class can be applied only for inline button. Value for btnStyle option can be any valid color class suffix from Bootstrap 3: default, primary, success, info, warning, danger, link
Find the plugin for the action you need:
<div class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "btnStyle": "success"}'>
<p>Find the plugin for the action you need:</p>
<ul>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
</ul>
</div>
Showing label for drop-down (select) with inline button
Note: Applicable only for drop-down with inline button. This property is optional. By default, the label is hidden for drop-down with inline submit button. Add the property showLabel with a value of true.
Find the plugin for the action you need:
<div class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "showLabel": true}'>
<p>Find the plugin for the action you need:</p>
<ul>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a></li>
<li><a href="https://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
</ul>
</div>
Page details
- Date modified: