« サイドバーに便利なコンテンツ?2 | トップページ | サイドバーに便利なコンテンツ?4 »

2005/04/27

サイドバーに便利なコンテンツ?3

ベーシックプランのサイドバーで楽しめるコンテンツの「ページめくりの別方式」を説明します。ソースを紹介した前回記事の続きです。右側サイドバーの「GAMEの実験2」がこの記事の事例になっています。

例によってtableタグを使って表示を安定化します。幅はいつもどおり170ピクセル、高さは適当に85ピクセル。表示状態を見て調整してください。高さは小さい数値のときは中身に自動調整されます。
<table border="0" width="170" bordercolor="white">
<tr>
<td height="85" bgcolor="#d2691e">

「ページめくり」の「開けたり閉じたり」のトグルスイッチ的動作を検出・記憶する部分。ここの説明は難しいので省略。たはは。「ページめくり」のページを増やしたいときは「(var i = 0; i < 4; i++)」の部分の数値を変えます。現在は4ページで、(使用する数値は、0,1,2,3の4個。ページの増減設定は、この記事の一番下を見てください。)
<script type="text/javascript"><!--
var submenu = new Array(2), flagOpen = new Array(false, false);
function setElement() {
    if (document.getElementById) {
        for (var i = 0; i <
4; i++) {
            submenu[i] = document.getElementById("sub" + i);
        }
    }
}
function dispSub(index) {
    if (document.getElementById) {
        if (flagOpen[index]) { submenu[index].style.display = "none"; }
        else
        { submenu[index].style.display = "block"; }
        flagOpen[index] = !flagOpen[index];
    }
}
//--></script>

ゲーム画面を別のウインドウで表示するときの指定。「URL」の部分に表示したいもののソースを記入します。
<script type="text/javascript"><!--
function subwin(){
window.open("
URL","swin","width=195,height=300,left=300,top=200");
}
// --></script>

この部分だけのスタイルシートの設定。前の「ページめくり」と違う点は、positionが全てrelativeの指定になっていて、それぞれのページが重ならないようになっています。
<style type="text/css"><!--
    #menu { position:relative; left:0px; top:0px; }
    .main { width:166px;color:#000000; background-color:#ffcc99;
            padding:1px; margin:1px; cursor:default; }

出てくるページの大きさ(height)はこの下で設定。
    .sub  { width:170px;
height:150px; background-color:#ffffcc; padding:0px;
            position:relative; left:0px; display:none; }
    a     { color:#000000; }
-->
</style>

マウスがクリックされるとページが開く部分の設定です。
<div onMouseDown="setElement();">
<div id="menu">

つぎがページが閉じた状態の目次の表示(一番上)。以下、同様に青い文字の部分が目次の部分になります。
<div class="main" onclick="dispSub(0);">
もぐらたたき</div>
    <div id="sub0" class="sub">

ここは別ウインドウを開くリンクが設定されています。ここに記事やメモを記入します。
<a href="#" onClick="subwin()"><u>もぐらたたき</u></a>
別ウインドウでゲーム画面は出ません。

    </div>
<div class="main" onclick="dispSub(1);">
ページめくりの別タイプ実験</div>
    <div id="sub1" class="sub">
このタイプはコンパクトにまとまりそう。
ここに記事やメモ、画像ソースなどを記入。
    </div>
<div class="main" onclick="dispSub(2);">
目次をクリックすると</div>
    <div id="sub2" class="sub">

ここに記事やメモ、画像ソースなどを記入してください。
    </div>
<div class="main" onclick="dispSub(3);">
ページが出て来ます。</div>
    <div id="sub3" class="sub">

これも良さそうでは?ここに記事やメモ、画像ソースなどを記入してください。
    </div>
</div>
</div>
</td>
</tr>
</table>

おわり

新しくページを追加するときは、上の数値の部分を変更して、
<div class="main" onclick="dispSub(数値);">目次の項目</div>
    <div id="sub
数値" class="sub">
記事やメモ、画像ソースの記入欄
    </div>

の部分を、数値を合わせて追記します。減らすときは同じ考え方で削除します。

|

« サイドバーに便利なコンテンツ?2 | トップページ | サイドバーに便利なコンテンツ?4 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/78586/3866664

この記事へのトラックバック一覧です: サイドバーに便利なコンテンツ?3:

« サイドバーに便利なコンテンツ?2 | トップページ | サイドバーに便利なコンテンツ?4 »