スタッフブログ
こんにちは hamacoです。
今回も前回同様JavaScriptでXOOPSサイトをプチカスタマイズしてみよう。
ということで、ブロックの位置をJavaScriptでグラフィカルに弄れるようにしてみようと思います。
・今回のもhd_defaultテーマでテストしていますが、hd_defaultのHTMLの構造上中央-中央のブロックの位置を弄ることができません。
・他のテーマについても同様にHTMLの構造によってはコードを一部弄って対応できたりできなかったりします。
・今回のは色々と未完成な部分があります。なので、何が起きても問題ないサイトでテストしてみることをとてもお勧めします。
やり方ですが、まずtheme.htmlを開きブロックを表示している部分を以下のように変更します。
まあ、全てblockid="<{$block.id}>"を付けただけですね。
次にブロックの管理->カスタムブロックの追加から以下の内容のブロックを追加します。
この時にタイプをHTMLタグに、表示可能なのを管理者に設定しておきます。
これで、表画面に行くと「ブロック変更開始」といったボタンがあるはずなので、それを押すとブロックのタイトルをドラッグアンドドロップで移動できるようになります。
好きな位置にブロックを移動した後に「ブロック変更登録」ボタンを押せばブロックの位置がその場所で登録されます。
※まだそのページ内でしかブロックの表示順をチェックしていない為、ブロックを表示するページを色々弄っている状態だと編集したページ以外でブロックの位置がずれる可能性があります。
ちなみに今週の土曜日 7月24日はXOOPS Cubeサタデーラボの開催日です。
もし、時間の都合がつくようでしたら是非参加して下さい。
第8回XOOPS Cubeサタデーラボ開催
今回も前回同様JavaScriptでXOOPSサイトをプチカスタマイズしてみよう。
ということで、ブロックの位置をJavaScriptでグラフィカルに弄れるようにしてみようと思います。
・今回のもhd_defaultテーマでテストしていますが、hd_defaultのHTMLの構造上中央-中央のブロックの位置を弄ることができません。
・他のテーマについても同様にHTMLの構造によってはコードを一部弄って対応できたりできなかったりします。
・今回のは色々と未完成な部分があります。なので、何が起きても問題ないサイトでテストしてみることをとてもお勧めします。
やり方ですが、まずtheme.htmlを開きブロックを表示している部分を以下のように変更します。
<div class="CenterLblock" id="centerr<{$smarty.foreach.crloop.iteration}>" blockid=<{$block.id}>>
<div class="CenterRblock" id="centerr<{$smarty.foreach.crloop.iteration}>" blockid=<{$block.id}>>
<div class="LeftBlock" id="lblock<{$smarty.foreach.lbloop.iteration}>" blockid="<{$block.id}>">
<div class="RightBlock" id="rblock<{$smarty.foreach.rbloop.iteration}>" blockid="<{$block.id}>">
次にブロックの管理->カスタムブロックの追加から以下の内容のブロックを追加します。
この時にタイプをHTMLタグに、表示可能なのを管理者に設定しておきます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var Config = {
columns: [
{ id: 0, name: '#LeftColumn' },
{ id: 1, name: '#RightColumn' },
{ id: 3, name: '#CenterLColumn' },
{ id: 4, name: '' },
{ id: 5, name: '#CenterRColumn' }
]
};
var state = 0, $iframe;
$("#ryusEditMenu").click(function() {
if (state === 0) {
$(Config.columns).each(function() {
if (this.name) $(this.name).addClass("connectedSortable").sortable({
connectWith: '.connectedSortable'
});
});
$iframe = $('<iframe src="{X_SITEURL}/modules/legacy/admin/index.php?action=BlockList"></iframe>').appendTo('body').css('display', 'none');
$(this).val('ブロック変更登録');
state = 1;
} else {
$iframe.contents().find('input[name^=weight]').each(function() {
var ret = $(this).attr('name').match(/\d+/);
$(this).parent().parent().attr('blockid', ret);
});
$(Config.columns).each(function() {
var sideid = this.id;
if (this.name) $(this.name).find("> div").each(function(i) {
var blockid = $(this).attr('blockid');
var tr = $iframe.contents().find('tr[blockid='+blockid+']');
tr.find('input[name^=weight]').attr('value', i);
tr.find('input[name^=side][value='+sideid+']').attr('checked', 'checked');
});
});
$iframe.contents().find('form').get(1).submit();
$(this).val('ブロック変更開始');
state = 0;
}
});
});
</script>
<input type="button" id="ryusEditMenu" value="ブロック変更開始" />
好きな位置にブロックを移動した後に「ブロック変更登録」ボタンを押せばブロックの位置がその場所で登録されます。
※まだそのページ内でしかブロックの表示順をチェックしていない為、ブロックを表示するページを色々弄っている状態だと編集したページ以外でブロックの位置がずれる可能性があります。
超重要事項
ちなみに今週の土曜日 7月24日はXOOPS Cubeサタデーラボの開催日です。
もし、時間の都合がつくようでしたら是非参加して下さい。
第8回XOOPS Cubeサタデーラボ開催
トラックバック
