[ JavaScript Library ]

common.js

サイト共通のスクリプト

各functionを window.onload で実行させるための「addLoadEvent」と、classを追加する「addClass」が含まれています。本サイトのスクリプトでは、jQuery などのライブラリは必要としませんが、以降のスクリプトを実行させるにはこちらのファイルと同等の処理が必要になります。
なお、本ファイルのスクリプトは、『DOM Scripting 標準ガイドブック 〜やさしく学ぶ、JavaScriptとDOMによるWebデザイン〜 （著者：Jeremy Keith 訳：吉川典秀 監修：中村享介）』を参考にしております。

HTMLソース

HTMLの head内に必要なJavaScriptファイルを以下の順番で読み込ませます。「common.js」は最初に指定してください。

<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/smoothScroll.js"></script>
<script type="text/javascript" src="js/links.js"></script>
<script type="text/javascript" src="js/linkBox.js"></script>
<script type="text/javascript" src="js/stripes.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/rollover.js"></script>
<script type="text/javascript" src="js/pulldown.js"></script>

インフォメーション

ファイル

common.js

バージョン

1.10

作成

2009年7月13日

最終更新

2009年8月5日

smoothScroll.js

ページ内をスムーズにスクロールするスクリプト

a要素のhref属性を見て、「#」が含まれている場合にリンク先までスムーズにスクロールをするスクリプトです。Operaの横スクロール調整及び、動作がもう少し軽くなるように、現在改修中。

HTMLソース

a要素のhref属性に「#」が含まれていると、id属性が付いているフラグメントまでスクロールします。

<a href="#links">links.js</a>

インフォメーション

ファイル

smoothScroll.js

バージョン

0.93

作成

2009年7月4日

最終更新

2009年8月5日

ライセンス

MIT License

links.js

外部URIを別ウィンドウで開くスクリプト

a要素のhref属性を参照し、「http:」及び「https:」で始まる絶対URIを別ウィンドウで開くスクリプトです。
また、絶対URIだが同一ウィンドウで開きたい場合の例外規定や、相対リンクでも特定のclass名指定で別ウィンドウで開く設定といったカスタマイズが可能です。

サンプル

HTMLソース

相対リンクも特定のclass名を指定して別ウィンドウで開くことも可能です。

<a href="./index.html" class="openwin">リンク</a>

インフォメーション

ファイル

links.js

バージョン

1.05

作成

2009年7月1日

最終更新

2009年8月22日

ライセンス

MIT License

linkBox.js

リンク範囲をBOXまで広げるスクリプト

指定したclassの付いたdiv要素内の最初に出現するリンクの値を取得し、div全体にリンクを広げるスクリプトです。
class名は複数指定が可能（初期値：linkBox01, linkBox02）。また、オーバー時のclass名（初期値：linkBoxOver）を指定することで、CSSで見た目を変更することができます。

サンプル

HTMLソース

初期設定では、class="linkBox01"、class="linkBox02" が付いているdiv要素に適用されます。

<div class="linkBox01">
   <p>linkBox01</p>
   <p>リンク先：<a href="http://www.tiltdesignstudio.com/">Tilt Design Studio</a></p>
</div>

<div class="linkBox02">
   <p>linkBox02</p>
   <p>リンク先：<a href="http://www.group94.com/">group94</a></p>
</div>

インフォメーション

ファイル

linkBox.js

バージョン

1.03

作成

2009年6月23日

最終更新

2009年8月5日

ライセンス

MIT License

stripes.js

tbody内のtrに、奇数と偶数で交互にclassを付与するスクリプト

tbody内のtr要素に、奇数の場合は class="odd"、偶数の場合は class="even" を追加するスクリプトです。

サンプル

HTMLソース

スクリプト実行後は以下の通り、tr要素に class="odd" と、class="even" が交互に割り当てられます。

<table>
   <thead>
   <tr>
      <th>No.</th>
      <th>奇数・偶数</th>
   </tr>
   </thead>
   <tbody>
   <tr class="odd">
      <td>01</td>
      <td>奇数</td>
   </tr>
   <tr class="even">
      <td>02</td>
      <td>偶数</td>
   </tr>
   <tr class="odd">
      <td>03</td>
      <td>奇数</td>
   </tr>
</table>

インフォメーション

ファイル

stripes.js

バージョン

1.01

作成

2009年8月5日

最終更新

-

ライセンス

MIT License

carousel.js

