XOOPS Cube で、 [code] の内容を別画面で表示可能にする preload と JavaScript
XOOPS Cube には、HTML や PHP コードを示すために使う code という BBcode があります。
この BBcode は最終的には pre タグでマークアップされます。
以前、OCEAN NET の matchan と話していたときに、この code の表示方法にうまいやり方がないだろうかとぃう話になったことがあります。
困っていたポイントは次の 2 点です。
・1 行が長いコードを code で囲うと、レイアウトがくずれる。
・上記を防ぐために幅固定をすると、見づらい
コードの見やすさを取るか、レイアウトが保たれることを取るかの二択だったわけです。
そこで、code の中身を別窓で表示するための preload と javascript を作ってみました。
・ryusXCodePopup.zip
ファイルを解凍すると 3 つのファイルがあります。
XCodePopup.js と blank.html はお使いになってるテーマディレクトリに入れてください。
ryusXCubePopup.class.php は、XOOPS Cube の preload に入れてください。
theme.html の head 内に次の 1 行を足してください。
<script type="text/javascript" src="<{$xoops_imageurl}>XCcodePopup.js"></script>
これで、code で囲った箇所の上に [popup] が表示されるようになります。
[popup] をクリックすると code の中身が別窓で表示されます。
動作サンプルは、 こちら をごらんください。
別窓で表示する部分は、javascript でやってますので、javascript を工夫すれば、もうちょっと見栄え良くなるかもしれません。
RSS feed for comments on this post.
Ȥ
ʤߥȤդ뤳ȤϽޤ
素晴らしいです!
早速組み込んでみました(^^:
http://www.oceannet.jp/modules/news/index.php?page=article&storyid=3
Comment by matchan — 2007年3月2日(金曜日) @ 18時42分21秒
さっそくデザインいじってくれてありがとうございます。
クラス指定だけでも付けようと思ってて忘れてました(^^;
Comment by Ryuji — 2007年3月4日(日曜日) @ 22時53分52秒
preでページレイアウトが崩れる件ですが、わたしなりに解決策を見つけました。
http://www.sippu.com/xcube/modules/d3forum/index.php?topic_id=6
ご参考までに。
Comment by sippu — 2007年8月13日(月曜日) @ 10時04分00秒
tableタグで囲ってしまうのもひとつの手かもしれませんね。
Comment by Ryuji — 2007年8月13日(月曜日) @ 21時41分27秒