今日の人気記事

  1. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  2. 1年分のカレンダーを表示「BIC Calendar」
  3. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  4. テキストの手動入力っぽいアニメーションを実装「TypeType」
  5. レスポンシブ・グリッドを実装「Awesome Grid」

プルダウンメニューで、要素の表示を切り替え「Focused」

スポンサーリンク

プルダウンメニューで、要素の表示を切り替えることのできるプラグイン「Focused」を紹介します。

jQueryプラグイン「Focused」

このプラグインを使えば、プルダウンメニュー(セレクトメニュー select、option)で指定した要素の表示を切り替えることができます。

例えば、div要素に囲われた画像を切り替えたり……などを簡単に実装することができます。

スポンサーリンク

デモページのプルダウンメニューをいろいろ選択してしてみてください。

「Focused」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Focusedのデモでーす。">
<title>Focused - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.focused.js"></script>
</head>
<body>
<h1>Focused のデモでーす。</h1>
<div class="demo">
<label for="focus">選択してください → </label>
<select name="focus">
  <option value="red">赤</option>
  <option value="orange">橙</option>
  <option value="yellow">黄</option>
  <option value="green">緑</option>
  <option value="blue">青</option>
  <option value="indigo">藍</option>
  <option value="purple">紫</option>
</select>
<div data-focus="red">
  <img src="images/red.png"> 
</div>
<div data-focus="orange">
  <img src="images/orange.png">
</div>
<div data-focus="yellow">
  <img src="images/yellow.png">
</div>
<div data-focus="green">
  <img src="images/green.png">
</div>
<div data-focus="blue">
  <img src="images/blue.png">
</div>
<div data-focus="indigo">
  <img src="images/indigo.png">
</div>
<div data-focus="purple">
  <img src="images/purple.png">
</div>
</div>

<script>
$(function domReady() {
  $('.demo').focused();
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)