2011-07-11 31 views
0

我有一些HTML弹出一个jQuery UI模式:Push功能,以对象的前面字面

<a href="my/url" class="popup">Click me</a> 

有了这段JavaScript代码:

$('.popup').click(function() { 
    var a = this; 

    var dialog = $('<div>').load($(a).attr('href'), function() { 
     var form = dialog.find('form'); 

     dialog.dialog({ 
      modal: true, 
      title: $(a).attr('title'), 
      buttons: { 
       Add : function() { 
        $.post($(form).attr('action'), $(form).serialize()); 
        dialog.dialog('close'); 
       }, 
       Cancel: function() { 
        dialog.dialog('close'); 
       } 
      } 
     }); 

     if ($(a).attr('data-third')) { 
      // Add here a button 
     } 
    }); 
    return false; 
}); 

的想法是在模态资源包含表格,在提交表格时提交。现在,当<a href="my/url" class="popup" data-third="Add & new">Click me</a>存在时,意味着第三个按钮按以下顺序放置在模式中:Cancel | Add | Add & new

我试过这段代码:

if($(a).attr('data-third')) { 
    var buttons = dialog.dialog('option', 'buttons'); 
    buttons[$(a).attr('data-third')] = function(){ 
     // Callback here 
    } 
    dialog.dialog('option', 'buttons', buttons); 
} 

我有一个新的按钮,但顺序Add & new | Cancel | Add。我如何确保订单是Cancel | Add | Add & new

回答

0

有了这个代码,你应该总是让取消|添加|新增&新? (从左至右

$('.popup').click(function() { 
    var a = this; 

    var dialog = $('<div>').load($(a).attr('href'), function() { 
     var form = dialog.find('form'); 

     dialog.dialog({ 
      modal: true, 
      title: $(a).attr('title'), 
      buttons: { 
       Cancel: function() { 
        dialog.dialog('close'); 
       }, 
       Add: function() { 
        $.post($(form).attr('action'), $(form).serialize()); 
        dialog.dialog('close'); 
       } 
      } 
     }); 

     if ($(a).data('third')) { 
      var buttons = dialog.dialog('option', 'buttons'); 
      console.log(buttons); 
      buttons[$(a).data('third')] = function() { 
       // Callback here 
      } 
      dialog.dialog('option', 'buttons', buttons); 
     } 
    }); 
    return false; 
}); 

小提琴这里:http://jsfiddle.net/rqq2p/1/

别忘了使用数据(),而不是ATTRIB()来得到该链接的属性

编辑 - 基本上 “按钮”!是一个对象,每个属性是按钮之一,我认为按钮的顺序是添加属性的顺序,在我的例子中,取消是最左边的按钮,因为它是第一个添加的属性,并添加&新的它是最右边的,因为它是最新的。如果你需要摆弄顺序你可以c reate一个新的对象,然后在命令添加的属性你想要的:

if ($(a).data('third')) { 
     var buttons = dialog.dialog('option', 'buttons'); 
     var newButtons = {}; 
     newButtons[$(a).data('third')] = function() { 
      // Callback here 
     } 
     newButtons['Cancel'] = buttons['Cancel']; 
     newButtons['Add'] = buttons['Add']; 
     dialog.dialog('option', 'buttons', newButtons);//now add & new should be the leftmost 
    } 
+0

感谢快速回复,但对我来说,这并不工作(顺序变成添加和新,添加,取消)。唯一的变化就是取消订单|添加你所做的,对吗?我有jQuery 1.4.4,jQuery UI 1.8.11。还有关于data()的好建议,不知道! –

+0

我编辑了我的答案,我试着jsfiddle与jquery 1.4.4,它的工作,我编辑我的答案与一些额外的信息 –

+0

确实是正确的。应该虽然那:) –

0

未经检验的,但我想数组键应该是buttons.length这样

if($(a).attr('data-third')) { 
    var buttons = dialog.dialog('option', 'buttons'); 
    buttons[buttons.length] = function(){ 
     // Callback here 
    } 
    dialog.dialog('option', 'buttons', buttons); 
} 
+0

没有,按钮是一个对象,而不是阵列 –