jquery - 在 jquery UI 对话框中创建动态上一个下一个按钮

Question

我在这个网站和网络上多次搜索过这个内容

是否可以在 jquery 对话框中动态创建上一个和下一个按钮？

我有一个链接列表，我想单击一个链接并打开一个对话框。在该对话框中将有一个上一个和下一个按钮，单击该按钮将关闭当前对话框并在另一个对话框中打开列表中的上一个或下一个项目，依此类推。

类似这样的事情

HTML

<ul id="dialoglist">
  <li>
    <a href="list1.html">
  </li>
  <li>
    <a href="list2.html">
  </li>
  <li>
    <a href="list3.html">
  </li>
  <li>
    <a href="list4.html">
  </li>
</ul>

jQuery

$("ul#dialoglist a").click(function(){
    var link = $(this).attr('href') + " #content";
    var box = $('<div></div>').load(link).dialog({
        buttons: {
            "prev": function() {
                 $(this).dialog('close');
                 //open previous dialog
             },
             "next": function() {
                 $(this).dialog('close');
                 //open next dialog
             }
        }
    });
    $(box).dialog('open');
    return false;
});

谢谢

Answer 1

这样的事情应该有效:

$("ul#dialoglist a").click(function(){
    var a = $(this);
    var link = a.attr('href') + " #content";

    // move button creation here so we can dynamically build 
    // the button hash:

    var aParent = a.parent();
    var buttons = {};
    var prevLi = aParent.prev();
    var nextLi = aParent.next();

    if(prev.length > 0){
      buttons.prev = function(){
        // not sure if this is in the corret scope here - you may need to select by id
        $(this).dialog('close');
        $('a', prevLi).click();
      };
    }

    if(next.length > 0){
      buttons.next = function(){
        / not sure if this is in the corret scope here - you may need to select by id
        $(this).dialog('close');
        $('a', nextLi).click();
      };
    }

    var box = $('<div></div>').load(link).dialog({
        'buttons': buttons
    });
    $(box).dialog('open');
    return false;
});

由于您只是触发上一个/下一个链接上的单击事件，因此您不必担心手动打开对话框。

但是...为什么要打开新对话框而不是使用对话框小部件 api 直接设置内容？