Joomla 3 根据切换器在同一位置显示不同的模块
Joomla 3 Show different modules on same position depending on toggler
我的问题是:
我有一些切换部分。此部分应根据点击的触发器显示动态内容。所以例如。单击 "support",应该会提供一些联系 information/download 支持工具,单击 "search" - 搜索框等
我的问题是是否可以只用一个模块位置或每个触发器需要一个位置来解决这个问题?
希望描述得通俗易懂=)
感谢任何帮助。
谢谢
亚历克斯
更新:
我会尝试用代码来解释:
模块位置:
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;
所以我在这个位置添加了两个 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>
所以我认为这不可能只用一个位置,应该用很多来解决。
如有错误请指正
UPD2:我错了。这是可能的,但不仅是通过模板 - 模块 chrome tempalte 也应该用自己的功能扩展以使其正确呈现。
不确定是否理解您的问题,但如果您的触发器是菜单项,您可以告诉您的模块仅在这些菜单项被 selected 时显示。
进入扩展 -> 模块管理器,select 你想要的模块,然后在模块分配选项卡 -> 模块分配 select "only on the pages selected" 和 select 你想要的菜单条目。
您可以让模块处于相同的位置。只有当分配的菜单条目处于活动状态时,您的模块才会显示在该位置。
HTH
这是可以做到的。您必须为每个模块(分配到同一模块位置)添加一个单独的 class under:
Module Settings -> Advanced -> Module Class Suffix
因此,如果您添加了 suff1
和 suff2
classes,您可以使用以下方式切换它们:
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>
我的问题是:
我有一些切换部分。此部分应根据点击的触发器显示动态内容。所以例如。单击 "support",应该会提供一些联系 information/download 支持工具,单击 "search" - 搜索框等
我的问题是是否可以只用一个模块位置或每个触发器需要一个位置来解决这个问题?
希望描述得通俗易懂=)
感谢任何帮助。
谢谢
亚历克斯
更新: 我会尝试用代码来解释:
模块位置:
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;
所以我在这个位置添加了两个 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>
所以我认为这不可能只用一个位置,应该用很多来解决。
如有错误请指正
UPD2:我错了。这是可能的,但不仅是通过模板 - 模块 chrome tempalte 也应该用自己的功能扩展以使其正确呈现。
不确定是否理解您的问题,但如果您的触发器是菜单项,您可以告诉您的模块仅在这些菜单项被 selected 时显示。
进入扩展 -> 模块管理器,select 你想要的模块,然后在模块分配选项卡 -> 模块分配 select "only on the pages selected" 和 select 你想要的菜单条目。
您可以让模块处于相同的位置。只有当分配的菜单条目处于活动状态时,您的模块才会显示在该位置。
HTH
这是可以做到的。您必须为每个模块(分配到同一模块位置)添加一个单独的 class under:
Module Settings -> Advanced -> Module Class Suffix
因此,如果您添加了 suff1
和 suff2
classes,您可以使用以下方式切换它们:
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>