在 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 直接设置内容？

Answer 2

我是 Jquery 的新手，我有一点经验但不多，但是 prodigitalson 提供的解决方案看起来很棒，在我看来，既然你得到了点击事件，你不需要防止默认链接点击？否则，它只会尝试跟随锚中提供的href，对吧？

很抱歉将其发布为答案，但我的声誉不足以发表评论...

Answer 3

JS

    $(function() {  
        /* construct prev/next button */
        $(".dialog div.dialogs").each(function (i) {
            var totalSize = $(".dialog div.dialogs").size() - 1;           
            if (i != 0) {
                prev = i - 1;
                $(this).append("<div class='prev_button'><a href='#tabs' class='prev-tab mover' rel='" + prev + "'>Previous</a></div>");
            }

             if (i != totalSize) {
                next = i + 1;
                $(this).append("<div class='next_button'><a href='#tabs' class='next-tab mover' rel='" + next + "'>Next</a></div>");
            }
        });

        /* next button click */
        $('.next-tab').click(function () {
              var nextDialog= $(this).parent().parent().data("id") + 1;  
              var currentDialog = $(this).parent().parent(); currentDialog.dialog("close");
              $("#dialog"+ nextDialog).dialog();
        });

        /* previous button click */
        $('.prev-tab').click(function () {
              var prevDialog = $(this).parent().parent().data("id") - 1;  
              var currentDialog = $(this).parent().parent(); currentDialog.dialog("close");
              $("#dialog"+ prevDialog).dialog();
        });

        /* intial dialog(first) */
        $( "#dialog1" ).dialog();   
  });

HTML

<div class="dialog" style="display:none">
    <div id="dialog1" class="dialogs" data-id="1" title="dialog1">
      <p>Dialog content1</p>
    </div>
    <div id="dialog2" class="dialogs" data-id="2" title="dialog2">
      <p>Dialog content2</p>
    </div>
    <div id="dialog3" class="dialogs" data-id="3" title="dialog3">
      <p>Dialog content3</p>
    </div>
    <div id="dialog4" class="dialogs" data-id="4" title="dialog4">
      <p>Dialog content4</p>
    </div> 
</div>

插件

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>