[ JavaScript ] jQuery サンプル集

このページの目次

連続アニメーションサンプルアコーディオンパネルのサンプルテーブルの偶数行に CSS を適用し、ストライプ ( しましま ) にするサンプル

連続アニメーションサンプル {#animate} ———————————————————————-

jQuery のみで動く連続アニメーションのサンプル。 上から落ちてくるバージョンを IE8 で見ると、エッジに黒い縁が出るのはなんで? ( 最終更新日 : 2010/12/06 )

上からフェードインしながら落下バージョン右から出現バージョン右から出現バージョン ( 遅延あり )

目次に戻る

アコーディオンパネルのサンプル {#accordion} ———————————————————————-

アコーディオンパネルのサンプル1
各コマ毎に id を書き換えなくて良いので、コマが無限に増やせるタイプ。
アコーディオンパネルのサンプル2
各コマ毎に id を書き換えないといけないタイプ。

目次に戻る

テーブルの偶数行に CSS を適用し、ストライプ ( しましま ) にするサンプル {#addClass} ———————————————————————-

( 最終更新日 : 2008/10/08 )

サンプル

ソースコード

わかりやすくするため、余計なコードは省いてあります。

<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
    $(".data tr:even").addClass("even");
});
</script>
<style type="text/css">
tr.even td {
    background: #ddd;
}
</style>
</head>
<body>
<table class="data">
<tr><th>header</th></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
<tr><td>data</td></tr>
</table>
</body>

サンプルページ

参考にさせてもらったページ

シマシマなテーブルを jQuery で作る – Emotional Web

ありがとうございます。時間ができたら、onLoad のやり方も書いてみたい。

目次に戻る

1 COMMENT

CodeR

シマシマテーブルを作る。

jQueryとCSSを使ってシマシマのテーブルを作る方法。…

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です