API: http://docs.jquery.com/UI Actually, the Demos area of the jqueryui.com site works much better as a reference, because it has drill-downable summary lists of optins, events, etc. http://jqueryui.com/demos/ GOTCHA: If using float (perhaps only with relative positioning???), need to apply a work-around as implemented by ui-helper-clearfix class. To use, need to load: INSTALLING Use the Builder on the jqueryui.com site and download the *.custom.zip. For production usage, zap the development-bundle dir branch and index.html. Probably want to wipe js/jquery-.min.js and point your pages to a shared copy somewhere. INSTALLING ADDITIONAL THEMES Go to http://jqueryui.com/themeroller/ and click Gallery. Select your desired theme from the panel on the left and download (unfortunately you have to download the entire friggin' product build). You must select all options that you really will read. That only effects css//jquery-ui-.custom.css, but that's "the" theme style sheet. Extract just the dir branch css/ from *-custom.zip to your content area that contains "css" from your original build extraction like so: cd unzip -x path/to/new/*custom.zip 'css/*' USING OPTIONS Give an option map as parameter for the jo.() method. THEME ROLLER For creating custom themes. Not many tutorials concentrating on jqueryui generally. Trying this one: http://www.ibm.com/developerworks/web/library/wa-aj-jquery5/index.html PARTS theme roller Styles. Use theme roller to see them all. positioning. Generally position any element relative to anything. widgets effects interactions (expanded mouse/element) STYLING and ICONS You generally do not set classes for widgets. You apply styles to non-widget elements for consistency to the jquery them and the jquery widgets. Example:

your txt

