Introduction
This article explains how to create a Portlet using jQuery.
Portlets are very useful things that we can create in our application, each portlet works separately and we can perform various types of work on different portlets.
Step 1
For this application you need to add two jQuery files and two CSS links that are as follows:
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
You can download these jQuery files by downloading my source code or you can download it from the official jQuery Website.
Step 2
After downloading these and applying these files you need to add this JavaScript code to the head section:
<script>
$(function () {
$(".portlet-window")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-window-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-window-toggle'></span>");
$(".portlet-window-toggle").click(function () {
var symbol = $(this);
symbol.toggleClass("ui-icon-minusthick ui-icon-plusthick");
symbol.closest(".portlet-window").find(".portlet-window-content").toggle();
});
});
</script>
Here I have created a function, in this function I first called a class named ".potlet-window", I have used a few properties of jQuery such as addClass, find, prepend and so on. These properties will find some classes and will apply them depending on their use.
Then I created a click function on the class "portlet-window-toogle'. In this function I declared a variable named "symbol".
After declaring the variable I used the properties such as toggle class and closest.
Now our work on JavaScript is completed and we can work on the Design part.
Step 3
Write this code in the body section:
<body>
<div class="col">
<div class="portlet-window">
<div class="portlet-window-header">First Portal</div>
<div class="portlet-window-content">You are Currently seeing the first Portal,
you can minimize portal to hide me</div>
</div>
<div class="portlet-window">
<div class="portlet-window-header">Second Portal</div>
<div class="portlet-window-content">You are Currently seeing the second Portal,
you can minimize portal to hide me</div>
</div>
</div>
<div class="col">
<div class="portlet-window">
<div class="portlet-window-header">Third Portal</div>
<div class="portlet-window-content">You are Currently seeing the third Portal,
you can minimize portal to hide me</div>
</div>
</div>
<div class="col">
<div class="portlet-window">
<div class="portlet-window-header">Fourth Portal</div>
<div class="portlet-window-content">You are Currently seeing the fourth Portal,
you can minimize portal to hide me</div>
</div>
<div class="portlet-window">
<div class="portlet-window-header">Fifth Portal</div>
<div class="portlet-window-content">You are Currently seeing the fifth Portal,
you can minimize portal to hide me</div>
</div>
</div>
</body>
Here I created three columns, in the first and third columns two div are used but in the second column only one div is used.
These Div are bound to the header and content classes.
Now you can run the application.
Output
On running the application you will get output like this:
![portal using jquery]()
Now if I click on the "short" button then the data will be wrapped up and another sign will be seen that will indicate that you can expand this data.
![portal using jquery]()
The complete code of this application is as follows:
<head runat="server">
<title></title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$(".portlet-window")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-window-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-window-toggle'>
</span>");
$(".portlet-window-toggle").click(function () {
var symbol = $(this);
symbol.toggleClass("ui-icon-minusthick ui-icon-plusthick");
symbol.closest(".portlet-window").find(".portlet-window-content").toggle();
});
});
</script>
</head>
<body>
<div class="col">
<div class="portlet-window">
<div class="portlet-window-header">First Portal</div>
<div class="portlet-window-content">You are Currently seeing the first Portal, you can minimize portal to hide me</div>
</div>
<div class="portlet-window">
<div class="portlet-window-header">Second Portal</div>
<div class="portlet-window-content">You are Currently seeing the second Portal, you can minimize portal to hide me</div>
</div>
</div>
<div class="col">
<div class="portlet-window">
<div class="portlet-window-header">Third Portal</div>
<div class="portlet-window-content">You are Currently seeing the third Portal, you can minimize portal to hide me</div>
</div>
</div>
<div class="col">
<div class="portlet-window">
<div class="portlet-window-header">Fourth Portal</div>
<div class="portlet-window-content">You are Currently seeing the fourth Portal, you can minimize portal to hide me</div>
</div>
<div class="portlet-window">
<div class="portlet-window-header">Fifth Portal</div>
<div class="portlet-window-content">You are Currently seeing the fifth Portal, you can minimize portal to hide me</div>
</div>
</div>
</body>