2010-07-23 247 views
0

所以我想讓我的3個單選按鈕,每個彈出一個不同的對話框使用jQuery。 (http://www.regrettablehookups.com/sandbox/contact.php單選按鈕,多個對話框,jquery

這是我在標題:

//Radio Button 
$("#radioset").buttonset(); 
//Button 
$("#dialog_button").button({ 
    icons: { 
     primary: 'ui-icon-newwin' 
    } 
}); 

// Dialog   
$('#dialog').dialog({ 
    autoOpen: false, 
    width: 600, 
    buttons: { 
     "Okay": function() { 
      $(this).dialog("close"); 

     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 


// Dialog Link 
$('#dialog_button').click(function() { 
    $('#dialog').dialog('open'); 
    return false; 
}); 
}); 

和代碼在我的身上:

<div id="radioset"> 
    <input type="radio" id="kevin" name="radio" /><label for="kevin">Kevin</label> 
    <input type="radio" id="natalie" name="radio" /><label for="natalie">Natalie</label> 
    <input type="radio" id="kaitlyn" name="radio" /><label for="kaitlyn">Kaitlyn</label> 
</div> 

謝謝你們! :)

+0

如果您希望代碼看起來更整齊,請突出顯示代碼部分,然後按「代碼」圖標使其變得非常漂亮。我有同樣的問題。 此外,你可以編輯這篇文章到我剛纔所說的轉到標籤旁邊的帖子的底部,它說在淡入淡出的顏色編輯。 – EKet 2010-07-23 17:11:25

回答

2

以下是我會做:

<script type="text/javascript"> 
    $(function() { 
     $("#dialog1").dialog({ 
      autoOpen: false, 
      buttons: { 
       Kevin: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     $("#dialog2").dialog({ 
      autoOpen: false, 
      buttons: { 
       Natalie: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     $("#dialog3").dialog({ 
      autoOpen: false, 
      buttons: { 
       Kaitlyn: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 

     $("#radioset").buttonset(); 
     $('#radioset input:radio').change(function() { 
      var value = $(this).val(); 
      switch (value) { 
       case 'kevin': 
        fireKevin(); 
        break; 
       case 'natalie': 
        fireNatalie(); 
        break; 
       case 'kaitlyn': 
        fireKaitlyn(); 
        break; 
      } 
     }); 
    }); 

    function fireKevin() { 
     $('#dialog1').dialog('open'); 
    } 
    function fireNatalie() { 
     $('#dialog2').dialog('open'); 
    } 
    function fireKaitlyn() { 
     $('#dialog3').dialog('open'); 
    } 
</script> 

<div id="radioset"> 
    <input type="radio" id="kevin" name="radio" value="kevin" /><label for="kevin">Kevin</label> 
    <input type="radio" id="natalie" name="radio" value="natalie" /><label for="natalie">Natalie</label> 
    <input type="radio" id="kaitlyn" name="radio" value="kaitlyn" /><label for="kaitlyn">Kaitlyn</label> 
</div> 

<div id="dialog1">Dialog 1</div> 
<div id="dialog2">Dialog 2</div> 
<div id="dialog3">Dialog 3</div> 

順便說一句,你可以只分享一個對話窗口,所有三個科目,而是根據自己的需要,這樣很容易變得很醜陋快速(比如說,每個主題需要不同的按鈕,或者內部html需要相應更改等)。

+0

太棒了!非常感謝 :) – Kevin 2010-07-23 17:53:31