スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブックマークとしてのJavaScript+CSS応用案 

bkm1.jpg
JavaScriptによる複数ページ切り替えのサンプル。
  1. 動作はこんな感じです(前置きなしに消える可能性があります)
  2. CSSソースは青文字、スクリプトソースは赤文字です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<!-- Created by Kana[http://210x297.blog12.fc2.com/] -->
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
body {
    height:100%;
    font:85%/1.6 Tahoma,Verdana,Osaka,sans-serif;
    letter-spacing:0.1em;
    color:#555555;
    background-color:#ffffff;
}

/* ↓ 左メニューのリンク切り替え部分です */
.tabheader {
    width:170px;
    margin-top: 165px;
    margin-left: 8px;
    position:absolute;
    top:0;
    left:0;
    clear:both;
    }
    
.tabheader table {
  border-collapse: collapse; /* for IE */
  border-spacing: 0; /* for N6 */
}

.tabheader table tr td {margin:0;padding:0;border-width:0}

/* ↓ 左メニュー 矢印グレー部分 */
.tabheader .close {
background-image: url(http://blog-imgs-38.fc2.com/2/1/0/210x297/m.jpg);
background-repeat:no-repeat;
background-position:0% 45%;
margin: 10px 0px 10px 15px;
padding:0px 0px 0px 35px;
white-space: nowrap;
}

/* ↓ 左メニュー 矢印ブルー部分 */
.tabheader .open {
background-image: url(http://blog-imgs-38.fc2.com/2/1/0/210x297/r.jpg);
background-repeat:no-repeat;
background-position:0% 45%;
margin: 10px 0px 10px 15px;
padding:0px 0px 0px 35px;
white-space: nowrap;
}


.tabheader a {
    text-decoration:none;
}
    .tabheader a:link,
    .tabheader a:visited {
        color:#7A7A7A;
    }
    .tabheader a:hover,
    .tabheader a:active {
        color:#00ffff;
    }

/* ↓ ドット枠のサイトリンクの部分です */
.tabbody {
  border-color: #F0F0E8;
  border-style: dotted;
  margin: 15px 0 0 180px;
  border-width: 5px;
  padding: 1em;
}

    .tabbody a:link,
    .tabbody a:visited {
        color:#00ced1;
    }
    .tabbody a:hover,
    .tabbody a:active {
        color:#00ffff;
    }

/* ↓ サイト説明の部分です */
textarea,
select{
    padding:0.2em;
    border:1px solid #ccc;
    background-color:transparent;
    margin: 0px 0px 0px 15px;
}

/* ブクマ (modori/clear: left; とリンク)(!modoriは消すとレイアウト崩れるので、そのまま使用してください!) */
ul#bkm{display:block;padding:0px;margin:0px;}
ul#bkm li{width:160px;font-size : 12px; line-height:120%;list-style:none; float:left; padding-left:35px; margin:5px 0 5px 0; height:50px;}
ul#bkm li#linktxt a {font-size:12px;}

        ul.modori {
            margin:0.2em 0 -1em 0;
            text-align:right;
        }
        ul.modori,
        ul.modori li {
            clear: left;
            list-style-type:none;
        }
</style>
<script language="JavaScript">
<!--

/* ↓ サイト説明の呼び出し */
function disp(msg){
    document.form1.field1.value = msg;
}

/* ↓ バナーの切り替え */
image = new Array();

image[0] = new Image();
image[0].src = "http://blog-imgs-38.fc2.com/2/1/0/210x297/b_noba.gif"; /*[ no banner ]直リン禁止バナー*/

image[1] = new Image();
image[1].src = "http://blog-imgs-38.fc2.com/2/1/0/210x297/a.jpg";
image[2] = new Image();
image[2].src = "http://blog-imgs-38.fc2.com/2/1/0/210x297/b.jpg";
image[3] = new Image();
image[3].src = "http://blog-imgs-38.fc2.com/2/1/0/210x297/c.jpg";


function Img_2(n){
if(document.images){
document.link.src=image[n-1].src;}}

/* ↓ ドット枠のページ切り替え */
// bpref = tab body prefix, hpref = tab header prefix
function seltab(bpref, hpref, id_max, selected) {
  if (! document.getElementById) return;
  for (i = 0; i <= id_max; i++) {
    if (! document.getElementById(bpref + i)) continue;
    if (i == selected) {
      document.getElementById(bpref + i).style.visibility = "visible";
      document.getElementById(bpref + i).style.position = "";
      document.getElementById(hpref + i).className = "open";
    } else {
      document.getElementById(bpref + i).style.visibility = "hidden";
      document.getElementById(bpref + i).style.position = "absolute";
      document.getElementById(hpref + i).className = "close";
    }
  }
}

// -->
</script>

<title>sampleBOOKMARK</title>

</head>
<body bgcolor="white" onload="seltab('box', 'head', 10, 1)">
<!-- ↑最初に読み込んだときに 1 番のタブを選択するようにしています -->

<div id="PAGETOP" style="width:95%">

<div id="HEADER">
<h1>BOOKMARK</h1>
 <table> <tr> <td>
 <ul><img src="http://blog-imgs-38.fc2.com/2/1/0/210x297/b_noba.gif" width="200" border="0" height="40" name="link"></td>
 <td><form action="#" name="form1"><textarea name="field1" id="TEXTAREA" rows="1" cols="50">リンク先にカーソルを合わせると、説明が表示されます</textarea></form></ul>
 </td></tr></table>

<!-- タブの見出しです -->
<div class="tabheader">


 <div id="head1">
 <a href="javascript:seltab('box', 'head', 10, 1)">ALL</a>
 </div>

 <div id="head2">
 <a href="javascript:seltab('box', 'head', 10, 2)">JAPANESEonly</a>
 </div>

 <div id="head3">
 <a href="javascript:seltab('box', 'head', 10, 3)">ENGLISHonly</a>
 </div>

 <div id="head4">
 <a href="javascript:seltab('box', 'head', 10, 4)">ABOUT LINK</a>
 </div>


<!-- tabheader -->
</div>
<!-- HEADER -->
</div>

<!-- タブの中味です -->
<div class="tabbody">

<div id="box1">
<p>
  <ul id="bkm">
    <li><a href="http://www.google.co.jp/" target="_blank" onMouseOver="Img_2(2);disp('Google先生');" onmouseout="Img_2(1)">
    [ Google.co.jp ]<br>(日本)</a></li>
    
    <li><a href="http://www.google.com/" target="_blank" onMouseOver="Img_2(3);disp('Google先生英語版')" onmouseout="Img_2(1)">
    [ Google.com ]<br>(英語版)</a></li>
    
    <li><a href="http://gigazine.net/index.php?/news/comments/20070909_google_job_interview/" target="_blank" onMouseOver="Img_2(4);disp('Googleの面接試験、一体どのような質問をされるのか?')" onmouseout="Img_2(1)">
    [ GIGAZINE ]</a></li>

</ul>
 <ul class="modori">
   <a href="#PAGETOP">▲</a>
 </ul>
</p>
</div>


<div id="box2">
<p>
<p>
  <ul id="bkm">
    <li><a href="http://www.google.co.jp/" target="_blank" onMouseOver="Img_2(2);disp('Google先生');" onmouseout="Img_2(1)">
    [ Google.co.jp ]<br>(日本)</a></li>
    
    <li>
    [ Google.com ]<br>(英語版)</li>
    
    <li><a href="http://gigazine.net/index.php?/news/comments/20070909_google_job_interview/" target="_blank" onMouseOver="Img_2(4);disp('Googleの面接試験、一体どのような質問をされるのか?')" onmouseout="Img_2(1)">
    [ GIGAZINE ]</a></li>
</ul>
 <ul class="modori">
   <a href="#PAGETOP">▲</a>
 </ul>
</p>
</div>


<div id="box3">
 <p>
  <ul id="bkm">
    <li>
    [ Google.co.jp ]<br>(日本)</li>
    
    <li><a href="http://www.google.com/" target="_blank" onMouseOver="Img_2(3);disp('Google先生英語版')" onmouseout="Img_2(1)">
    [ Google.com ]<br>(英語版)</li>
    
    <li>
    [ GIGAZINE ]</a></li></ul>
 <ul class="modori">
   <a href="#PAGETOP">▲</a>
 </ul>

 </p>
</div>

<div id="box4">
 <p>
 関連リンクです。
 </p>
 <ul>
 <li><a href="http://nais.to/~yto/tools/css_tabs/
 ">CSS と JavaScript でタブ切り替え</a></li>

 </ul>
</div>



</div><!-- tabbody -->

<p>
 <ul class="modori">
  Created by  <a href="http://210x297.blog12.fc2.com/">Kana</a>.
 </ul>
</p>

</div><!-- PAGETOP -->
</body>
</html>

CSSもかなり入ってるんですが、メインはページ切り替えだったのでカテゴリJavaScriptで。
お気に召したら自由に持ち帰って編集してください。
サンプル右下の宣言が邪魔でしたらはずしてもらってもかまいません*
使用いただける際は、拍手を頂けると嬉しいです。


 引用:CSS と JavaScript でタブ切り替え
スポンサーサイト
| HOME |
Copyright © XD All Rights reserved. Design of base by n [ラムネ]. Created by Kana.

XD

★ CALENDAR ARCHIVES

★ INFOMATION

BLOG:online operation record
ME:kana(♀/20代)

★ LATEST ENTRIES

★ CATEGORY

★ LINK

★ my store

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。