締切済み

PukiWikiでAccordionが動かない。

2014/09/27 21:27

お世話になります。 pukiwiki 1.4.7を利用しており、メニューバーの項目が多くなってきたため、綺麗に表示させたいと思い、jqueryを利用したAccordion機能を実装しようと試みています。そこで、下記サイトをお手本に色々と編集してみました。 ■質問箱/349 http://pukiwiki.cafelounge.net/plus/?%E8%B3%AA%E5%95%8F%E7%AE%B1%2F349 cssは正常に反映出来ているようなのですが、いざpukiwikiを開くと、メニューバーの隠れている部分が全て表示されており、動くはずの部分をクリックするも、スライドせず考えている動作をしない状況です。恐らく、jsが正常に読み込まれていないのではないか？と感じているのですが、正直お手上げ状態です。お手数ではございますが、ご教示頂けないでしょうか。大変困っています。（それともpukiwiki plus!でしか動かないのでしょうか。） ■実画面 http://www.tenmusu.org/pso3/index.php?FrontPage

tenmusu423
お礼率60% (3/5)

PHP
回答数5
ありがとう数10

みんなの回答 （5）
専門家の回答

みんなの回答

agunuz
ベストアンサー率65% (288/438)

2014/09/29 13:03 回答No.5

Pukiwikiでメニューを表示させるときは文字列$body_menuに内容を入れるのが『作法』のようですね。 http://www.tantin.jp/pukiwiki/%E3%82%B9%E3%82%AD%E3%83%B3%E4%BD%9C%E3%82%8A%E5%9F%BA%E7%A4%8E.html ＃スキン製作まではやらないので知りませんでしたが（汗条件によって $body_menu にセットしたりしなかったり（あるいは内容を変えたり）という手法が採れるようにとの配慮でしょう。質問者さんは$body_menuを使わずに（内容が null なので）直書きで表示させていると推測されます。なので $body_menu のチェックをしても意味がありません。チェックを外すべきだと思います。

agunuz
ベストアンサー率65% (288/438)

2014/09/29 07:05 回答No.4

