連絡先ページ 'Alphabet Bar'
Joomla 3.6.5
連絡先ページに「アルファベットバー」を表示したいのですが、メニュー項目のタイプはList Contacts in a Categoryです。
連絡先が150あり、すべて同じカテゴリに属しています。現在、私のページには、ページごとに合計20の連絡先が表示されます。
理想的には、以下のバーのようなものが欲しいです。
| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O..
バーは、私が想定している2つの方法のいずれかで機能します。
- 文字がクリックされると、ページには対応するフィルタリングされた結果が表示されます。
OR
- すべての連絡先を1つのページに表示し、文字をクリックすると、ページが対応する文字に自動スクロールします。
/html/com_contact/category/default_items.phpでオーバーライドを作成しました-現在、次のようになっています。
<?php
/**
* @package Joomla.Site
* @subpackage com_contact
*
* @copyright Copyright (C) 2005 - 2016 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
JHtml::_('behavior.core');
$listOrder = $this->escape($this->state->get('list.ordering'));
$listDirn = $this->escape($this->state->get('list.direction'));
// Create a shortcut for params.
$params = &$this->item->params;
?>
<?php if (empty($this->items)) : ?>
<p> <?php echo JText::_('COM_CONTACT_NO_CONTACTS'); ?> </p>
<?php else : ?>
<form action="<?php echo htmlspecialchars(JUri::getInstance()->toString()); ?>" method="post" name="adminForm" id="adminForm">
<fieldset class="filters">
<?php if ($this->params->get('show_pagination_limit')) : ?>
<div class="display-limit">
<?php echo JText::_('JGLOBAL_DISPLAY_NUM'); ?> 
<?php echo $this->pagination->getLimitBox(); ?>
</div>
<?php endif; ?>
<input type="hidden" name="filter_order" value="<?php echo $listOrder; ?>" />
<input type="hidden" name="filter_order_Dir" value="<?php echo $listDirn; ?>" />
</fieldset>
<table class="category clergy-contact">
<?php if ($this->params->get('show_headings')) : ?>
<thead><tr>
<th class="item-title">
<?php echo JHtml::_('grid.sort', 'COM_CONTACT_CONTACT_EMAIL_NAME_LABEL', 'a.name', $listDirn, $listOrder); ?>
</th>
<?php if ($this->params->get('show_position_headings')) : ?>
<th class="item-position">
<?php echo JHtml::_('grid.sort', 'COM_CONTACT_POSITION', 'a.con_position', $listDirn, $listOrder); ?>
</th>
<?php endif; ?>
<?php if ($this->params->get('show_email_headings')) : ?>
<th class="item-email">
<?php echo JText::_('JGLOBAL_EMAIL'); ?>
</th>
<?php endif; ?>
<?php if ($this->params->get('show_telephone_headings')) : ?>
<th class="item-phone">
<?php echo JText::_('COM_CONTACT_TELEPHONE'); ?>
</th>
<?php endif; ?>
<?php if ($this->params->get('show_mobile_headings')) : ?>
<th class="item-phone">
<?php echo JText::_('COM_CONTACT_MOBILE'); ?>
</th>
<?php endif; ?>
<?php if ($this->params->get('show_fax_headings')) : ?>
<th class="item-phone">
<?php echo JText::_('COM_CONTACT_FAX'); ?>
</th>
<?php endif; ?>
<?php if ($this->params->get('show_suburb_headings')) : ?>
<th class="item-suburb">
<?php echo JHtml::_('grid.sort', 'COM_CONTACT_SUBURB', 'a.suburb', $listDirn, $listOrder); ?>
</th>
<?php endif; ?>
<?php if ($this->params->get('show_state_headings')) : ?>
<th class="item-state">
<?php echo JHtml::_('grid.sort', 'COM_CONTACT_STATE', 'a.state', $listDirn, $listOrder); ?>
</th>
<?php endif; ?>
<?php if ($this->params->get('show_country_headings')) : ?>
<th class="item-state">
<?php echo JHtml::_('grid.sort', 'COM_CONTACT_COUNTRY', 'a.country', $listDirn, $listOrder); ?>
</th>
<?php endif; ?>
</tr>
</thead>
<?php endif; ?>
<tbody>
<?php foreach ($this->items as $i => $item) : ?>
<tr class="<?php echo ($i % 2) ? "odd" : "even"; ?>" itemscope itemtype="https://schema.org/Person">
<td class="item-title">
<?php if ($this->items[$i]->published == 0) : ?>
<span class="label label-warning"><?php echo JText::_('JUNPUBLISHED'); ?></span>
<?php endif; ?>
<a href="<?php echo JRoute::_(ContactHelperRoute::getContactRoute($item->slug, $item->catid)); ?>" itemprop="url">
<span itemprop="name"><?php echo $item->name; ?></span>
</a>
</td>
<?php if ($this->params->get('show_position_headings')) : ?>
<td class="item-position" itemprop="jobTitle">
<?php echo $item->con_position; ?>
</td>
<?php endif; ?>
<?php if ($this->params->get('show_email_headings')) : ?>
<td class="item-email" itemprop="email">
<?php echo $item->email_to; ?>
</td>
<?php endif; ?>
<?php if ($this->params->get('show_telephone_headings')) : ?>
<td class="item-phone" itemprop="telephone">
<?php echo $item->telephone; ?>
</td>
<?php endif; ?>
<?php if ($this->params->get('show_mobile_headings')) : ?>
<td class="item-phone" itemprop="telephone">
<?php echo $item->mobile; ?>
</td>
<?php endif; ?>
<?php if ($this->params->get('show_fax_headings')) : ?>
<td class="item-phone" itemprop="faxNumber">
<?php echo $item->fax; ?>
</td>
<?php endif; ?>
<?php if ($this->params->get('show_suburb_headings')) : ?>
<td class="item-suburb" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="addressLocality"><?php echo $item->suburb; ?></span>
</td>
<?php endif; ?>
<?php if ($this->params->get('show_state_headings')) : ?>
<td class="item-state" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="addressRegion"><?php echo $item->state; ?></span>
</td>
<?php endif; ?>
<?php if ($this->params->get('show_country_headings')) : ?>
<td class="item-state" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="addressCountry"><?php echo $item->country; ?></span>
</td>
<?php endif; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php if ($this->params->get('show_pagination', 2)) : ?>
<div class="pagination">
<?php if ($this->params->def('show_pagination_results', 1)) : ?>
<p class="counter">
<?php echo $this->pagination->getPagesCounter(); ?>
</p>
<?php endif; ?>
<?php echo $this->pagination->getPagesLinks(); ?>
</div>
<?php endif; ?>
</form>
<?php endif; ?>
誰か私がこれを達成する方法についてアドバイスできますか？
次の記事 を読みましたが、連絡先ではなくカテゴリに関連しています。
さて、オーバーライドでは、行47および49で、 <li>タグが表示されます。両方の中に、次のデータ属性を追加します。
data-category="<?php echo substr($this->escape($item->name), 0, 1); ?>"
次に、行111で、</ul>の終了タグが表示されます。このすぐ下に、次のものを追加してアルファベットリストを作成します。
<?php
$alphas = range('A', 'Z');
foreach ($alphas as $item)
{
echo '<a href="#" data-alpha="' . $item . '">' . $item . '</a> | ';
}
?>
そのすぐ下で、JSを使用して、クリックされた文字に基づいてカテゴリを表示/非表示にすることができます。
<?php
JFactory::getDocument()->addScriptDeclaration("
jQuery(document).ready(function($) {
$('a[data-alpha]').on('click', function(e) {
e.preventDefault();
$('[data-category]').hide();
$('[data-category=\"' + $(this).attr('data-alpha') + '\"]').show();
});
});
");
?>
ここにプレビューがあります：
お役に立てれば
これはあなたの質問への直接の答えではないことを知っていますが、あなたが望むことを正確に行う無料のモジュールがあります：
http://www.aftercube.com/demo/free-extensions/ac-contacts
乾杯！
また、Lodderの優れた投稿にいくつかの変更を加え、すべてのアイテムのリストに戻りました。
echo '| <a href="#" data-alpha="000">All</a> | ';
$alphas = range('A', 'Z');
foreach ($alphas as $item)
{
echo '<a href="#" data-alpha="' . $item . '">' . $item . '</a> | ';
}
そしてJSスクリプトの場合：
JFactory::getDocument()->addScriptDeclaration("
jQuery(document).ready(function($) {
$('a[data-alpha]').on('click', function(e) {
e.preventDefault();
if ($(this).attr('data-alpha') === '000') {
$('[data-category]').show();
} else {
$('[data-category]').hide();
$('[data-category=\"' + $(this).attr('data-alpha') + '\"]').show();
}
});
});
");