2007年3月2日(金曜日)

XOOPS Cube で、 [code] の内容を別画面で表示可能にする preload と JavaScript

カテゴリー: - Ryuji @ 17時06分49秒

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.

  1. 素晴らしいです!
    早速組み込んでみました(^^:
    http://www.oceannet.jp/modules/news/index.php?page=article&storyid=3

    Comment by matchan — 2007年3月2日(金曜日) @ 18時42分21秒

  2. さっそくデザインいじってくれてありがとうございます。
    クラス指定だけでも付けようと思ってて忘れてました(^^;

    Comment by Ryuji — 2007年3月4日(日曜日) @ 22時53分52秒

  3. preでページレイアウトが崩れる件ですが、わたしなりに解決策を見つけました。
    http://www.sippu.com/xcube/modules/d3forum/index.php?topic_id=6
    ご参考までに。

    Comment by sippu — 2007年8月13日(月曜日) @ 10時04分00秒

  4. tableタグで囲ってしまうのもひとつの手かもしれませんね。

    Comment by Ryuji — 2007年8月13日(月曜日) @ 21時41分27秒

Ȥ

ʤߥȤդ뤳ȤϽޤ

10 queries. 0.011 sec.
Powered by WordPress Module based on WordPress ME & WordPress

〒104-0061 東京都中央区銀座1丁目3番3号 G1ビル7階
お問い合わせ TEL 03-3524-8860

Copyright(c) 2012 RYUS.All Rights Reserved.