0

我有一个包含所谓的 portlet (jQuery) 的页面。我想要一个按钮来打开一个包含所有 portlet 数据（包括包含它们的列的 ID）的对话框。

所以我希望对话框看起来像这样：

col1：

portlet 标题：Title1

portlet 内容：Title1 的内容..

portlet 标题：Title2

portlet 内容：Title2 的内容..

col2：

portlet 标题：TIIIIITLE

portlet 内容：TIIIIITLE 的内容

portlet 标题：TIIIIITLE22121

portlet 内容：TIIIIITLE2212 的内容

或类似的东西。重要的部分是如何访问 portlet 数据。

编辑：我添加了这个 jquery（以及下面的一些 html），它打开了一个带有 portlet 数据的对话框，只是它没有做我想要的。如果我有 2 个带有标题/内容 (a/1) 和 (b/2) 的 portlet 并打开对话框，我会得到：ab 12 ab 12。我想要：a 1 b 2。下面的行是需要的要更改，我想在每个语句中使用当前 portlet 的标题/内容。

allContent += $(".portlet-header").text() + '\n' + $(".portlet-content").text() + '\n\n';

更多新的 jQuery

$( "#dialog-form-html" ).dialog({
                autoOpen: false,
                height: 600,
                width: 400,
                modal: true,
                buttons: {
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                }
            });

            $( "#get-html" )
            .button()
            .click(function() {
                var allContent = "";
                $(".portlet").each(function(){
                    allContent += $(".portlet-header").text() + '\n' + $(".portlet-content").text() + '\n\n';                        
                });                    
                $( "#dialog-form-html" ).text(allContent);
                $( "#dialog-form-html" ).dialog( "open" );
            });

jQuery代码：

<script type="text/javascript">


        $(function() {
            var title = $( "#title" ),
            content = $( "#content" ), column = $( "#column" ); 

            $( "#dialog-form" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Add content": function() {                            
                        if(column.val()=='col1'){
                            $( "#col1" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );
                        }
                        else if(column.val()=='col2'){
                            $( "#col2" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );
                        }
                        else if(column.val()=='col3'){
                            $( "#col3" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );                                
                        }
                        else if(column.val()=='col4'){
                            $( "#col4" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );                                
                        }                            
                        else{
                            $( "#tempcol" ).append($('<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">' +
                                '<div class="portlet-header ui-widget-header ui-corner-all">' +
                                '<span class="ui-icon ui-icon-minusthick"></span>' + title.val() + '</div>' +
                                '<div class="portlet-content">' + content.val() + '</div></div>'))
                            $( this ).dialog( "close" );                                
                        } 
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                    //test();
                }
            });

            $( "#add-content" )
            .button()
            .click(function() {
                $( "#dialog-form" ).dialog( "open" );
            });

            $( ".column" ).sortable({
                connectWith: ".column"
            });

            $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
            .find( ".portlet-header" )
            .addClass( "ui-widget-header ui-corner-all" )
            .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
            .end()
            .find( ".portlet-content" ); 

            $( ".column" ).disableSelection();

            $("#centered").on('click', ".portlet-header .ui-icon", function() {
                $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
                $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
            });
        });

    </script>

编辑：我还为新对话框添加了这个 html：

<div id="dialog-form-html" title="Copy html into email">
                <p>
                    test
                </p>
            </div>

HTML：

<body>

    <div id="centered">

        <div id="inset">
            <h1>HALLÅ EKONOMEN</h1>
            <div id="linear" style="padding: 20px"></div>
        </div>

        <div id="dialog-form" title="Create new user">
            <p class="validateTips">All form fields are required.</p>

            <form>
                <fieldset>
                    <label for="title">Title</label>
                    <input type="text" name="title" id="title" class="text ui-widget-content ui-corner-all" />
                    <label for="content">Content</label>
                    <input type="text" name="content" id="content" value="" class="text ui-widget-content ui-corner-all" />
                    <label for="column">Column</label>
                    <select name="column" id="column" class="ui-spinner-down ui-widget-content ui-corner-all">
                        <option value="col1">left sidebar</option>
                        <option value="col2">main</option>
                        <option value="col3">bottom left</option>
                        <option value="col4">bottom right</option>
                    </select>
                </fieldset>
            </form>
        </div>

        <button id="add-content" >Add Content</button>
        <div id="preview">
            <table>
                <tbody>
                    <tr>
                        <!--sidebar-->
                        <td>
                            <div id="col1" class="column">
                            </div>
                        </td>
                        <!--sidebar end-->   
                        <td>
                            <table>
                                <tbody>
                                    <!--main-->
                                    <tr>
                                        <div id="col2" class="column">
                                        </div>
                                    </tr>             
                                    <!--main end-->
                                    <!--bottom colums-->
                                    <tr>
                                        <td style="border-left: 0px; border-bottom: 0px">
                                            <div id="col3" class="column">
                                            </div>
                                        </td>
                                        <td style="border-right: 0px; border-bottom: 0px">
                                            <div id="col4" class="column">
                                            </div>
                                        </td>
                                    </tr>                                    
                                    <!--bottom colums end-->
                                </tbody>
                            </table>
                        </td>           
                    </tr>
                </tbody>
            </table>
            Trash column:<br /><br /><br />
            <div id="trashcol" class="column">
            </div>
        </div>
    </div>
</body>
4

1 回答 1

0

我猜我的问题有点难以理解，但以防万一将来有人需要帮助，我会发布我自己问题的答案。

这个 jQuery 将首先在第 1 列中找到所有 portlet，并且对于其中的每一个，它将取出 header div 标签和 content div 标签的文本。这是针对所有 4 列完成的。在将所有 portlet 文本复制到变量 allContent 之后，我
使用 html(allContent) 设置对话框 html（因为我在 allContent 中添加了一些内容）。这会导致类似：

--Column 1--
header 1 : portlet 1 的内容
header 2- : portlet 2 的内容--Column 2-- header 3 : portlet 3 的内容

--Column 3-- (第 3 列中没有 portlet) --Column 4-- header 4 : portlet 4 的内容 header 5 : portlet 5 的内容 header 6 : portlet 6 的内容








jQuery代码： 

/*Open dialog containing the html code*/

            $( "#dialog-form-html" ).dialog({
                autoOpen: false,
                height: 600,
                width: 400,
                modal: true,
                buttons: {
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                },
                close: function() {
                }
            });

            $( "#get-html" )
            .button()
            .click(function() {
                var allContent = "";
                allContent += "--Column 1-- <br />"
                $("#col1 .portlet").each(function(i,element){
                    allContent += $(this).find(".portlet-header").text() + ": " + $(this).find(".portlet-content").text() + "<br />";                          
                });
                allContent += "<br /><br />--Column 2-- <br />"
                $("#col2 .portlet").each(function(i,element){
                    allContent += $(this).find(".portlet-header").text() + ": " + $(this).find(".portlet-content").text() + "<br /><br />";                          
                });
                allContent += "<br /><br />--Column 3-- <br />"
                $("#col3 .portlet").each(function(i,element){
                    allContent += $(this).find(".portlet-header").text() + ": " + $(this).find(".portlet-content").text() + "<br /><br />";                          
                });
                allContent += "<br /><br />--Column 4-- <br />"
                $("#col4 .portlet").each(function(i,element){
                    allContent += $(this).find(".portlet-header").text() + ": " + $(this).find(".portlet-content").text() + "<br /><br />";                          
                });

                $( "#dialog-form-html" ).html(allContent);
                $( "#dialog-form-html" ).dialog( "open" );
            });
于 2012-10-16T12:15:40.377 回答