1

私の問題があります：

トグルセクションがあります。このセクションには、クリックされたトリガーに応じて動的コンテンツが表示されます。だから例えば。「サポート」をクリックすると、連絡先情報やサポート ツールのダウンロードが表示されます。「検索」をクリックすると、検索ボックスなどが表示されます。

私の質問は、これを1つのモジュール位置だけで解決できるか、またはトリガーごとに1つの位置が必要かということです?

これを理解できるように説明したいと思います =)

どんな助けでも大歓迎です。

ありがとう

アレックス

UPD：コードで説明しようとします：

モジュール位置:

   if ($this->countModules('pos-1')) : 
        $module = JModuleHelper::getModules( 'pos-1' );
        foreach($modules as $m) : ?>
            <section class="mod_%echo $m->title%">
                <jdoc:include type="modules" name="pos-1" style="xhtml" />
            </section>
        endforeach;
    endif;

そしてトリガー：

if ($this->countModules('pos-1')) : 
    $module = JModuleHelper::getModules( 'pos-1' ); 
    foreach($module as $m) :
        <a class="btn-collapse collapsed" role="button" data-toggle="collapse" data-parent="#accordion" 
        href="#echo $m->title;" aria-expanded="true" aria-controls=" echo $m->title;">
            <i class="fa fa-building-o"></i> <? echo $m->title; ?>
        </a>                        
    endforeach;
endif;

したがって、この位置に 2 つの CustomHTML モジュールを追加しました。

結果:

<section ... class="mod_title1">
    content mod_one
    content mod_two
</section>
<section ... class="mod_title2">
    content mod_one
    content mod_two
</section>

<a ... href="#mod_title1" ...>  mod_title1 </a>
<a ... href="#mod_title2" ...>  mod_title2 </a>

そして、次のようにする必要があります。

<section ... class="mod_title1">
    content mod_one
</section>
<section ... class="mod_title2">
    content mod_two
</section>

<a ... href="#mod_title1" ...>  mod_title1 </a>
<a ... href="#mod_title2" ...>  mod_title2 </a>

ですから、これは1つのポジションだけでは不可能であり、多くのポジションで解決する必要があると思います.

間違っている場合は修正してください。

UPD2: 私は間違っていました。これは可能ですが、テンプレートを介してだけではありません。モジュール chrome tempalte を独自の関数で拡張して、正しくレンダリングする必要があります。

4

2 に答える 2

1

これは可能です。以下の下で、（同じモジュール位置に割り当てられた）各モジュールに個別のクラスを追加する必要があります。

Module Settings -> Advanced -> Module Class Suffix

したがって、クラスを追加suff1した場合は、次suff2を使用してそれらを切り替えることができます。

jQuery(document).ready(function() {
  jQuery("div.suff1, div.suff2").on("click", function() {
    jQuery(this).parent().children().toggle();
  });
});
div {
  width: 180px;
  height: 100px;
  color: white;
}
div.suff1 {
  background: orange;
  display: none;
}
div.suff2 {
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="suff1">Module 1</div>
  <div class="suff2">Module 2</div>
</div>

于 2015-07-20T11:07:02.577 に答える