Tweaking Dijit (Dojo Widgets) for use with JQuery UI and Theme Switcher
The following code demonstrates a way to have Dojo widgets display and
act almost like native jQuery UI controls.The init function is called
10ms after the window has been loaded, which (in most cases) give the
Dojo framework enough time to parse the widgets and turn them into
Dojo widgets (dijits) (does anyone know how to get a handle to a Dojo
callback for when the Dojo parsing lifecycle is complete?)
Then the function changeStyle is called to use jQuery manipulation to
apply jQuery UI specific classes onto said Dijits.
The Theme Switcher (an old one from Filamentgroup is uded here) calls
appendCss, appending the selected Theme specific css to the HEAD
(jquery-ui-1.7.1.custom.css) and also a tundra specific override
version (tundra-jquery-ui-1.7.1.custom.css), which overrides the
background of any dijit within an element with .tundra class. The
background is replaced with the background according to jQuery UI,
while maintaining tundra images, like the spinner arrows etc.
Still ways to go... but I'm sure this is one way you can finally
bridge the gap and get access to a much wider set of widgets for use
with jQuery UI (until these components have a native jQuery UI
replacement).
tundra-jquery-ui-1.7.1.custom.css
--------------
.tundra .ui-state-default { border: 1px solid #777777; background:
#111111 url(images/ui-bg_glass_40_111111_1x400.png) 50% 50% repeat-x;
font-weight: normal; color: #e3e3e3; outline: none; }
--------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Dijit for jQuery UI</title>
<link href="lib/dojo/dojo/resources/dojo.css"
rel="stylesheet" />
<link href="lib/dojo/dijit/themes/dijit.css" rel="stylesheet" /