開閉式をページ内の通常のHTMLにしたい

質問

JavaScriptで開閉式をページ内の通常のHTMLタグにするにはどうしたらいいでしょうか？

この目次を作るJavaScriptですが右上の目次を押すと開閉します。

http://www.skuare.net/test/jToc.html

これを開閉式ではなく、通常のHTMLファイルのように任意の位置にタグが生成されるようにしたいのですがどこを変更すればいいでしょうか？

http://www.skuare.net/test/js/jquery.jqTOC.js

よろしくお願いいたします。

この質問に補足する

回答No.1

fujillin · ベストアンサー

jsファイルの内容は見てませんが…

◇方法1
jsの内容を解析して、自分の利用しやすいようにカスタマイズする。

◇方法2
ご質問の内容程度であれば、まず、もともとの機能にある、tocAutoClose、tocShowOnClickをoffに指定することで開閉しなくなります。
さらに、目次部分はdiv id="toc_container"としてposition:absoluteで追加されているみたいですから、一旦、目次を作成させておいて、後からdiv全体を好きな位置に移動させてしまうということにすれば、方法1のような解析やカスタマイズが不要になると思われます。

例えば、表示したいところに
　<div id="box_for_toc"></div>
を置いてあるとして、

　$("#toc_container").css("position", "static");
　$("#box_for_toc").append($("#toc_container"));

で、そのdivの中に目次が移動します。

大元の配布元は（オプション設定なども）こちら
　http://solidgone.org/Jqtoc

ところで、『 この質問に補足する 』ってなあに？

お礼

ありがとうございました。

補足

ご回答ありがとうございます。

開閉しないでロードしたときに最初からずうっと表示させたままにすることや好きな位置に表示することは出来たのですが、

その方法の表示位置指定だと、いちいちpaddingのtopやleftといったもので表示位置をピクセル指定しないといけないので汎用性が悪くなり、変更したいと思っています。

たとえば、ページによってヘッダーに大きな画像をせたりした場合は重なって汎用性が低くなります。

たとえば、先のサンプルサイトでスタイルシートにpadding-topを100pxにしたら、１００ピクセル下に表示されますが、それだとコンテンツの量が変わっても必ず上から１００ピクセル下に目次が表示されます。

本文の場合は相対的にヘッダーの分量により、位置が自動的に変わります。それと同じようにしたいです。

また広告がつくサイトの場合は、その広告の位置によってヘッダーのサイズが変わって絶対位置指定している目次と重なったりします。
ページの分量自体は個々のページによって変わってくるので絶対位置では困ります。

絶対位置指定になってしまう問題は見る人の画面のサイズによってオートセンタリングしたい場合も絶対位置なので必ずピクセルで指定した決まった位置になるのでセンタリングができません。

初期のように絶対位置指定しかできないのではいちいちコンテンツが変わる度にピクセルで位置を指定の設定をしなければならないので、使い勝手が悪いです。

そこで本文と同じようにヘッダーの量が変われば自動的にtopの位置も変わるようにしたいのです。別のWindowが重なるのではなく、本文と同じようにひとつのHTMLファイルにインクールドさせるのと同様にしたいです。

３カラムのナビにして、そのうち右の指定したdivの位置に目次が表示させるように変更したいです。その方法ならすべて絶対位置による不具合が解決できるためです。

いちいちピクセルで表示位置を指定する場合は汎用性が悪すぎてページごとにスタイルシートを設定しなければならなくなり困っております。

そこで別のWindowが重なるのではなく、本文と同じようにインクルードするような形に変更したいです。その場合だとページの量に関係なく、位置が調整されて使い勝手が良いです。

そういう方法に変更は可能でしょうか？

よろしくお願いいたします。

回答No.2

fujillin

#1です。

補足の意味がつかめません。

ソース中の指定div内（divでなくてもいいけど）に移動させる方法として、回答したつもりですけど？

＞そういう方法に変更は可能でしょうか？
どこが違うのかわかりません。
目次は指定divの中に入れてしまうので、指定divのレイアウトに従います。
そのdivをどのようにレイアウトさせるのかは質問者様が決めることなので、私には想像ができません。