Four more core effects are Show, Toggle, Fade In, and Animate.   This week’s portlet and the screencast below gives a demonstration of these four effects in a Liferay Portlet. As I should have mentioned last time, the code within the portlet to do one of these effects is very small. Here’s the code for the toggle:

jQuery('#link2').click(function() { jQuery('# block2').toggle();});

Of course, you have to setup a “div” with a unique “id=”. For portlets, we simply prepend the tag which makes the id unique across the portal. Take a look at the source code in the portlet’s view.jsp file for more information. I tried to keep the jQuery code clean and simple so beginners shouldn’t have to cringe too much .

This week I’ll start with another very interesting look at using the extremely powerful jQuery library within Liferay portlets. Many new users to Liferay are unaware of these core features so I thought I would start out with introducing four of them – Fade Out, Slide up, Hide and Slide Down .

The video below shows a screencast using each. To get a copy of the portlet used in this demo go to the downloads sections of this site.

This is the final screencast in my video series on using the Liferay Plugin SDK. I hope its been helpful for those of you new to plugin portlets. This Part 5 video shows how simple it is to build and deploy the portlet once its ready for testing. ANT is being used for the build tool — sorry, no maven support yet.

The video for this tutorial can be found by clicking here or by clicking the image above . As usual, the video will start automatically — but click on the arrow at the bottom of the video to play/pause it.