スタッフブログ

  • カテゴリ TIPS小ネタ の最新配信
  • RSS

XOOPSサイトをJavaScriptでプチカスタマイズ

hamaco : XOOPS » TIPS小ネタ 2010/6/17 17:07

Blogger's Avatar

こんにちは hamacoです。

今回は面白いネタが思い浮ばなかったので、いますぐ出来るXOOPSサイトプチカスタマイズ的な感じのネタを紹介してみたいと思います。
ちなみに全部JavaScriptなので、theme.htmlファイルをちょろっと弄るだけですぐ使えるようになりますよー。

※全てhd_defaultテーマで試しています。他のテーマの場合一部変更しないといけない場所があります

準備


jQueryを使用しているのでまず、jQueryが動く状態にします。
まず、39行目にある
<script src="<{$xoops_url}>/common/lib/jquery.js" type="text/javascript"></script>
の部分を上に移動させます。移動先は大体どこでも良いのですが、今回は2行上に移動させて以下のようになるようにしました。
<script src="<{$xoops_url}>/common/lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
ここにこれからでてくるコードを書いていきます
</script>
<{* jgrowl *}>

また、テストする時は管理画面の全般設定から「themes/ ディレクトリからの自動アップデートを有効にする」をはいにしておくと編集してすぐ反映されるので楽です。

サイドカラムをスクロールに追従させる


コンテンツが非常に長いページとかで下の方にスクロールしているとメニューが遠くて面倒! という時にブロックがスクロールについてくるようにすると便利かもしれません。
以下のようなコードをちょろっと貼り付けるだけで簡単にできるので試してみて下さい。
ただし、メニューがブラウザの画面より縦に長いと酷いことになるので、スクロールさせたい方のカラムにはあまりブロックを表示しないようにしましょう。
$(function() {
    var el = $("#lblock1");
    var offset = el.offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            el.stop().animate({
                marginTop: $(window).scrollTop() - offset.top + topPadding
            });
        } else {
            el.stop().animate({ marginTop: 0 });
        }
    });
});
2行目の#lblock1で左カラムを指定しています。これを#rblock1に変更すると右カラムがスクロールについてくるようになります。
cube_defaultだと#leftcolumnとかに変えればいけるのではないでしょうか?
cube_defaultはテーブルレイアウトなので↑のじゃ無理でした。ごめんなさい。

メニューを開閉できるようにする


さて、次はブロックタイトルをクリックでブロックの中身を開閉できるようにしてみましょう。
これも以下のコードをちょろっと貼り付けるだけで動くようになります。
$(document).ready(function() {
    var el = $(".BlockTitle");
    el.hover(function(){
        $(this).css("cursor","pointer");
    },function(){
        $(this).css("cursor","default");
    });

    el.click(function(){
        $(this).next().children("ul").slideToggle("slow");
    });
});
これも2行目で対象を指定しているので、この部分を変えてあげれば他のテーマでも動くようになります。
cube_defaultだと
var el = $("div[class$=blockTitle]");
みたいな感じでいけると思います。


これくらいしか簡単に書けるネタが思いつかなかったので今回はここで終わりです。
また、こんな感じのじみーなネタが思い付いたらブログに書いてみたいと思います。

超重要事項


ちなみに今週の土曜日 6月19日はXOOPS Cubeサタデーラボの開催日です。
もし、時間の都合がつくようでしたら是非参加して下さい。

第7回XOOPS Cubeサタデーラボ開催

トラックバック

スタッフブログ最新
カテゴリ一覧

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

Copyright(c) 2012 RYUS.All Rights Reserved.