Language selection

Search

Field flow

Transform a basic list into a selectable list.


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><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>

Ajax

This functionality depends on the Data ajax plugin.

Choose content to be ajaxed:

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) Sed eget dui ac nunc mattis consequat 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.

<div class="wb-fieldflow">
	<p>Find the plugin for the action you need.</p>
	<ul>
		<li>Layout and 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.

<div class="wb-fieldflow">
	<p>Find the plugin for the action you need.</p>
	<ul>
		<li>+ Layout and 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>
Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: