Question

在我的应用程序中，可以通过选中复选框来选择文档。然后，如果用户点击提交按钮，他会得到一个确认框，显示他选择删除的所有文档。我将所有选定的文档存储在一个数组中。现在我想以格式良好的方式表示文档列表。像

Warning: Below mentioned documents will be deleted, review them and click OK to proceed.

 1. Document 1
 2. Document 2
 3. Document 3
 n. Document n

所以我的确认框应如上所示。由于使用默认confirm框无法完成此操作，因此我使用了jQuery UI dialog，但我也无法对其进行格式化。有人可以帮我完成格式化吗？是否有其他选项可以在确认框中显示列表？

What I've tried

Answer 1

var str="";
for(var i=0;i<arrayis.length;i++){
str+=(i+1)+")"+arrayis[i]+"<br/>";
}


ConfirmDialog("Below mentioned documents will be deleted, review them and click OK to proceed?"+"<br/>"+str);

http://jsfiddle.net/nM3Zc/1003/

Answer 2

参见 demo

var arrayis = new Array();
arrayis = ['document1', 'document2', 'document3'];
var string='Below mentioned documents will be deleted, review them and click OK to proceed <br>';
for(var i=0;i<arrayis.length;i++){
  string+=(i+1)+")"+arrayis[i]+"<br/>";
}
ConfirmDialog(string);

function ConfirmDialog(message){

    $('<div></div>').appendTo('body')
                    .html('<div>'+message+'</div>')
                    .dialog({
                        modal: true, title: 'Warning', zIndex: 10000, autoOpen: true,
                        width: '500px', resizable: false,
                        buttons: {
                            OK: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

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

Answer 3

我知道这已经过时了，但是手头的问题很明显，最终很简单，今天发生在我身上。

我正在使用.text（）而不是.html（）将我的格式化文本字符串添加到我的对话框div中错误的方式：

$( "#dialog-message-div" ).text(str);

这导致它逃脱所有HTML字符...删除格式，但更糟糕的是显示非技术用户“技术”的东西...... HTML！

正确的方式：只需将.text（）更改为.html（），就像魅力一样。

$( "#dialog-message-div" ).html(str);

取自与下载捆绑在一起的jQueryUI示例index.html。

<html lang="us">
<head>
   <meta charset="utf-8">
   <title>jQuery UI Example Page</title>
   <link href="css/redmond/jquery-ui-1.10.3.custom.css" rel="stylesheet">
   <script src="js/jquery-1.9.1.js"></script>
   <script src="js/jquery-ui-1.10.3.custom.js"></script>
   <script>
   $(function() {      
      $( "#dialog" ).dialog({
         autoOpen: false,
         width: 400,
         resizable: false,
         buttons: [
            {
               text: "Ok",
               click: function() {
                  $( this ).dialog( "close" );
               }
            },
            {
               text: "Cancel",
               click: function() {
                  $( this ).dialog( "close" );
               }
            }
         ]
      });
      // Link to open the dialog
      $( "#dialog-link" ).click(function( event ) {
         $( "#dialog" ).dialog( "open" );
         var str = "<p>Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed do eiusmod <i>tempor</i><br /><br /><br />incididunt ut labore et dolore magna aliqua. <br />Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>";
         event.preventDefault();
         //wrong way
         //$( "#dialog" ).text(str);

         $( "#dialog" ).html(str);
      });
   });
      </script>
</head>
<body>
<button id="dialog-link">Dialog Button</button>
<div id="dialog" title="Dialog Title">
</div>

</body>
</html>

在jQueryUI对话框中显示和格式化数组元素

3 个答案: