1. 首頁
  2. 問答
  3. 如何獲取頁面上的所有jQuery-portlet數據？

如何獲取頁面上的所有jQuery-portlet數據？

2012-10-14 33 views
0

我有一個包含所謂portlet（jQuery）的頁面。我想要一個按鈕來打開一個包含所有portlet數據的對話框（包括包含它們的列的id）。如何獲取頁面上的所有jQuery-portlet數據？

所以我想在對話框看起來像這樣：

COL1：

portlet標題：標題1

portlet內容：標題1的內容..

門戶標題：標題2

portlet內容：山雀內容LE2 ..

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>

編輯：我還添加了這個網站的新對話框：

​​3210

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>

來源

2012-10-14 Erik L

回答

0

我猜我的問題是有點難以理解，但以防萬一有人需要幫助，這在未來我會後回答我自己的問題。

這個jQuery將首先找到列1中的所有portlet，併爲每個portlet取出標題div標記和內容div標記的文本。這是爲所有4列完成的。在將所有portlet文本複製到變量allContent後，我將html（allContent）設置爲對話框html（因爲我向allContent添加了
）。這導致這樣的：

--column 1--
頭1：門戶1的內容
頭2-：門戶2

--column 2--
頭3的含量：門戶的內容3

--column 3-- （沒有在第3欄中的portlet）

--column 4--
頭4：門戶4的內容
集管5：與c門戶5的ontent
頭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-16 12:15:40

相關問題

 相關問題