JQuery UI Taglib Wiki

This library is created thinking to make an easy way to create the UI in web application using jQuery UI library, these taglibs will help you to write less, this whill avoid write any javascript/jquery script line, this library will do that for you.

Getting Started

Read Getiing Started Wiki to have the fist touch with jQuery UI Taglib.

Project Status

Release 9.11 available, visit download section.

Working On Status

Now i am working on in new release 10.2 (Coyotl) the tentative date for release is in febrary of the next year

Features

The main feature for this release is avoid the dependences of the third part libraries.

Components Status

jQuery Core Script -> Completed.
HTML Dinamic Tag -> In Progress (Only include HTML tags for All object completed).
Widgets
- Accordion -> Completed.
- Datepicker -> Completed.
- Dialog -> Completed.
- Progresbar -> Completed.
- Slider -> Completed.
- Tabs -> Completed.
Interactions
- Sortable -> Completed.
- Selectable -> Pending
- Draggable -> Pending
- Droppable -> Pending
- Resizable -> Pending
Extension(I need some suggentions here)
- Themes Plug-in -> Completed
- Themes -> Completed (Object as inputs, textarea, select will take the thame selected)
- Datatable -> Completed.

Repository Structure

Into this repository you can fin 3 diferent projects, these are:

jquery-ui-taglib[Main Project]: This is the main project.
jquery-ui-taglib-themes[Plug-in]:This plug in include all the themes available in jqueryui.com(theme roller)
JQ-UI-Test[Test Project]:You can use this projects above.

Dependences

9.11 Atepocatl Release

10.2 Coyotl Release

Working...

Examples

You can find the diferences betwin normal jQuery UI Scripts and jQuery UI Taglibs in this section. This is the Accordion example showed in www.jqueryui.com

More Examples

Widgets

jQuery Style

<script type="text/javascript">
	$(function() {
		$("#accordion").accordion();
	});
	</script>

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		</p>
	</div>
</div>

Taglib Style

And here the Taglib style

            <ui:accordion cssId="accordion">
                <uic:accordion-element title="Section 1">
                    <P>Mauris mauris ante, blandit et,
                        ultrices a, suscipit eget, quam. Integer ut neque.
                        Vivamus nisi metus, molestie vel, gravida in,
                        condimentum sit amet, nunc. Nam a nibh. Donec suscipit
                        eros. Nam mi. Proin viverra leo ut odio.
                        Curabitur malesuada. Vestibulum a velit eu ante
                        scelerisque vulputate. </P>
                </uic:accordion-element>
                <uic:accordion-element title="Section 2">
                    <P>Sed non urna. Donec et ante. Phasellus eu ligula.
                        Vestibulum sit amet purus. Vivamus hendrerit,
                        dolor at aliquet laoreet, mauris turpis porttitor velit,
                        faucibus interdum tellus libero ac justo.
                        Vivamus non quam. In suscipit faucibus urna. </P>
                </uic:accordion-element>
                <uic:accordion-element title="Section 3">
                    Nam enim risus, molestie et, porta ac,
                    aliquam ac, risus. Quisque lobortis.
                    Phasellus pellentesque purus in massa.
                    Aenean in pede. Phasellus ac libero ac tellus pellentesque
                    semper. Sed ac felis. Sed commodo, magna quis lacinia
                    ornare, quam ante aliquam nisi, eu iaculis leo purus
                    venenatis dui.
                    <OL>
                        <LI>List item three </LI>
                        <LI>List item one</LI>
                        <LI>List item two</LI>
                    </OL>
                </uic:accordion-element>
                <uic:accordion-element title="Section 4">
                    <P>Cras dictum. Pellentesque habitant morbi
                        tristique senectus et netus et malesuada
                        fames ac turpis egestas. Vestibulum ante
                        ipsum primis in faucibus orci luctus et ultrices
                        posuere cubilia Curae; Aenean lacinia mauris vel est.
                    </P>
                    <P>Suspendisse eu nisl. Nullam ut libero.
                        Integer dignissim consequat lectus. Class aptent taciti
                        sociosqu ad litora torquent per conubia nostra, per
                        inceptos himenaeos. </P>
                </uic:accordion-element>
            </ui:accordion>

The taglib will create the jquery ui script automaticaly.