タブメニューについて

2012年4月22日 at 23:39

添付したようなタブメニューをconcrete5で実装したいのですが、
どのようにしたらよいでしょうか。

添付画像は、下記のサイトのキャプチャーです。
http://5am.jp/jquery/jquery_ui_tabs/

編集画面は、添付画像のquestion2のように、したいと思っています。
（カラム１つ１つをエリアに割り当てるというやり方です。
記事ブロックを使う方法は無しで実現したいと思っています）

実は、自分で、添付の画像question2、3のように実装を試みたのですが、
ちょっとうまくいきませんでした。
（添付のブロックは、タブメニュー部分です。その中にjavascriptとcssを入れています。
　↑このやり方がまずいのかな・・・）

もしかして、他に良いプラグインがありますか？
あったら是非教えてください。
よろしくお願いします。

タグ:

返信

takuro hishikawa

Re: タブメニューについて

2012年4月23日 at 1:46

うまくいかない理由は色々思い当たるのですが、先ずどううまく行かないのか、を書きましょう！
とりあえずブロックの中にJavascriptを入れるのはやめたほうがいいと思います。
理由1: テーマにid="box-tub"、ブロックに$('#box-tub ul').tabs();と書くのは何か違和感…。片方だけあっても動かないし。
理由2: concrete5はデフォルトでjQuery UIを使っています。ログイン中は</body>の直前で読み込まれていると思います。ブロックに入ってるjQuery UIは<head>に入ります。2回読み込まれることになるのでエラーになります。Javascriptは読み込まれるとすぐ実行されるので読みこむ順番もシビアです。

というわけでおすすめは、タブのJavascriptはテーマに直接書く。そしてログイン中はタブのJavascriptが出ないようにする。

<?php $u = new User();
if ($u->isRegistered()) : ?>
<script src="<?php echo $this->getThemePath(); ?>/js/ui.core.js"></script>
<script src="<?php echo $this->getThemePath(); ?>/js/ui.tabs.js"></script>
<script src="<?php echo $this->getThemePath(); ?>/js/tabs1.js"></script>
<?php endif; ?>

アドオンもあります。
http://www.concrete5.org/marketplace/addons/easy-tabs/

返信

medaka

Re: タブメニューについて

2012年4月23日 at 19:58

こちらのメンバーの山野井さん（山野井研究室）に

http://www.yamanoi.org/concrete5/download/extcontent/

　このようなブロックがあります

返信

kumin.min

Re: タブメニューについて

2012年4月23日 at 23:53

hissyさん、確かにうまく行かない状況をもう少し説明すべきでしたね。

原因を端的に言うと、CSSのdisplay:noneが原因で、それをマークアップしたカラムが編集画面の時点で、消えてしまうという所にあるようです。

concrete5では、編集画面で、CSSが効いてしまうのですかね？

もう少し詳しく言うと、このタブメニューの性質上、（タブが３つあった場合）１つのタブに付随するカラム（内容）以外の２つのカラムはCSSでdisplay:noneにする事になりますが、その２つのカラムが編集時に消えてしまう、という現象が起きていたようです（添付question1）。

前回アップしたブロックにはブロック内にjavascriptを入れていますが、最初にタブメニューの実装を試みた時点では、ヘッダー部分に読み込みをさせていました。
プラス、html上では、それが動く事を確認しているので、javascriptの順番も問題ないと思います。
（タブメニューもカラム（内容）もすべて１つの記事ブロックで実現したら、動きましたよ。でも、それじゃ、だめなんです・・・１つのカラムにエリアを割り当てたいのです）

そんな訳で、行き詰まっていたのですが・・・
Easy Tabsプラグインで、できましたよ。
（添付画像のquestion5）
hissyさん、情報ありがとうございました。

medakaさんも、プラグイン情報ありがとうございます。
（ちょっとこれを見るのが遅かったです・・・）
山野井さんも作っていたのですね。
しかもただ？
すばらしい。
後でインストールしてみますね。

返信