1

ソート可能なポートレットの JQuery サンプル コードによると、最小化機能は既に存在します。ソート可能な機能を追加しましたが、機能しますが、期待どおりではありません。ポートレットのサイズを変更した後、最小化ボタンはテキストを非表示にするだけで、ポートレットの境界線を切り替えません。

これは私のコードです:

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>

Jクエリ

$( ".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();

何か案は？私が言ったように、サイズ変更後、最小化ボタンはコンテンツを非表示にするだけで、それぞれのポートレットの境界線を切り替えません。ありがとうございました

4

1 に答える 1

0

他の誰かがこの問題に出くわした場合に備えて (私は以前にこの質問に出くわしましたが、Google はこの孤独な未回答の投稿を阻止するのにあまり役立ちません)、秘訣は親の .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 に答える