As you have been noticed, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Starting from Liferay 6, the portal uses Alloy UI (which is built on top of YUI3) instead of jQuery. That is, jQuery is no longer included by default. Therefore, you can use any version of jQuery as you need for your custom plugins. Refer to blogs posts Building jQuery based plugins in Liferay 6, Using jQuery (or any Javascript library) in Liferay 6.0, etc.

This article will address what jQuery UI looks like in Liferay 6 plugins and how to apply it in portlets. Here I use jQuery 1.4.3 and custom UI 1.8.5 as an example. Liferay portal version is CE 6.0.5 GA 3.

Introduction

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

The following are sample screenshots.

Slider

DatePicker - Display multiple months

Accordion

 Tabs and Progress Bar

 Auto Complete

 Resizable and Draggable

Animate

Building jQuery custom UI plugin

Abstracted from the book: Liferay User Interface Developement (coming out soon).

1) Create a plugin in plugins SDK.

• Build a project called “sample-jquery-portlet” with folder docroot and build.xml
• Add CSS jQuery custom UI in the folder /docroot/css
• Add images in the folder /docroot/images
• Add JavaScript jQuery and its custom UI in the folder /docroot/js
• Add liferay-display.xml, liferay-plugin-package.properties, liferay-portlet.xml, portlet.xml in the folder /docroot/WEB-INF

2) Especially, add following lines, for example, in the file liferay-portlet.xml.
<portlet>
    <portlet-name>1</portlet-name>
    <icon>/images/world.png</icon>
    <header-portlet-css>/css/ui-lightness/jquery-ui-1.8.5.custom.css</header-portlet-css>
   <header-portlet-javascript>/js/jquery-1.4.3.min.js</header-portlet-javascript>
   <footer-portlet-javascript>/js/jquery-ui-1.8.5.custom.min.js</footer-portlet-javascript>
    <css-class-wrapper>sample-jquery-portlet</css-class-wrapper>
</portlet>

Note that the property header-portal-javascript sets the path of JavaScript that will be referenced in the page's header relative to the portal's context path; and the property footer-portal-javascript sets the path of JavaScript that will be referenced in the page's footer relative to the portal's context path.

Similarly, the property header-portlet-css sets the path of CSS that will be referenced in the page's header relative to the portlet's context path; while the property footer-portlet-css sets the path of CSS that will be referenced in the page's footer relative to the portlet's context path.

Note that these properties have been specified as * in liferay-portlet-app_6_0_0.dtd or liferay-portlet-app_6_1_0.dtd.

header-portlet-css*,
header-portlet-javascript*,
footer-portlet-css*,
footer-portlet-javascript*,

It means that you can include multiple CSS files and/or JavaScript files.

3) Add JSP files under the folder /docroot/jsp

You can simply download WAR of Sample jQuery plugin.

sample-jquery-portlet-6.0.6.1.war

And then deploy it. That's it.

Enjoy!