Jump to content

how can i shorten the following ?


Recommended Posts

It could be shortened by changing the HTML a bit:

HTML

<button class="opener" data-dialog="1">open the dialog</button><div id="dialog1" class="dialog" title="Dialog Title">I'm a dialog</div><button class="opener" data-dialog="2">open the dialog 2 </button><div id="dialog2" class="dialog" title="Dialog Title">I'm a dialog 2</div><button class="opener" data-dialog="3">open the dialog 3 </button><div id="dialog3" class="dialog" title="Dialog Title">I'm a dialog 3</div>

Javascript

$( ".dialog" ).dialog({ autoOpen: false });$( ".dialog" ).dialog( "option", "width", 500 );$( ".dialog" ).dialog( "option", "height", 400 );$( ".opener" ).click(function() {    var selector = "#dialog" + $(this).data("dialog");    $(selector).dialog( "open" );});
Link to post
Share on other sites

Change id ref to classes

<button class="opener">open the dialog</button><div class="dialog" title="Dialog Title">I'm a dialog</div><button class="opener">open the dialog 2 </button><div class="dialog" title="Dialog Title">I'm a dialog 2</div><button class="opener">open the dialog 3 </button><div class="dialog" title="Dialog Title">I'm a dialog 3</div>

use index of button with class 'opener' to reference its 'dialog' box index

$( ".dialog" ).dialog({ autoOpen: false });$( ".opener" ).click(function() {        //$('.dialog').dialog( "close" ); //will close all opened dialog box before opening new one if needed   var curr_open_index = $('.opener').index(this)    $('.dialog:eq('+curr_open_index +')').dialog( "open" );});$( ".dialog" ).dialog( "option", "width", 500 );$( ".dialog" ).dialog( "option", "height", 400 );

No extra attributes, in fact you lose one the id ref

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...