Question

根据可排序Portlet的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>

JQUERY

$（“。column”）。sortable（{connectWith：“。column”，delay：150，占位符：“ui-state-highlight”}）;

$（“。portlet”）。addClass（“ui-widget ui-widget-content ui-helper-clearfix ui-corner-all”）       .find（ “portlet的报头”）       .addClass（“ui-widget-header ui-corner-all”）       .prepend（ ''）        。结束（）        .find（ “portlet的内容。”）;
  $(".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的边框。谢谢

Answer 1

以防万一其他人偶然遇到这个问题（我之前遇到过这个问题，谷歌没有太多帮助阻止这个孤独的未回复的帖子），诀窍是重新调整父.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();
    }
});

希望这有助于任何人仍然谷歌搜索它！

jquery ui portlet（可排序）调整大小并最小化

1 个答案: