In my client side development I deal a lot with content that pops over the main page. Be it data entry ‘windows’ or dialogs or simple pop up notes. In most cases this behavior goes with draggable windows, but sometimes it’s also useful
to have closable behavior on static page content that the user can choose
to hide or otherwise make invisible or fade out. Here’s a small jQuery plug-in that provides .closable() behavior
to most elements by using either an image that is provided or – more appropriately by using a CSS class
to define the picture box
layout. /*
*
* Closable
*
* Makes selected DOM elements closable by making them
* invisible when close icon is clicked
*
* Version 1.01
* @requires jQuery v1.3 or later
*
* Copyright (c) 2007-2010 Rick Strahl
* http://www.west-wind.com/
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
Support CSS:
.closebox
{
position: absolute;
right: 4px;
top: 4px;
background-image: url(images/close.gif);
background-repeat: no-repeat;
width: 14px;
height: 14px;
cursor: pointer;
opacity: 0.60;
filter: alpha(opacity="80");
}
.closebox:hover
{
opacity: 0.95;
filter: alpha(opacity="100");
}
Options:
* handle
Element
to place closebox into (like say a header). Use if main element
and closebox container are two different elements.
* closeHandler
Function called when the close box is clicked. Return true
to close the box
return false
to keep it visible.
* cssClass
The CSS class
to apply
to the close box DIV or IMG tag.
* imageUrl
Allows you
to specify an explicit IMG url that displays the close icon. If used bypasses CSS image styling.
* fadeOut
Optional provide fadeOut speed. Default no fade out occurs
*/
(function ($) {
$.fn.closable = function (options) {
var opt = { handle: null,
closeHandler: null,
cssClass: "closebox",
imageUrl: null,
fadeOut: null
};
$.extend(opt, options);
return this.each(function (i) {
var el = $(this);
var pos = el.css("position");
if (!pos || pos == "static")
el.css("position", "relative");
var h = opt.handle ? $(opt.handle).css({ position: "relative" }) : el;
var div = opt.imageUrl ?
$("<img>").attr("src", opt.imageUrl).css("cursor", "pointer") :
$("<div>");
div.addClass(opt.cssClass)
.click(function (e) {
if (opt.closeHandler)
if (!opt.closeHandler.call(this, e))
return;
if (opt.fadeOut)
$(el).fadeOut(opt.fadeOut);
else $(el).hide();
});
if (opt.imageUrl) div.css("background-image", "none");
h.append(div);
});
}
})(jQuery);
The plugin can be applied against any selector that is a container (typically a div tag). The close image or close box is provided typically by way of a CssClass - .closebox by default – which supplies the image as part of the CSS styling. The default styling for the box looks something like this:
.closebox
{
position: absolute;
right: 4px;
top: 4px;
background-image: url(images/close.gif);
background-repeat: no-repeat;
width: 14px;
height: 14px;
cursor: pointer;
opacity: 0.60;
filter: alpha(opacity="80");
}
.closebox:hover
{
opacity: 0.95;
filter: alpha(opacity="100");
}
Alternately you can also supply an image URL which overrides the background image in the style sheet. I use this plug-in mostly on pop up windows that can be closed, but it’s also quite handy for remove/delete behavior in list displays like this:
you can find this sample here
to look
to play along: http://www.west-wind.com/WestwindWebToolkit/Samples/Ajax/AmazonBooks/BooksAdmin.aspx
For closable windows it’s nice
to have something reusable because in my client framework there are lots of different kinds of windows that can be created: Draggables, Modal Dialogs, HoverPanels etc. and they all use the client .closable plug-in
to provide the closable operation in the same way with a few options. Plug-ins are great for this sort of thing because they can also be aggregated and so different components can pick and choose the behavior they want. The window here is a draggable, that’s closable and has shadow behavior and the server control can simply generate the appropriate plug-ins
to apply
to the main <div> tag:
$().ready(function() {
$('#ctl00_MainContent_panEditBook')
.closable({ handle: $('#divEditBook_Header') })
.draggable({ dragDelay: 100, handle: '#divEditBook_Header' })
.shadow({ opacity: 0.25, offset: 6 });
})
The window is using the default .closebox style and has its handle set
to the header bar (Book Information). The window is just closable
to go away so no event handler is applied. Actually I cheated – the actual page’s .closable is a bit more ugly in the sample as it uses an image from a resources file:
.closable({ imageUrl: '/WestWindWebToolkit/Samples/WebResource.axd?d=TooLongAndNastyToPrint', handle: $('#divEditBook_Header')})
so you can see how
to apply a custom image, which in this case is generated by the server control wrapping the client DragPanel.
More interesting maybe is
to apply the .closable behavior
to list scenarios. For example, each of the individual items in the list display also are .closable using this plug-in. Rather than having
to define each item with Html for an image, event handler and link, when the client template is rendered the closable behavior is attached
to the list. Here I’m using client-templating and the code that this is done with looks like this:
function loadBooks() {
showProgress();
// Clear the content
$("#divBookListWrapper").empty();
var filter = $("#" + scriptVars.lstFiltersId).val();
Proxy.GetBooks(filter, function(books) {
$(books).each(function(i) {
updateBook(this);
showProgress(true);
});
}, onPageError);
}
function updateBook(book,highlight)
{
// try
to retrieve the single item in the list by tag attribute id
var item = $(".bookitem[tag=" +book.Pk +"]");
// grab and evaluate the template
var html = parseTemplate(template, book);
var newItem = $(html)
.attr("tag", book.Pk.toString())
.click(function() {
var pk = $(this).attr("tag");
editBook(this, parseInt(pk));
})
.closable({ closeHandler: function(e) {
removeBook(this, e);
},
imageUrl: "../../images/remove.gif"
});
if (item.length > 0)
item.after(newItem).remove();
else
newItem.appendTo($("#divBookListWrapper"));
if (highlight) {
newItem
.addClass("pulse")
.effect("bounce", { distance: 15, times: 3 }, 400);
setTimeout(function() { newItem.removeClass("pulse"); }, 1200);
}
}
Here the closable behavior is applied
to each of the items along with an event handler, which is nice and easy compared
to having
to embed the
right HTML and click handling into each item in the list individually via markup. Ideally though (and these posts make me realize this often a little late) I probably should set up a custom cssClass
to handle the rendering – maybe a CSS class called .removebox that only changes the image from the default box image.
This example also hooks up an event handler that is fired in response
to the close. In the list I need
to know when the remove button is clicked so I can fire of a service call
to the server
to actually remove the item from the database. The handler code can also return false;
to indicate that the window should not be closed optionally. Returning true will close the window.
You can find more information about the .closable class behavior and options here:
.closable Documentation
Plug-ins make Server Control JavaScript much easier
I find this plug-in immensely useful especial as part of server control code, because it simplifies the code that has
to be generated server side tremendously. This is true of plug-ins in general which make it so much easier
to create simple server code that only generates plug-in options, rather than full blocks of JavaScript code. For example, here’s the relevant code from the DragPanel server control which generates the .closable() behavior:
if (this.Closable && !string.IsNullOrEmpty(DragHandleID) )
{
string imageUrl = this.CloseBoxImage;
if (imageUrl == "WebResource" )
imageUrl = ScriptProxy.GetWebResourceUrl(this, this.GetType(), ControlResources.CLOSE_ICON_RESOURCE);
StringBuilder closableOptions = new StringBuilder("imageUrl: '" + imageUrl + "'");
if (!string.IsNullOrEmpty(this.DragHandleID))
closableOptions.Append(",handle: $('#" + this.DragHandleID + "')");
if (!string.IsNullOrEmpty(this.ClientDialogHandler))
closableOptions.Append(",handler: " + this.ClientDialogHandler);
if (this.FadeOnClose)
closableOptions.Append(",fadeOut: 'slow'");
startupScript.Append(@" .closable({ " + closableOptions + "})");
}
The same sort of block is then used for .draggable and .shadow which simply sets options. Compared
to the code I used
to have in pre-jQuery versions of my JavaScript toolkit this is a walk in the park. In those days there was a bunch of JS generation which was ugly
to say the least.
I know a lot of folks frown on using server controls, especially the UI is client centric as the example is. However, I do feel that server controls can greatly simplify the process of getting the
right behavior attached more easily and with the help of IntelliSense. Often the script markup is easier is especially if you are dealing with complex, multiple plug-in associations that often express more easily with property values on a control.
Regardless of whether server controls are your thing or not this plug-in can be useful in many scenarios. Even in simple client-only scenarios using a plug-in with a few simple parameters is nicer and more consistent than creating the HTML markup over and over again. I hope some of you find this even a small bit as useful as I have.
Related Links
Download jquery.closable
West Wind Web Toolkit jQuery Plug-ins
© Rick Strahl, West Wind Technologies, 2005-2010Posted in jQuery ASP.NET JavaScript
