1

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

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但我也无法对其进行格式化。有人可以帮我格式化吗？是否有任何其他选项可用于在确认框中显示列表？

我试过的。

4

3 回答 3

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

于 2013-08-27T09:10:48.323 回答
0

看演示

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();
                        }
                    });
    };
于 2013-08-27T09:13:44.043 回答
0

我知道这已经过时了，但它因手头的问题而受到打击，最终很简单，今天发生在我身上。

我正在使用 .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>
于 2014-01-31T21:56:16.697 回答