スライドショー用スクリプト

一度に表示する画像枚数、移動距離、速度等を設定することでスライドショーが作れるスクリプトです。
左右のボタンをクリックすることで、スライドがスクロールします。また、オート再生のON/OFFも可能です。さらに、左右ボタンのマークアップはJavaScript側、オフ時はスクロールバーを表示させるなど、オフ環境に優しいマークアップを心がけています。

サンプル

オート再生

HTMLソース

div要素の id="slideshow"、id="slideshowInner"、オート再生のinput要素の id="autoPlay" は必須です。id名を変える場合は JavaScriptファイルもあわせて修正してください。

<div id="slideshow">
   <div id="slideshowInner">
      <ul id="slideList">
         <li><img src="images/slideshow01.gif" alt="1" /></li>
         <li><img src="images/slideshow02.gif" alt="2" /></li>
         <li><img src="images/slideshow03.gif" alt="3" /></li>
         <li><img src="images/slideshow04.gif" alt="4" /></li>
         <li><img src="images/slideshow05.gif" alt="5" /></li>
         <li><img src="images/slideshow06.gif" alt="6" /></li>
         <li><img src="images/slideshow07.gif" alt="7" /></li>
         <li><img src="images/slideshow08.gif" alt="8" /></li>
      </ul>
   </div>
</div>
<p class="toggleBtn"><input type="checkbox" name="autoPlay" value="autoPlay" id="autoPlay" /><label for="autoPlay">オート再生</label></p>

インフォメーション

ファイル

carousel.js

バージョン

1.11

作成

2009年7月2日

最終更新

2009年8月5日

ライセンス

MIT License

tabs.js

タブ切り替えスクリプト

タブをクリックすることで、コンテンツが切り替わるスクリプトです。
タブ選択時のclass名（初期値：current）と、コンテンツが入っているdiv要素のクラス名（初期値：sect）を指定してください。なお、初期段階でのタブの選択と、選択されていないコンテンツの非表示はCSS側で指定しています。

サンプル

HTMLソース

タブ選択時のclass名（class="current"）と、コンテンツが入っているdiv要素のクラス名（class="sect"）を指定します。

<div id="tabSwitch">
   <ul class="tabs">
      <li><a href="#" class="current">tab01</a></li>
      <li><a href="#">tab02</a></li>
   </ul>
   <div id="sect1" class="sect">
      <p>テキストテキストテキストテキスト</p>
      <p>テキストテキストテキストテキストテキストテキスト</p>
   </div>
   <div id="sect2" class="sect">
      <ul>
         <li>リストリストリスト</li>
         <li>リストリストリストリスト</li>
      </ul>
   </div>
</div>

インフォメーション

ファイル

tabs.js

バージョン

1.03

作成

2009年7月3日

最終更新

2009年8月5日

ライセンス

MIT License

rollover.js

ロールオーバーのスクリプト

オーバーさせるimg要素のclass名（初期値：over）と、オーバー時に画像ファイル名の末尾に追加する文字（初期値：_o）を設定することで、ロールオーバーが作れるスクリプトです。

サンプル

HTMLソース

初期設定では、class="over" が付いているimg要素に適用されます。

<img src="images/btn.gif" class="over" alt="ON MOUSE" />

インフォメーション

ファイル

rollover.js

バージョン

1.03

作成

2009年7月3日

最終更新

2009年8月5日

ライセンス

MIT License

pulldown.js

プルダウンメニューのスクリプト

プルダウンメニューを作成するスクリプトです。
ul要素の入れ子で、プルダウンメニューの親となるli要素にclass名（初期値：pulldown）を指定します。初期段階ではプルダウンメニューはCSS側で非表示とし、配置は絶対配置（absolute）にしています。

サンプル

• プルダウンメニュー
  • サブメニュー
  • サブメニュー
  • サブメニュー
• プルダウンメニュー
  • サブメニュー
  • サブメニュー
• プルダウンなし

HTMLソース

プルダウンメニューの親となるli要素にclass名（初期値：pulldown）を指定します。

<ul>
   <li class="pulldown"><a href="#">プルダウンメニュー</a>
      <ul>
         <li><a href="#">サブメニュー</a></li>
         <li><a href="#">サブメニュー</a></li>
         <li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
</ul>

インフォメーション

ファイル

pulldown.js

バージョン

1.03

作成

2009年7月3日

最終更新

2009年8月5日

ライセンス

MIT License