In this tutorial I’ll be showing you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface which has a ton of potential applications!

Instructions

* To move a widget just hold your mouse down over the top coloured bar of the widget and then move it to where you want.
* You can also close a widget by clicking the ‘X’ on the top right of any widget. Collapsing a widget is just as easy; click the down/up arrow on the top left of each widget.
* To edit the color of a widget or it’s title just click the ‘edit’ button.

XHTML Markup:

Each column will be an unordered list (UL) and each widget within the columns will be a list item (LI):

First column:

<ul id=”column1″ class=”column”>

<li class=”widget red”>
<div class=”widget-head”>
<h3>Widget title</h3>
</div>
<div class=”widget-content”>

<p>The content…</p>
</div>
</li>
<li class=”widget blue”>
<div class=”widget-head”>

<h3>Widget title</h3>
</div>
<div class=”widget-content”>
<p>The content…</p>

</div>
</li>
</ul>

CSS Style Sheet:

We’ll be using two CSS StyleSheets, one of them will contain all the main styles and the second StyleSheet will only contain styles required by the JavaScript enhancements. The reason we seperate them like this is so that people without JavaScript enabled do not waste their bandwidth downloading styles which they’re not going to use.

Here is inettuts.css:

/* Reset */
body,img,p,h1,h2,h3,h4,h5,h6,ul,ol {margin:0; padding:0; list-style:none; border:none;}
/* End Reset */

body {font-size:0.8em; font-family:Arial,Verdana,Sans-Serif; background: #000;}
a {color:white;}

/* Colours */
.color-yellow {background:#f2bc00;}
.color-red    {background:#dd0000;}
.color-blue   {background:#148ea4;}
.color-white  {background:#dfdfdf;}
.color-orange {background:#f66e00;}
.color-green  {background:#8dc100;}
.color-yellow h3,.color-white h3,.color-green h3
 {color:#000;}
.color-red h3,.color-blue h3,.color-orange h3
 {color:#FFF;}
/* End Colours */

/* Head section */
#head {
    background: #000 url(img/head-bg.png) repeat-x;
    height: 100px;
}
#head h1 {
    line-height: 100px;
    color: #FFF;
    text-align: center;
    background: url(img/inettuts.png) no-repeat center;
    text-indent: -9999em
}
/* End Head Section */

/* Columns section */
#columns .column {
    float: left;
    width: 33.3%;
 /* Min-height: */
 min-height: 400px;
 height: auto !important;
 height: 400px;
}

/* Column dividers (background-images) : */
 #columns #column1 { background: url(img/column-bg-left.png) no-repeat right top; }
 #columns #column3 { background: url(img/column-bg-right.png) no-repeat left top; }

#columns #column1 .widget { margin: 30px 35px 30px 25px; }
#columns #column3 .widget { margin: 30px 25px 30px 35px; }
#columns .widget {
    margin: 30px 20px 0 20px;
    padding: 2px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}
#columns .widget .widget-head {
    color: #000;
    overflow: hidden;
    width: 100%;
    height: 30px;
    line-height: 30px;
}
#columns .widget .widget-head h3 {
    padding: 0 5px;
    float: left;
}
#columns .widget .widget-content {
    background: #333 url(img/widget-content-bg.png) repeat-x;
    padding: 5px;
    color: #DDD;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    line-height: 1.2em;
    overflow: hidden;
}
/* End Columns section */

In the above CSS we’re also using a min-height hack for each column so that the background images (the dividers) remain intact and so that an empty column can still have widgets dragged back into it:

#columns .column {
    float: left;
    width: 33.3%;

 /* Min-height: */
 min-height: 400px;
 height: auto !important;
 height: 400px;
}

Demo: http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html

Download: http://nettuts.s3.amazonaws.com/127_iNETTUTS/source.zip

Source: http://net.tutsplus.com/tutorials/javascript-ajax/inettuts/

Related Listings:

1. How to Mimic the iGoogle Interface In this tutorial I’ll be showing you how to create...
2. Ajax Tabbed Page Interface There are quite a few Javascript implementations of tabbed interfaces...
3. Pageflakes or Netvibe Ajax IGoogle panes IGoogle, PageFlakes, NetVibes. Beloved child wears many names. Gaia was...
4. jQuery Tabbed Interface Script Nowadays, a lot of websites are using tab based content...
5. iGoogle-like Drag & Drop Portal v2.0 A cool drag & drop class in Prototype in combination...

Do you like this post?

Email: