Lightweight Portal Framework using jQuery
Using JPolite Plugin we can create a portal framework in our application. JPolite is an extension of jQuery JavaScript framework. Here in this tutorial I am going to explain how to use JPolite plugin to develop portal framework in our applications.
We need the following JavaScript files:
- jquery.js: It is jQuery Plugin.
- jquery.ui.js: It is jQuery UI Plugin.
- thickbox.js: It is jQuery Modal Box Plugin.
- jquery.myext.js: It is the extension created by JPolite to Drag and Drop the Components.
- module.js: This file is the backbone of creating the portal framework; it contains the three main sections to configure.
- Module
- Layout
- Tab
Layout: Layout definitions for each tab, means which modules go to which columns under which tab. Syntax: {i:"id_of_the_module (refer to _modules)", c:"column_it_belongs_to (c1, c2, c3)" t:"tab_it_belongs_to (t1, t2, ...)"} Ex: {i:'m101', c:'c1', t:'t1'}
Tab: This section contains the each column width definitions for respective tabs. Valid values are in pixel, % or auto. Currently “auto” is only valid on Column2. Syntax: tabId:{c1:"Width in Pixel, etc” , … , helper:true} Ex: t1:{c1:"33.3%",c2:"33.3%",c3:"33.3%",helper:true}
In my example, the index.html page contains the code to display the Lightweight Portal Framework; it contains the tabs which displays the module layouts. The code is here. Try the example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lightweight jQuery Portal</title>
<link href="main.css" rel="stylesheet" type="text/css"></link>
<link href="thickbox.css" rel="stylesheet" type="text/css"></link>
</head>
<body>
<div id="header">
<div id="logo">
</div>
<div id="title">
A Lightweight Portal Framework based on jQuery</div>
<div id="header_tabs">
</div>
<ul>
<li id="t1">About</li>
<li id="t2">Components</li>
</ul>
<div id="header_bar">
<span class="right">
<img alt="Expand All Modules" id="expd" src="g/module-expand.png" />
<img alt="Collapse All" id="clps" src="g/module-collapse.png" />
</span>
<span class="hint right">Adjust module layout</span>
</div>
</div>
<div id="helper">
</div>
<table id="main_table">
<tr><td style="position: relative;">
<div id="main">
<div class="main_containers" id="c1">
</div>
<div class="main_containers" id="c2">
</div>
<div class="main_containers" id="c3">
</div>
</div>
</td></tr>
</table>
<div id="footer">
<div id="footer_bar">
</div>
</div>
<!-- A hidden module template is carried within the page, which can be modified easily -->
<div class="module" id="module_template" style="display: none;">
<div class="moduleFrame">
<div class="moduleHeader">
<span class="moduleIcon"><img alt="icon" src="g/icon.gif" /></span>
<div class="moduleTitle">
</div>
<div class="moduleActions">
<img alt="Refresh" class="action_refresh" src="g/s.gif" />
<img alt="Collapse" class="action_min" src="g/s.gif" />
<img alt="Expand" class="action_max" src="g/s.gif" />
<img alt="Close" class="action_close" src="g/s.gif" />
</div>
</div>
<div class="moduleContent">
<img alt="Loading..." src="g/loading.gif" /> Loading...
</div>
</div>
</div>
<script src="modules.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.js" type="text/javascript"></script>
<script src="js/jquery.myext.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
</body>
</html>
Leave a Comment