Programming

I had a difficult time finding good examples working with the JQuery Portlets, so I created by own. Based on the Portlet Example, here is source code that demonstrates the following features:

Draggable & Sortable
Different Sized Columns
Close Button
Settings Menu
Change Visibility Of Each Portlet
Change Column Widths
Scrollable Portlet Contents

Visit the Live Demo. Download the source code at GitHub.

dashboard.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Sample Dashboard</title>
    <link rel='stylesheet' 
        href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
    <link rel='stylesheet' href='dashboard.css'/>
    <script src="dashboard.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body id="dashboard">
    <div id='header' class="ui-widget-header ui-corner-all ui-widget">
      <div>Dashboard test</div>
      <div id="menu2" class="ui-icon ui-icon-wrench"></div>
      <br class='clear'/>
    </div>
    <div class="demo">
      <div id="window_dialog" class="hidden">
        <fieldset>
          <legend>Column Widths</legend>
          <label>Left:</label><input type='text'  id='c1-width'>
          <label>Middle:</label><input type='text'  id='c2-width'>
          <label>Right:</label><input type='text'  id='c3-width'>
        </fieldset>
        <fieldset>
            <legend>Window Visibility</legend>
        <input type="checkbox"  id="feeds-visible"  /><label>Feeds</label><br/>
        <input type="checkbox" id="shopping-visible"  /><label>Shopping</label><br/>
        <input type="checkbox" id="news-visible"  /><label>News</label><br/>
        <input type="checkbox" id="links-visible"  /><label>Links</label><br/>
        <input type="checkbox"  id="images-visible"  /><label>Images</label><br/>
        </fieldset>
      </div>
    <div class="column1">
      <div id='feeds-portlet' class="portlet">
        <div class="portlet-header">Feeds</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>

      <div id="news-portlet" class="portlet">
        <div class="portlet-header">News</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
    </div>
    <div class="column2">
      <div class="portlet" id='shopping-portlet'>
        <div class="portlet-header">Shopping</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
    </div>
    <div class="column3">
      <div id="links-portlet" class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
      </div>
      <div id="images-portlet" class="portlet">
        <div class="portlet-header">Images</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi 
        </div>
      </div>
    </div>
    </div><!-- End demo -->
  </body>
</html>

dashboard.css


body{min-width: 900px;}
h1{color: red;}
.button{padding: 5px; border: 1px solid gray;}
.column1 { width: 170px; float: left; padding-bottom: 100px; }
.column2 {width: 500px; float: left; padding-bottom: 100px; }
.column3 { width: 170px; float: left; padding-bottom: 100px; }

.portlet { margin: 0 1em 1em 0; }
.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
.portlet-header .ui-icon { float: right; }
.portlet-content { padding: 0.4em; }
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
.ui-sortable-placeholder * { visibility: hidden; }
.portlet-content {
    max-height:200px;
    _height:expression(this.scrollHeight>199?"200px":"auto");
    overflow:auto;
    overflow-x:hidden;
}
.hidden{display: none}
#header{margin-bottom: 5px; padding: 3px}
#header div{float: left;}
#menu2{float:left;}
br.clear{clear:both;}

dashboard.js


var portlets = ["feeds", "shopping", "news", "links", "images"];

$(document).ready(function () {
  $('#menu2').click(function(event) {
    $('#window_dialog').dialog({
        autoOpen: true,
        draggable: false,
        modal: true,
        title: 'Settings',
        buttons: {
            "Save": function () { 
              
              $(portlets).each(function() {
                set_window_visibility(this);
              });
              $(".column1").width(parseInt($('#c1-width').val()));
              $(".column2").width(parseInt($('#c2-width').val()));
              $(".column3").width(parseInt($('#c3-width').val()));
              $(this).dialog('destroy');
            },
            "Cancel": function () {
              $(this).dialog('destroy');
            }
        } 
      });
  });
  function set_window_visibility(name){
    if($('#'+name+'-visible').is(':checked'))
      $('#'+name+'-portlet').show();
    else
      $('#'+name+'-portlet').hide();
  }
  function set_visible_check(name){
    if($('#'+name+'-portlet').is(":visible"))
      $('#'+name+'-visible').each(function(){ this.checked = true; });
    else
      $('#'+name+'-visible').attr("checked", false);
  }
  $( "#settings_dialog" ).bind( "dialogopen", function(event, ui) {

  });
  $( "#window_dialog" ).bind( "dialogopen", function(event, ui) {
    $(portlets).each(function() {
      set_visible_check(this);
    });
    $('#c1-width').val($(".column1").width());
    $('#c2-width').val($(".column2").width());
    $('#c3-width').val($(".column3").width());
  });
});

$(function() {
  $( ".column1" ).sortable({
    connectWith: ".column1, .column2, .column3"
  });
  $( ".column2" ).sortable({
    connectWith: ".column1, .column2, .column3"
  });
  $( ".column3" ).sortable({
    connectWith: ".column1, .column2, .column3"
  });
  $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
      .addClass( "ui-widget-header ui-corner-all" )
      .prepend( "<span  class='ui-icon ui-icon-closethick icon-close'></span><span class='ui-icon ui-icon-minusthick icon-vis'></span>")
      .end()
    .find( ".portlet-content" );

  $( ".icon-vis" ).click(function() {
    $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
    $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
  });
  $( ".icon-close" ).click(function() {
    //$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
    $( this ).parents( ".portlet:first" ).hide();
  });
  $( ".column" ).disableSelection();
});

Steve Pallen's Blog

Working with JQuery Portlets

Using dataforms with xmpp4r pubsub