Web Development with jQuery®

(^406) ❘ CHAPTER 17 DIALOG
bottom: 0 ;
cursor: w-resize;
}
div.ui-resizable-e {
width: 10px;
right: -10px;
top: 0 ;
bottom: 0 ;
cursor: e-resize;
}
div.ui-resizable-sw {
width: 10px;
height: 10px;
bottom: -10px;
left: -10px;
cursor: sw-resize;
}
div.ui-resizable-s {
height: 10px;
bottom: -10px;
left: 0 ;
right: 0 ;
cursor: s-resize;
}
div.ui-resizable-se {
width: 10px;
height: 10px;
bottom: -10px;
right: -10px;
cursor: se-resize;
}
The preceding style sheet and XHTML are joined with the following JavaScript, Example 17-3.js:
$(document).ready(
function()
{
$('div#exampleDialog').dialog({
title : "Example Dialog"
});
}
);
The preceding styles the jQuery UI Dialog similar to a Mac OS X application window, as shown in
Figure 17-2.
In the preceding example, you learned how to apply styling to the jQuery UI Dialog plugin, which is
inspired by the look of application windows found on Mac OS X.
The example referred to in Figure 17-2 works great in every modern browser, but there is no drop
shadow in older versions of IE, which cannot render the box-shadow property.
http://www.it-ebooks.info