Creating Quick Portal Panels with AWPortal
Sure, we all like stylish portal windows that you can minimize, maximize and close. But how can we get that functionality with only one line of code? It's easy with AWPortal, a JQuery plugin.
-
$(".mywindow").awportal();
Here is the demo for those impatient folks out there.
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.
» Download the AWPortal Package
-
Using AWPortal:
Of course, the first step of any JQuery Plugin is to include the javascript files in the header of your page, listing the most recent version of JQuery before the plugin:
The actual implementation of AWPortal is pretty straightforward. First create a DIV and drop the content of the portlet into the block. Assign the DIV a class name like "awportal". Next, assign the DIV a unique ID. Finally, use the TITLE attribute to set the header title of the portlet. You should end up with something like this:
-
<div id="window1" class="awportal" title="My First AWPortal">
-
This plugin positively pleases my portlet purpose perfectly!
-
</div>
To turn this into a fully-functioning portlet, use some JQuery magic to attach the awportal() function to the objects you want to portlet-ize. In this case, we want any DIV where CLASS="AWPORTAL" to become a portlet:
-
$(document).ready(function() {
-
$('.awportal').awportal();
-
});
AWPortal includes three functions for expanding, collapsing and toggling all of the windows on the page, simultaneously. In this example, we'll attach them to a link's click action. Add "return false;" to your click() event handler to prevent the link from attempting to load the link's href value:
-
$(document).ready(function() {
-
$('.awportal').awportal();
-
-
$('a#collapse-all').click(function() {
-
$(this).awportalCollapseAll(); return false;
-
});
-
$('a#expand-all').click(function() {
-
$(this).awportalExpandAll(); return false;
-
});
-
$('a#toggle-all').click(function() {
-
$(this).awportalToggleAll(); return false;
-
});
-
});
-
How Do I Customize the Look & Feel?
All of the portal styles can be customized via CSS, this includes font styles & sizes, title background image, padding, borders, etc. The only GUI items that you cannot modify in CSS is the action button images.
The collapse/expand/close button images 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:
-
$(document).ready(function() {
-
$.fn.awportal.defaults.btnExpandOff = 'images/my_expand_off.gif';
-
$.fn.awportal.defaults.btnExpandOn = 'images/my_expand_on.gif';
-
$.fn.awportal.defaults.btnCollapseOff = 'images/my_collapse_off.gif';
-
$.fn.awportal.defaults.btnCollapseOn = 'images/my_collapse_on.gif';
-
$.fn.awportal.defaults.btnCloseOff = 'images/my_close_off.gif';
-
$.fn.awportal.defaults.btnCloseOn = 'images/my_close_on.gif';
-
-
$('.awportal').awportal();
-
});
Finally, you can also customize the default speed (in milliseconds) of the window slide effect:
-
$(document).ready(function() {
-
$.fn.awportal.defaults.slideSpeed = 500;
-
$('.awportal').awportal();
-
});
And it’s as simple as that! Your DIV is now a functioning portlet.
Again, check out the demo, the code there will probably answer any remaining questions you might still have. If not, feel free to drop me an email at [ blog |at| alan waldron dot com ].
Try it out, and let me know how it works. If you get this implemented somewhere, let me know about it and post up a link in the comments!
-
» Download the AWPortal Package
-