>上記で合っている認識で反映させて見たところNULLがTOPページ上部に表示されました。ということは ><?php if (!empty($body_menu)) { ?> を書いていると出力されないのが当然ですね。この if 文を書かれた理由はなんでしょうか（$body_menu に何が入っている予定だったのでしょうか）。「毎回必ず出力する」なら、if 文で括る必要もないと思います。

質問者

お礼 2014/09/29 11:31

ありがとうございます。 >を書いていると出力されないのが当然ですね。この if 文を書かれた理由はなんでしょうか（$body_menu に何が入っている予定だったのでしょうか）。「毎回必ず出力する」なら、if 文で括る必要もないと思います。参照したWebには必ず記載するようにとございましたため、記載した次第です。結局のところ、先に記載させて頂いたソースではAccordion機能は実装することは出来ないのでしょうか。 htmlはわかるのですが、phpは正直触れた事がないので感覚で操作してみている状況です。書かれている通りに記述すれば出来ると思っていたのですが…。 >■質問箱/349 >http://pukiwiki.cafelounge.net/plus/?%E8%B3%AA%E5%95%8F%E7%AE%B1%2F349 この記事自体も2010年が最終投稿日のようでして、上げたとしてもレスが返ってこないような気がして、こちらで質問させて頂いた次第です。（念のため、質問箱の方でも伺ってみます。）

agunuz
ベストアンサー率65% (288/438)

2014/09/28 21:02 回答No.3

><?php if (!empty($body_menu)) { ?> ということは、$body_menu がempty なのでは？var_dump($vody_manu)で確認してください。

質問者

お礼 2014/09/29 02:21

ありがとうございます。 <?php if (!empty($body_menu)) { ?> の記載を、<?php if (var_dump($body_manu)) { ?>に変更してみるということでよろしいでしょうか。上記で合っている認識で反映させて見たところNULLがTOPページ上部に表示されました。

agunuz
ベストアンサー率65% (288/438)

2014/09/28 06:31 回答No.2

>下記の記述を、sukin/pukiwiki.skin.php中の<head>タグの直後に記載しているだけです。＃skin/pukiwiki.skin.phpですよね記載している内容がサイトのhtmlに反映されていません（動作がどうこうではなく、ブラウザに返ってきているhtmlソースで判断）。 Pukiwikiはこのあたりの内容をキャッシュしたりはしないハズです（自分のPukiwikiで確認しましたが、記載した内容はすぐに反映されました）ので、編集するファイルを間違えているか、キチンとアップロード出来ていないかくらいしか思い当たりません。

質問者

補足 2014/09/28 14:28

コメントありがとうございます。わかりやすく記載させて頂きますと、下記コードをskin/pukiwiki.skin.phpに入力しております。当該ファイルの保存時刻や、サーバ上のファイルを見る限り、ソースとしては反映はされているのですが…。何が行けないのか、皆目検討がつきません。 <head> <?php global $body_menu,$body_side; ?> <?php if (!empty($body_menu)) { ?> <td class="ltable" valign="top"> <script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/jquery.min.js"></script> <script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/ddaccordion.js"></script> <script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='<?php echo SKIN_URI ?>jquery/plus.gif' class='statusicon' />", "<img src='<?php echo SKIN_URI ?>jquery/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <div id="menubar"><?php echo $body_menu; ?></div></td> <?php } ?> <?php echo $meta_content_type ?> <meta http-equiv="content-style-type" content="text/css" /> <?php if ($nofollow || ! $is_read) { ?> <meta name="robots" content="NOINDEX,NOFOLLOW" /><?php } ?> <?php if (PKWK_ALLOW_JAVASCRIPT && isset($javascript)) { ?> <meta http-equiv="Content-Script-Type" content="text/javascript" /><?php } ?> <title><?php echo $title ?> - <?php echo $page_title ?></title>

agunuz
ベストアンサー率65% (288/438)

2014/09/27 23:04 回答No.1

>恐らく、jsが正常に読み込まれていないのではないか？と感じているのですが、 htmlソースを見た限りでは、jsファイルの読み込み記述が存在していません。skin/pukiwiki.skin.phpをどのように編集したのでしょうか？

質問者

お礼 2014/09/28 01:50

コメントありがとうございます。追加補足ですが、 <script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/jquery.min.js"></script> jquery.min.jsについては、<?php echo SKIN_URI ?>jquery/の階層に保存してあります。外部接続なしのイントラ内で使用することを想定しているためです。

質問者

補足 2014/09/28 01:48

下記の記述を、sukin/pukiwiki.skin.php中の<head>タグの直後に記載しているだけです。 menu生成直後に読み込ませる必要があるとのことだったため、<head>直後に書き込みをしました。 <?php global $body_menu,$body_side; ?> <?php if (!empty($body_menu)) { ?> <td class="ltable" valign="top"> <script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/jquery.min.js"></script> <script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/ddaccordion.js"></script> <script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='<?php echo SKIN_URI ?>jquery/plus.gif' class='statusicon' />", "<img src='<?php echo SKIN_URI ?>jquery/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <div id="menubar"><?php echo $body_menu; ?></div></td> <?php } ?>

関連するQ&A

PukiWIki 1.4.5_1のメニューバーを右にもってくる方法。
こんばんは。早速ですが質問させていただきます。私は、PukiWikiを使用いるサイトを持っているのですが、通常左側にあるメニューバーを右側に持ってくるには、どのファイルのどの部分を変更したらよいのでしょうか？何度見ても調べてもわからなかったので質問しました。よろしくおねがいします。 PukiWikiのバージョンは 1.4.5_1 です。
- ベストアンサー
- PHP
Pukiwikiで、メニュー部分の日本語・英語の切り替え機能を追加した
Pukiwikiで、メニュー部分の日本語・英語の切り替え機能を追加したいと考えています。プラグインなど検索しましたが、やり方がわかりません。PHP初心者です。 pukiwikiのバージョンは、1.4.7です。メニュー部分のみの切替で、ページ自体は1ページのままにしたいです。（同じページに、日本語、英語両方を記載しているため）イメージは、下記URLのページ右上にあるJapanse/Englishの切替です。（こちらは、本文の部分も切り替わっていますが、メニュー部分だけの切替を作りたいです） http://www.platonicwave.com/pukiwiki/index.php?cmd=nego&page=nego%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3%B3%AB%C8%AF%A5%C6%A5%B9%A5%C8%A5%DA%A1%BC%A5%B8%A2%F6&skin=./skin/pukiwiki.skin.php&mode=jp どのようにカスタマイズすればよいのでしょうか？詳しい方、教えてください（＞＜）！上記機能の追加が難しいようでしたら、日本語環境で閲覧するとメニューが日本語でそれ以外で閲覧すると自動的に英語表記に切り替わるような設定をしたいと考えています。こちらもわかる方、ぜひ教えてください。よろしくお願いいたします。
- 締切済み
- PHP
■pukiwikiについての質問です。
pukiwikiをプロバイダーのホームページスペースでFTPを利用してインストール？利用しています。そこで質問なんですが、トップページのアドレス表示部分がおかしいのを直す方法を教えてくれませんか？ http://www.abc.de.jp/~aiueo/index.php?%A4%CA%A4%BC%A5%D9%A5%B9%A5%C8%A4%F2%BF%D4%A4%AF%A4%B5%A4%CA%A4%A4%A4%CE%A4%AB このようにwikiの題名の下に表示されています。 http://www.abc.de.jp/~aiueo/index.php と表示するにはどうしたらいいのでしょうか？
- ベストアンサー
- PHP
jqueryによるアコーディオン表示
http://liginc.co.jp/web/js/jquery/34048 上記サイトを参照してjqueryによるアコーディオン表示をやってみました。上記サイトのデモではアコーディオンメニューをクリックするとその下に「アコーディオンメニューが開く」という文字列が表示されます。しかし、私の環境ではその文字列がアコーディオンメニューより右にずれて表示(下記表示イメージ) されてしまいます。【表示イメージ】アコーディオンメニュー１　　　　アコーディオンメニューアコーディオンメニュー２　　　　アコーディオンメニューアコーディオンメニュー３　　　　アコーディオンメニュー下記が実際に書いたHTMLなのですがCSSをどのように修正すればデモのようにアコーディオンメニューが表示されますでしょうか。また、下記サンプルではアコーディオンメニュー１が開いたときに表示する文字列を改行しているのですが<BR>タグで開業すると１行目と２行目の間が大きく開いてしまいます。 line-height　を調整すれば行間の隙間が調整できるのですが１行目の位置まで変更されてしまいます。１行目の位置はそのままに、行間の隙間を調整することはできますでしょうか。【HTML】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#acMenu dt").click(function() { $(this).next().slideToggle(); $(this).toggleClass("active"); }); }); </script> <title>CSS</title> <style type="text/css"> #acMenu dt{ display:block; width:250px; height:50px; line-height:50px; text-align:center; border:#666 1px solid; cursor:pointer; background:url(../images/i_swich.png) 220px -69px no-repeat; padding-right:15px; } #acMenu dd{ background:#f2f2f2; width:250px; height:150px; line-height:50px; text-align:center; border:#666 1px solid; display:none; } #acMenu dt.active{ background:url(../images/i_swich.png) 220px 18px no-repeat; } </style> </head> <body> <dl id="acMenu"> <dt>アコーディオンメニュー1</dt> <dd>アコーディオンメニュー1が開く。<BR>改行した。</dd> <dt>アコーディオンメニュー2</dt> <dd>アコーディオンメニュー2が開く。</dd> <dt>アコーディオンメニュー3</dt> <dd>アコーディオンメニュー3が開く。</dd> </dl> </body> </html>
- ベストアンサー
- CSS
jqueryのアコーディオンメニューについて
jqueryのアコーディオンメニューを利用してるのですが、項目を３つから２つに減らすためliタグを削除したのですが、その部分が空欄となり、思うようにいきません。３つあって２つが繰り上がり下がブランクのメニューがあります。 elemnt.styleという箇所でheightが６７ピクセルに設定されているようですが、発見できず、困っております。もしよろしければ教えて頂けると助かります。
- 締切済み
- JavaScript
アコーディオンメニューの開閉制御
私webデザイナーをしています。アコーディオンメニューで（開くのは１つのパネルのみ）ページ遷移してもアコーディオンの開いている部分が閉じないものを作りたいと思っています。しかし、下記のコードでどうしても実装できません。技術のある方、間違いを教えていただけないでしょうか？【ｈｔｍｌ】 <dl class="accordion_dl"> <dt>アコーディオンメニュー.1</dt> <dd>アコーディオンメニュー.1のテキスト表示</dd> <dt>アコーディオンメニュー.2</dt> <dd>アコーディオンメニュー.2のテキスト表示</dd> <dt>アコーディオンメニュー.3</dt> <dd>アコーディオンメニュー.3のテキスト表示</dd> <dt>アコーディオンメニュー.4</dt> <dd> <ul> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> <li>リスト挿入</li> </ul> </dd> </dl> 【JS】 jQueryとjquery.cookie.jsを読み込んでいます。 for (var i=0; i < $(".accordion_dl dt").length; i++) { if( $.cookie("accord" + i) == "open" ) { $(".accordion_dl dt").eq(i).next("dd").show(); } } $('.accordion_dl dt').click(function(){ $(this).toggleClass("open"); $(this).siblings("dt").removeClass("open"); $(this).next("dd").slideToggle(); $(this).next("dd").siblings("dd").slideUp(); n = $(".accordion_dl dt").index(this); if ($.cookie("accord" + n) == "open") { $.cookie("accord"+n,"close", {path:"/"}); } else { $.cookie("accord"+n,"open", {path:"/"}); } }); よろしくお願いいたします。
- 締切済み
- JavaScript
jQuerey、アコーディオンメニューに関して
質問させて頂きます。 jQueryの知識が乏しいため、質問の内容がザックリとなってしまい申し訳ありませんが、ご存知の方は回答頂けると助かります。 jQueryにてアコーディオンメニューで検索すると、多くのプラグインが用意されています。今回もそういったプラグインを使用して、アコーディオンメニュー(のようなもの？)を作成したいと考えています。ですが、今回私が作成したいと考えているのは、ボタンをクリックした際に表示される領域が、最初から少しだけ表示されている状態にしておきたいと考えています。＜例＞ //1行目部分は最初から表示 ■■■■■■■■ 1行目 ---------------- ↓■部分をクリックすると、スライドして2行目と3行目も表示 ■■■■■■■■ 1行目 2行目 3行目 ---------------- 全て表示or全て隠れているといった形のアコーディオンプラグインであれば、検索してすぐに見つかるのですが、上記のような1行目のみ表示された状態といったことが出来るプラグインは見つけられずにいます。 jQueeryの知識も乏しく、自分で作成するということも厳しいので、そういったことの出来るプラグイン、または、方法など教えて頂ければ幸いです。質問の内容的に回答が難しいかもしれませんが、ご存じの方がいらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- JavaScript
CentOS5.3にpukiwikiをインストールして仲間内で見られる
CentOS5.3にpukiwikiをインストールして仲間内で見られる簡単な掲示板を作成しています。掲示板としては機能しているのですが，自作のhtmlファイルをpukiwiki上に公開しようとしたところうまくいかないため教えていただきたく。現在Windows Vistaで作成したhtmiファイルを資料として公開出来るようにCentOS内の /var/www/html/hp 等に保存し，pukiwikiで作成したリンクから辿れるようにしたいと考えています。素人考えで，以下の情報などを参考に試してみたのですがうまく機能してくれせん。 http://lunatear.net/archives/000988.html http://pukiwiki.sourceforge.jp/dev/?PukiWiki%2F1.4%2F%A4%C1%A4%E7%A4%C3%A4%C8%CA%D8%CD%F8%A4%CB%2F%A5%ED%A1%BC%A5%AB%A5%EB%A5%D5%A5%A1%A5%A4%A5%EB%A4%D8%A4%CE%A5%EA%A5%F3%A5%AF%A4%E2%C4%A5%A4%EA%A4%BF%A4%A4 状況的には，Internet Explorer7で開くと，｢Internet Explorerではこのページを表示出来ません｣と表示される状況です。問題切り分けのためパーミッションを777にもしたのですが変化ありませんでした。 1ヶ月前からpukiwikiを触り始めた素人のため，とんでもない勘違いをしているかもしれませんが，よろしくご教授下さい。
- ベストアンサー
- PHP
アコーディオンメニューをアンカーリンクで開く
アコーディオンメニューで困っています。色々と調べているのですが、どうもうまく動きません。 ■やりたい事アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。 ■現状・アンカーリンク(A.html)-------------------- <a href="B.html#アンカー名">リンク</a> ・アコーディオン設置先(B.html)------------------ <div class="aaa" id="アンカー名"> <p class="title"> アコーディオンタイトル </p> <p class="bbb"> アコーディオンの内容表示 </p> </div> ・js--------------------------------------- $(document).ready(function(){ $(".bbb").hide(); $(".title").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); $(location.hash).next(".bbb").slideToggle("slow"); }); }); 現状はこのような状態なのですが、アンカーでの動作をしてくれません。分かる方いらっしゃいましたら、是非教えてください
- ベストアンサー
- JavaScript
スマホ向けHP div要素の開閉（アコーディオン）
現在、スマホ向けのHPを作成しており、添付のように、グラデ部分のバーをタップすると、隠れている要素が、表示/非表示されるアコーディオンメニューを作成したいのですが、簡単なHP制作の知識しかなく、困り果てており、実装方法を知りたく、質問させていただきました。何とぞよろしくお願いいたします。やりたいこととしては、（１）バー部分は常に横１００％で表示される。ベタ一色ではなく、添付のようにグラデーションをかける。（２）バーのタイトルの頭にアイコン画像を表示させる（３）開閉によって、右端の矢印アイコンも切り替わる（４）隠れている要素は、テキストだったり画像だったり、コンテンツによって色々参考にしたサイト http://www.rurubu.com/season/spring/sakura/detail.aspx?SozaiNo=340004 （スマホ閲覧時）以上何とぞよろしくお願いいたします。
- 締切済み
- CSS

PukiWikiでAccordionが動かない。