I downloaded the jQuery UI library a few weeks back (should have done it earlier too). I started playing around with it, but work has been so busy did not get much time to look at it. Finally, found some time to do a basic tabs, accordians, sliders, progress bar demo. Its very basic, good start to learing how some of the things work.
The progress bar demo is probably the most complex one, so code for it follows.
For the progress bar, the main idea was to find a way to increment the value of the bar. This is done using the setTimeout method.
2 //Set Progress Bar
3 $(function(){
4 $("#progressbar").progressbar({
5 value:0
6 });
7 $("#progressvalue").html("0");
8 //Use setTimeout to call checkValue function
9 setTimeout(checkValue,500);
10 });
11
12 //Get current value, increment it if needed to update Progressbar.
13 //Recursive function calls using setTimeout
14 function checkValue(){
15 var currentValue = $("#progressbar").progressbar("option","value");
16 currentValue = currentValue + 20;
17 if (currentValue <= 100) {
18 updateValue(currentValue);
19 $("#progressvalue").html(currentValue);
20 setTimeout(checkValue,500);
21 }else
22 //100% loaded, now load sliders.cfm page
23 {
24 $("#content").load("sliders.cfm");
25 }
26 }
27 //Show the progress bar value
28 function updateValue(newValue){
29 $("#progressbar").progressbar("option","value",newValue);
30 }
31 </script>
32
33 <div id="content">
34
35 <div id="progressbar">
36
37 </div>
38
39 <div id="progressvalue">
40
41 </div>
42
43
44 </div>
So setTimeout is called every 500 ms, as long as the value is less than 100. You probably have to change the code a bit if your increments are not by values that would make the bar reach a value of 100. When the value reaches 100 we use the jQuery load function to load our sliders.cfm page.
I hope to build on this more, especially want to see how the tabs integrate with my jqGrid examples and also interacting with ColdFusion pages.