Portal Windows Demo

by Alan Waldron



Collapse All | Expand All | Toggle All

I'm sure it would be helpful to download the associated CSS style sheet and the button and background images associated with this demo.

Or just download the AWPortal Zip File that includes all of the files in this demo.

All of the portal styles can be customized in the CSS, this includes font styles & sizes, title background image, padding, borders, etc.

The collapse/expand/close buttons are located in the images folder. You can either replace these images, keeping the filename, or you can change the default plugin settings in your JQuery definition:

$.fn.awportal.defaults.btnExpandOff = 'images/my_image1.gif';
$.fn.awportal.defaults.btnExpandOn = 'images/my_image2.gif';
$.fn.awportal.defaults.btnCollapseOff = 'images/my_image3.gif';
$.fn.awportal.defaults.btnCollapseOn = 'images/my_image4.gif';
$.fn.awportal.defaults.btnCloseOff = 'images/my_image5.gif';
$.fn.awportal.defaults.btnCloseOn = 'images/my_image6.gif';

You can also customize the default speed (in milliseconds) of the window slide effect:

$.fn.awportal.defaults.slideSpeed = 500;


One of my client projects involved developing a simple, and easy to read interface for a content-heavy database application that tracks information on tens of thousands of companies and business execs, so I needed a quick and easy way to drop information into a portlet window.

AWPortal is the result of that needed solution, a way to create portlet functionality on any DIV tag with one line of code.

Simply include the jquery.awportal.js script in your source code along with the latest version of JQuery. Create a <div> tag and assign it class="awportal", a unique id, and specify the title attribute (this will be the heading of your portlet).

You should end up with something like this:

<div class="awportal" id="window1" title="Portal Panel 1">
... Portlet Content ...
</div>

Next, add this line of code to your JQuery : $('.awportal').awportal();

That's it!