Works

タブ

.tabList li がタブ切り替えスイッチ。 .tabList li の数を数えて、タブの数を判断。 選択しているタブの li には .select がつく。 .tabList の次にある .contentWrap がタブで切り替えるコンテンツ。 n 個めのタブをクリックしたら、n 個めの .contentWrap を表示する、という動き。 最初に表示させるタブ以外の .contentWrap は CSS で非表示にしておく。

  • 842
  • 0

.odd をつける

.stripe をつけたものの中の :odd に .odd をつける table.stripe だと、tr.odd に。 ul.stripe だと、li.odd に。

  • 973
  • 0

【簡易】画像のロールオーバー

btn.gif -> btn_on.gif の場合と、 btn_off.gif -> btn_on.gif の場合、2 パターンのコード。 img に .btn をつける。 不要なほうのコードは削除して使用。

  • 1938
  • 1

画像のロールオーバー(画像プリロード)

btn.gif -> btn_on.gif img に .btn をつける。

  • 1195
  • 0

画像ロールオーバー(アニメーション)

btn.gif -> btn_on.gif img.btn または .btn img に適用。

  • 1758
  • 0

ページトップへスクロール&ページ内スクロール

a.pageTop をクリックで、ページトップへするするっとスクロール。 a.pageLink でページ内スクロール(href の先の # に移動)。 animate 部分の速度は slow(0.6 秒かけて移動)、動きは swing にしてますが好みで変更を。 jQuery Easing - jQuery 日本語リファレンス http://semooh.jp/jquery/cont/doc/easing/ メモ speeds: { slow: 600, fast: 200, // Default speed _default: 400 }, $.browser が jQuery1.9 から削除とのことなので、ブラウザ判別は $.browser を使わない形に。

  • 2891
  • 0

ページトップへスクロール(下へ行くと表示)

.pageTop a をクリックで、ページトップへするするっとスクロール。 animate 部分の速度は 800(0.8 秒かけて移動)、動きは swing にしてますが好みで変更を。 jQuery Easing - jQuery 日本語リファレンス http://semooh.jp/jquery/cont/doc/easing/

  • 1255
  • 0

checkbox, radio にチェックがあったら label に class を付ける

.checkboxList 内の label を見る。 checkbox にチェックがあったら、label に .checked をつける。

  • 7574
  • 0

アコーディオン(開けるのは 1 つ)

* .accordion 内の .switch がアコーディオントグルのスイッチ。 * .switch の次にある .contentWrap が開閉。 * 開いている .switch には .open がつく。 * .contentWrap は CSS で非表示にしておく。 * 別 .accordion とは連動しない。それぞれ開いたり閉じたりする。 * .accodion 内では常に開くアコーディオンは 1 つ。 ----- ※違う仕様のは以下 http://jsdo.it/hibiki443/r8hF ↑の仕様 * .accodion 内で複数アコーディオンが同時に開ける。 * 別 .accordion と連動する。 * .accordion をわける -> 別のアコーディオンを開くと閉じる * .accordion 内に複数まとめる -> 別のアコーディオンを開いてもそのまま

  • 11210
  • 1

アコーディオン(複数開ける)

* .accordion 内の .switch がアコーディオントグルのスイッチ。 * .switch の次にある .contentWrap が開閉。 * 開いている .switch には .open がつく。 * .contentWrap は CSS で非表示にしておく。 * .accodion 内で複数アコーディオンが同時に開ける。 * 別 .accordion と連動する。 * .accordion をわける -> 別のアコーディオンを開くと閉じる * .accordion 内に複数まとめる -> 別のアコーディオンを開いてもそのまま ----- ※違う仕様のは以下 http://jsdo.it/hibiki443/d0rO ↑の仕様 * 別 .accordion とは連動しない。それぞれ開いたり閉じたりする。 * .accodion 内では常に開くアコーディオンは 1 つ。

  • 5989
  • 0

forked: checkbox, radio にチェックがあったら label に class を付ける

.on を使う形に $('.foo').click() のような書き方の場合、 ひとつの要素に対して複数の種類のイベントを設定できませんが、on() を使えば可能 参考)jQuery の on() と off() を理解する - tacamy memo http://tacamy.hatenablog.com/entry/2013/03/03/213113

  • 1034
  • 0

スマートフォンサイトへの誘導リンクを設置

id="header" の一番上に、スマートフォンサイトへの誘導リンクを追加します。 id は任意のものに変更可。

  • 1530
  • 0

div 全体をクリックできるように

$("clickBox2").live({ click: function() { location.href = $(this).find("a.boxLink").attr("href"); }, mouseenter: function() { $(this).addClass("hover"); }, mouseleave: function() { $(this).removeClass("hover"); } }); こういうのでもおっけー

  • 986
  • 0

チェックボックスの、全てにチェックをトグルしたり

jQuery1.9 も出たので、非推奨だった書き方を変更。 ("input:checkbox") -> ("input[type=checkbox]") .attr("checked", false) -> .prop("checked", false)

  • 1843
  • 0

シンプルなスライドショー

  • 824
  • 0

Skills

  • Wordpress
  • MovableType
  • Photoshop
  • Dreamweaver
  • jQuery
  • HTML5
  • XHTML
  • CSS
  • CSS3
  • JavaScript
  • SCSS

Hot tags

Categories

HTML / CSS / JavaScript