Click on desired style in the Theme Roller gallery to see its available classes. See http://docs.jquery.com/UI/Theming/API for types of classes, though there are no usage tips. To emulate jquery ui widget stylings. (but see below re. overlay+shadow) .ui-widget Beware that this sets a font very huge (even for buttons, but esp. bad for normal text content areas, and ui-widget-content does not correct this. .ui-widget-content (For text areas, use this w/o .ui-widget). .ui-widget-header .ui- .ui--content (for widgets with content) .ui--header (for widgets with headers) .ui-corner-all: rounds corner of border (if any) .ui-button-disabled (in step with attr.disabled) .ui-state-*'s GENERALLY: These are not mutually exclusive. E.g. *-default + *-focus. .ui-state-* for CLICKABLE BUTTON-LIKE ELEMENTS hover focus active ui-state-disabled (in step with attr.disabled) .ui-state-* for CLICKABLE BUTTONS disabled dimmed opacity primary bolds BUTTON secondary slight transparency BUTTON .ui-state-* for all. See "Example" above. These add a border! default SET THIS CLASS FOR ALL OF YOUR BUTTONS AND a LINKS! N.b. this "grays out", making for less contrast than B on W. highlight error error-text w/o background .ui-state-hover. Use like: jo.hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); THIS STYLES OVERLAID TEXT:
STYLES CUE FOR OVERLAID BASE THIS ADDS SHADOW:
SKIP FOR NO SHADOW THE POSITIONING IN THIS TAG IS WHAT ACTUALLY CAUSES "OVERLAY":
YOUR CONTENT!
Critical things are the style settings in the 2 divs that have them. both have position:absolute shadow size is difference between of widths and heights. top and left of both are equal, and are the offsets from base El. TODO: Automate the sizings and positionings using JQuery core + jqueryui position. POSITIONING jo.position({props}) posValue: one of: "top", "center", "bottom", "left", "right" Empirically, it looks like margin of 'this' is completely ignored. Properties my: "posValue posValue" // alignment position of this at: "posValue posValue" // alignment position against of: El/Jo/Event/selector // against what This takes non-Element items like 'window'. Awesome! (Unfortunately, I know of no way to read/determine offsets from right or bottom edge of window.) offset: "50" or "50 50" // left + top. Single value means both. collision: "flip" or "fit" | "none" What to do if overflows using: mapFn = function({left:x, top:y) { return option hash? } EFFECTS. All are 1-time events. E.g. the item bounces stops bouncing. Easing Enhancements. Docs suck. http://gsgd.co.uk/sandbox/jquery/easing/ How to enable? Read up! SYNTAX: jo.show|hide|toggle|effect("effectName"[, {options}][, millis]); show/hide effects. Just add the effect name as param to jo.show()/hide()/toggle(). 9 of 'em. standalone effects. 6 of 'em. PROBLEM: Effected items get Moved drastically! Doesn't matter if I wrap in a , button vs. input/button. TODO: Make sure problem still happening on test file on beyla. Try relative positioning. animate() extended to colors, where color values like: "#FF0000", or rgb(255,255,255), or "black". CLASS EFFECT ENHANCEMENTS Classes take 2 additional params: speed[, easing], callback addClass("className", speed[, easing], callback) removeClass("className", speed[, easing], callback) toggleClass("className", speed[, easing], callback) togglelass("className", switch, speed[, easing], callback) This last is like animate(). INTERACTIONS *able. 5 of 'em. draggingJos.xable({options}); draggable: completely intuitive. Probably need a callback fn to actually change the Elements' location at the end. droppable: The "droppable" element really is "drop-ontoable". opts: { accept: "selector", activeClass: "className" (of draggables), drop: dropFn } dropFn = function(event, ui) { $(this) is this "drop-ontoable" El, ui.draggable is the draggable El. } WIDGETS Classes like div.ui-widget, div.ui-datepicker, div.ui-widget-content Cons. Syntax: $(sourceJo).([{options}]); [N.b. never .("string"...) because those are widget methods:] + methods invoked this funny way .("METHODNAME"[,...]); Following methods generally available, + others listed in API under General Widget Methods: ("option"... val = widgetJo.("option", "optionName"); widgetJo.("option", "optionName", val); or widgetJo.("option", {name: val,...}); ("destroy") // Exc! Deallocates widget and returns // source element back to its original state ("disable") ("enable") ("widget") // Returns the orig. source widget. Useless? ("resize") You must instantiate the widget before you can invoke the instance methods. E.g.: $("x").dialog({autoOpen:false});... $("x").dialog("methodName"); accordion: Only one expanded at a time. Content els must all be right after the header els, but other elements may be after contents and before headers. Header els must be block els to look right. Content els may be anything. Header elements of h* or a work automatically, otherwise use Options header: "selector". Methods: widgetJo.accordion("activate", index) to programmatically select. See API about how to customize styling. slider: You slidify a div. Options: min: defaults to 0, max: defaults to 100, change: fn fn = function(event, ui) {; // event.originalEven can determine how triggered ui.value ui.handle Methods: widgetJo.slider("value"[, value]) to detect or programmatically set. widgetJo.slider("value", index, [values]) ditto datepicker: Options: changeMonth: bool, // defaults to false for some damned reason changeYear: bool, // defaults to false for some damned reason dateFormat: "dd/mm/yyyy" // For the text display Methods: widgetJo.datepicker("getDate") progressbar: Works with percentage values. Options: value: Can apparently get or set value through option or explicit method. Methods: widgetJo.progressbar("value"[, value]) to detect or set. dialog: Make any Element into a dialog. Either give the source element a title attr. or set title option of dial. GOTCHA: If you specify the source as HTML text, then only the very first element will be dialoged! The source element will be the BODY of the new dialog; The new wrapping dialog div element has class "ui-dialog", plus dialogClass if you specify one. Instantiating a dialog removes it from normal page layout and opens it. Therefore, except for cases where you want to show the dialog when the page loads, you will want to either instantiate the entire Element programmatically or dialogify it with autoOpen off at load time. Options: autoOpen defaults to true buttons: [{button1: properties}, {button2: properties},...] EXAMPLE: buttons: { Ok: function() { $(this).dialog("close") } } buttons: {text1: clickFn, text1: clickFn,...} clickFn = function(event) { 'this' is the dialog element, event.target is the button closeOnEscape defaults to true dialogClass: "className" draggable: defaults to true hide: "hideEffect" show: "showEffect" modal: defaults to false position: various, defaults to "center" title: apparently overrides the source El title width: 500 // I think will need this if not setting own line breaks. ("Events" are just options that take as value a callback function. Params that handler get are event and misc. The misc param is called "ui" in API, but is that is extremely misleading because is is just a map with very event-specific elements. For example, open and close are empty maps, and resizeStop has beginning and ending positions and sizes. I will document the misc. elements for the EVENTS I list below, but you will have to examine the obj yourself for other events (I recommend that you use my dumpKeys() function). The context ('this') inside event handler functions is the source element, not the generated widget div element wrapper. ). EVENTS: create (0 misc. elements) open (0 misc. elements) beforeClose (0 misc. elements) close (0 misc. elements) resizeStop 'misc' has keys originalPosition, originalSize, position, size buttonset: Apply to any container element to group buttons. This .button()s all of the contained buttons! button: Apply to any button-like, a element, checkboxes, radios. NO ICONS SUPPORTED for input/button, input/submit, input/reset! Use real