Field flow

Transform a basic list into a drop down.

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="http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
		<li><a href="http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a></li>
		<li><a href="http://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="http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
				<li><a href="http://wet-boew.github.io/v4.0-ci/demos/charts/charts-en.html">Draw charts</a></li>
				<li><a href="http://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="http://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
				<li><a href="http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
				<li><a href="http://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="http://wet-boew.github.io/v4.0-ci/demos/equalheight/equalheight-en.html">Set a consistant height</a></li>
							</ul>
						</div>
					</li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/data-ajax/data-ajax-en.html">Inserting content</a></li>
					<li><a href="http://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="http://wet-boew.github.io/v4.0-ci/demos/details/details-en.html">Expand and collapse content</a></li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/lightbox/lightbox-en.html">Photo galery</a></li>
					<li><a href="http://wet-boew.github.io/v4.0-ci/demos/overlay/overlay-en.html">Popup content</a></li>
				</ul>
			</div>
		</li>
	</ul>
</div>
Date modified: