Getting Started with jQuery UI Dialogs
So I've been slowly learning jQuery over the last two weeks and today I wanted to see how I could duplicate the cool overlay style and functionality of a cfwindow. As it turns out, jQuery UI makes this super simple with Dialogs.
In this example, I'll show you an easy way to create a jQuery Dialog window that you can invoke by clicking a form button.
First, we have to make sure that we import all of the goodies that we need. Don't forget that you need to reference the jQuery UI library to make this work. Also, please note the link tag where I'm referencing the jQuery ThemeRoller UI-Darkness theme...
2
3 <script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
4
5 <script type="text/javascript" src="jquery/jquery-ui-1.7.2.custom.min.js"></script>
Next, we need a simple JavaScript function that will reference a hidden div named testDialog. The testDialog div is actually holding the content for our dialog.
2
3 showTestDialog = function(){
4 $("#testDialog").dialog();
5 $("#testDialog").dialog('open');
6 }
7
8 </script>
Finally, we have our simple cfform with a button that calls our function which will show a jQuery Dialog using the 'open' method. Pay special attention to the style attribute of our testDialog div as we do not want the contents of the div shown when the page loads.
2 <h1>jQuery UI Dialog</h1>
3
4 <cfform format="html" name="showDialog">
5 <cfinput type="button" name="btnShow" value="Show Custom Dialog" onClick="showTestDialog()">
6
7 </cfform>
8
9 <div id="testDialog" title="jQuery is the hotness..." style="display:none;">
10 <img src="images/test1.jpg">
11 </div>
12 </body>
I've posted a simple example so feel free to click here and try it out for yourself! (Hope you like the picture - LOL)
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]