今日の人気記事

  1. マインドマップを描画「js-mindmap」
  2. 画面の端についてくるメニューを設置「mb.extruder」
  3. パスワードの表示/非表示を切り替える「preventPasswordTypo」
  4. 数値をアニメーションでカウントアップ「Numerator」
  5. アニメーション効果付きの棒グラフを作成「Thermometer」

プルダウンメニューで、要素の表示を切り替え「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>
スポンサーリンク

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