phpBB掲示板の、表示・非表示機能を最終形としました。

phpBB全般に関するページです
phpBBの管理マニュアルを作成しています
ご訪問ありがとうございます m(_ _)m
画像
BUTTON_POST_REPLY
omasu
管理人
記事: 223
登録日時: 2018年11月14日(水) 21:06

phpBB掲示板の、表示・非表示機能を最終形としました。

投稿記事 by omasu » 2019年1月25日(金) 07:20

 h310125  phpBBの部屋    phpBB掲示板の、表示・非表示機能を最終形としました。

 表示・非表示機能の構築ですが、
 {TEXT1} [ここをクリックすると内容を表示します。]と、
 {TEXT1} [ここをクリックすると非表示にします。]+本文を、
 最終形としたいと思います。

 思考錯誤して試験をしてきましたが、上記の表現が最もわかりやすいと感じました。

[BBcode作成]領域です。

コード: 全て選択

[hide={TEXT1?}]{TEXT2}[/hide]
[Htnl表現]領域は2点を思考錯誤しました。

コード: 全て選択

<div class="codebox">
 <div>
  <a href="javascript:void(0);"
     onclick="
              var el0 = this.parentNode.parentNode.getElementsByTagName('dd')[0];
              var v0 = el0.style.display != 'none';
              el0.style.display = v0 ? 'none' : 'block';
              var el1 = this.parentNode.parentNode.getElementsByTagName('dd')[1];
              var v1 = el1.style.display != 'none';
              el1.style.display = v1 ? 'none' : 'block';
              var el2 = this.parentNode.parentNode.getElementsByTagName('dd')[2];
              var v2 = el2.style.display != 'none';
              el2.style.display = v2 ? 'none' : 'block';
             "
  >
   <dd style="display: block;">
    {TEXT1} [ここをクリックすると内容を表示します。]
   </dd>
   <dd style="display: none;">
    {TEXT1} [ここをクリックすると非表示にします。]
   </dd>
  </a>
  <dd style="display: none;">
   {TEXT2}
  </dd>
 </div>
</div>

コード: 全て選択

<div class="codebox">
 <div>
  <a onclick="
              var a=parentNode.nextSibling.style,
                  b=firstChild.style,
                  c=lastChild.style;
              b.display=a.display;
              a.display=c.display=(b.display)? '' : 'none';
              return!1
             "
  >
   <span>
    {TEXT1} [ここをクリックすると内容を表示します。]
   </span>
   <span style="display:none">
    {TEXT1} [ここをクリックすると非表示にします。]
   </span>
  </a>
 </div>
 <div style="display:none">
  {TEXT2}
 </div>
</div>
一つ目のほうが解りやすいと思いましたが、
ロジックとしては、二つめのほうが良いと感じたので、
二つめを採用することにしました。

ヘルプライン領域は以下にしました。

コード: 全て選択

表示・非表示を切り替えます。[hide]本文[/hide] または [hide=説明文]本文[/hide]
表示試験用の実行結果です。 表示試験用のコードです。

コード: 全て選択

[hide=説明文]
 本文1
 本文2
[/hide]
[hide]
 本文1
 本文2
[/hide]

omasuHP ホームページ
omasuBB 掲示板
omasuBLOG ブログ

このページに表示してしまいますが、[戻る]ボタンで戻ってこれます
※phpBBには[別ページにリンク]する[target="_blank"]機能は無いようです

BUTTON_POST_REPLY