1

根据 Sortable Portlets 的 JQuery 示例代码，最小化功能已经存在。我添加了可排序的功能，它确实有效，但不如预期。在我调整 portlet 的大小后，最小化按钮只会隐藏文本并且不会切换 portlet 的边框。

这是我的代码：

HTML

<div class="column">
  <div class="portlet">
    <div class="portlet-header">Calls</div>
    <div class="portlet-content">test Calls content</div>
  </div>
  <div class="portlet">
     <div class="portlet-header">Phone</div>
     <div class="portlet-content">test Phone content</div>
  </div>
  <div class="portlet">
      <div class="portlet-header">Contacts</div>
      <div class="portlet-content">test Contacts content</div>
   </div>
 </div>

查询

$( ".column" ).sortable({ connectWith: ".column", delay: 150,placeholder: "ui-state-highlight" });

$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('') .end() .find(".portlet-content");

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

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

有任何想法吗？正如我在调整大小后所说的，最小化按钮只是隐藏了内容，并没有切换相应 portlet 的边框。谢谢你

4

1 回答 1

0

以防万一其他人偶然发现这个问题（我之前遇到过这个问题，谷歌并没有太多帮助来阻止这个孤独的未回答的帖子），诀窍是重新调整父 .portlet 面板 css 的大小。我已经解决了这个问题，但我确信有一个更优雅的解决方案：

$(".portlet-header .ui-icon-minusthick").click(function () {
    if($(this).hasClass("ui-icon-minusthick") == true)
    {
        $(this).removeClass("ui-icon-minusthick");
        $(this).addClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").slideToggle();
        $(this).parents(".portlet:first").animate({height: "40px"}, 500);
    }
    else
    {
        $(this).removeClass("ui-icon-plusthick");
        $(this).addClass("ui-icon-minusthick");
        $(this).parents(".portlet:first").animate({height: "300px"}, 500);
        $(this).parents(".portlet:first").find(".portlet-content").slideToggle();
    }
});

希望这对仍在谷歌搜索的人有所帮助！

于 2014-01-03T15:33:49.800 回答