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;
});

由于您只是在prev / next链接上触发click事件，因此您不必担心手动打开对话框。

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

Answer 2

我是Jquery的新手，我有一些经验但不多，但提供的解决方案prodigitals看起来很棒，在我看来，因为你得到点击事件，你不需要阻止默认链接点击？否则，它只会尝试跟随锚中提供的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>

PLUGGINS

<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>

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

3 个答案:

JS

HTML

PLUGGINS