|
| サマリ | wikiでのjquery_accordion |
|---|
| バージョン | 1.4.7plus-u2-i18n rev1726 |
|---|
| 投稿者 | hyoco? |
|---|
| 状態 | 完了 |
|---|
| 投稿日 | |
|---|
質問
本家の質問箱にも過去に同様の質問質問箱4/381 があるのですが、未解決のままのためこちらで質問させていただきます。
理想としては上記の質問者である武さんと同じくhttp://lucentheartwiki.hardrain.net/さんのメニューバーのようにaccordionを使用することです。
過去の質問を読み自分なりに試した点は以下の通りです。
- http://allabout.co.jp/internet/javascript/closeup/CU20071215A/ を参考にskin/default.skin.phpを変更
<?php if (exist_plugin_convert('js_init')) echo do_plugin_convert('js_init'); ?>
// -->
</script>
<script type="text/javascript" src="<?php echo SKIN_URI.'lang/'.$language ?>.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>default.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>kanzaki.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>ajax/textloader.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>ajax/glossary.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/jquery.easing.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/jquery.dimensions.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/jquery.accordion.js"></script>
下記コードの入力場所、及びphp言語に直さなくていいのかどうかもわからないです；
<script type="text/javascript">
<!--
$(function(){
jQuery.noConflict();
jQuery('#myAccordion1').accordion({event:'mouseover'});
});
//-->
</script>
- style.inc.phpの導入
理想のサイトの編集情報を引用すると
accordionHeader,accordionBody
折りたたみスイッチにしたい見出しを
#style(class=accordionHeader){{
}}
で囲み、そのスイッチによって開きたいコンテンツを
#style(class=accordionBody){{
}}
で囲むと、クリックで折りたたむことが出来るようになります。
・標準では全て開いた状態で表示されます。
・開閉状態はCookieに保存されるため、ユーザーごとの開閉状態設定が維持されます。
・Javascriptを無効にした環境でも全て開いた状態で表示されます。
styleを使用することにより、jquery使用時のdiv囲み代わりが狙いか？
以上です。（もし可能ならjQueryでアコーディオンの入れ子も導入したいと考えています）
ご指導よろしくお願いいたします。
回答
- lucentheartwikiさんの所を参考にaccordionの導入はできたのですが、#style(class=xxx){{#style(class=yyy){{ }} }}のように二重囲みができず、苦戦している状況です。htmlタグで言えば<div class=xxx><div class=yyy>yyy</div><div class=xxx>xxx</div></div>のようにできたらjQueryでアコーディオンの入れ子が実現できそうなのですが・・； アドバイスいただけないでしょうか？ -- hyoco?
- アドバイスではないのですが、自分で専用のプラグインを作ってしまうのはどうでしょうか？ html が分かるなら、php って、そんなに敷居が高いわけでもありませんから。完成したら、拡張プラグインとして公開していただくのも手ですし。まずは、plugin ディレクトリにあるソースを眺めて、関数名や戻り値などを見ていくと、その違いが理解できてくると思います。-- upk
- 複数行プラグインの入れ子ならこういう感じですかね？
0
1
2
3
4
5
6
| #style(class=xxx){{{
#style(class=yyy){{
yyy
}}
#style(class=xxx){{
xxx
}}
}}}
|
 --
- ぉぉ！”{”みっつでくくればいいんですね！解決できました＞＜！ｗ upkさんも名無しさんもアドバイスありがとうございます！ -- hyoco?
- 自分も使ってみたいのですが結果などをまとめて頂けると嬉しいです --
- hyoco? さんではないですが、こちらに「 [[MenuBar に jQuery アコーディオンメニュー を導入する方法>質問箱/349#d543384a]] 」 を付けたさせてもらいました。参考にしてみて下さい。 -- &new{2010-07-10 (土) 19:54:32};
MenuBar に jQuery アコーディオンメニュー を導入する方法
あくまで一例です。実際に導入する際は個々人の好みで調整して下さい。良く分からない場合は導入しないで下さい。
- 使用バージョン・スキン
- バージョン ・・・ 1.4.7plus-u2-i18n rev1726/rev1808
スキン ・・・ default.skin.php/default.css
- 参考
- 注意点
- 少し重くなります。
- JavaScript が 使えるブラウザでないと動作しません。
- JavaScript が無効な場合は全て開いた状態で表示されます。
- menubar （もしくはsidebar）以外に設置しないで下さい。
- 準備
- 作業（パターン1）
- dynamicdrive.com で紹介されているものと、同じデザイン同じ動作をします。
クリックすると開くメニューで、一つ開くと他が閉じます。タイトルには リンク を、隠れる部分にはリストリンクを使用するタイプです。
- １．skin/jquery を作成し、そこにダウンロードしたファイルを置く。
- ２．default.skin.php を以下の様に編集 （ 必ず empty($body_menu) 内に納めて menubar と一緒に生成されるようにして下さい ）。
<?php global $body_menu,$body_side; ?>
<?php if (!empty($body_menu)) { ?>
<td class="ltable" valign="top">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo SKIN_URI ?>jquery/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</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 } ?>
- ３．default.css に以下のスタイルを追加 （ http://sample.domain/ の部分を 自サイトの URL に書き換えて下さい ）。
/* jquery Accordion Menu */
.glossymenu {
width: 158px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu p {
margin: 0;
}
.glossymenu p a, .submenuheader p a {
background: #36F url(http://sample.domain/skin/jquery/glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu p a :visited, .glossymenu p a:active,
.submenuheader p a:visited, .submenuheader p a:active {
color: white;
}
.glossymenu p a:hover, .submenuheader p a:hover {
background-image: url(http://sample.domain/skin/jquery/glossyback2.gif);
}
.submenuheader {
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
}
.submenuheader .statusicon { /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}
#menubar .submenu{ /*DIV that contains each sub menu*/
background: white;
}
#menubar .submenu ul.menu li {
border-bottom: 1px solid blue;
}
#menubar .submenu ul.menu li a {
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}
#menubar .submenu ul.menu li a:hover {
background: #DFDCCB;
color: white;
}
- Tips
- 開閉状態は cookie により記憶されます。
- 作業２に記載されている Script（ddaccordion.init） を調整することで動作を簡単に変更できます。
例：アニメーションの速度、クリック時他のメニューが閉じない様にするなど
- CSS を調整することで 通常文字列や見出し・各種リスト系プラグインをメニュー内に記載することも出来ます。
見出し（ h2 ）を使用した場合は title="" が割り当てられるので poptoc（ページ内見出し表示） にメニューの見出しも載るようになってしまいます（ 除外指定が効かなくなる ）。
見出しのポップアップ機能?を無効にする場合は、質問箱/187。
|
|
![[PukiWiki Plus!]](image/pukiwiki.plus_logo.png "[PukiWiki Plus!]"){kind=logo}
