As in any other programming language, you can do a function to reuse
some behaviour. You can put these in the page or in a js:
function createDialog(dialogID){
$('#'+dialogID).dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
}
and:
function createLink(linkID,dialogID){
$('#'+linkID).click(function(){
$('#'+dialogID).dialog('open');
return false;
});
}
This way you only have to do for all your links:
createDialog('dialog1');
createLink('link1','dialog1');
createDialog('dialog2');
createLink('link2','dialog2');
...
(If you use numbers you can do a bucle for creating the 30 links)
But for opening the dialog you don't need to do that, you can use a
normal button or any image just using its "onclick" event:
<button onclick="openDialog('dialogID');"/>
and
function openDialog(dialogID){
$('#'+dialogID).dialog('open');
}
> > Hi all. COMPLETE newbie - don't even have much basic Javascript
> > experience - and I'm hoping that this is actually a simple question
> > and that someone can point me in the correct direction:
>
> > I am trying to make the dialog function in the same way that it does
> > in the demo page included with the jqueryui custom download. I want to
> > be able to click a link and have the dialog pop up as a result. In the
> > script tags within header of the demo page, this code appears:
>
> > // Dialog
> > $('#dialog').dialog({
> > autoOpen: false,
> > width: 600,
> > buttons: {
> > "Ok": function() {
> > $(this).dialog("close");
> > },
> > "Cancel": function() {
> > $(this).dialog("close");
> > }
> > }
> > });
>
> > // Dialog Link
> > $('#dialog_link').click(function(){
> > $('#dialog').dialog('open');
> > return false;
> > });
>
> > ....which correlates to this link:
>
> > <h2 class="demoHeaders">Dialog</h2>
> > <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-
> > all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
>
> > ...which displays this when clicked:
>
> > <!-- ui-dialog -->
> > <div id="dialog" title="Dialog Title">
> > <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
> > eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
> > minim veniam, quis nostrud exercitation ullamco laboris nisi ut
> > aliquip ex ea commodo consequat.</p>
> > </div>
>
> > I figured out that to make a second link that displays a different
> > message, I can dupe that chunk of script in the header tag and rename
> > the relevant bits to "Dialog2" or whatever in the script and in the
> > new link and dialog text. Problem is - I have, like, 30 links to do
> > this way on a single page. I imagine that there must be a way to do
> > this without having to dupe the header script 30 times.
>
> > I was able to figure out how to use the accordion widget on my own
> > (and even changed some parameters! woo-hoo!), but am stumped by this
> > one. Any advice or links to relevant archive posts would be
> > appreciated. I did search the archives, but didn't find anything that
> > quite made sense (to me).
>
> > Thanks much in advance - Alison
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
