jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery UI の利用 > jQuery UI - 状態変化

jQuery UI - 状態変化

クリック可能なボタンなどの要素では、ポインターが上に乗ったときに色などの表示を変更することで、 ユーザーにクリック可能であることがよりわかりやすくなります。

特に色を変えてしまって、ボタンであること自体が分かりにくくなってしまうこともあるので、この点は大事なポイントです。

jQuery ではボタンに限らず、状態 (state) がいくつか定義されています。その状態を css クラスに指定することによって、どんな意味の状態であるか指定できます。

ボタンの状態

ここではボタンの状態とその切り替え方をみておきましょう。

尚、class の指定によって変化する、ということはみて分かるはずですが、何色に変わるかという具体的な点については、あなたが使っているテーマに依存しているので、 まったく同じようには表示されないのでその点は注意してください。

状態ボタンの表示
ui-state-default
ui-state-hover
ui-state-active
ui-state-disabled

上のクラスを指定したときに、ボタンの状態を動的に変換する例を次にしめします。

このようなボタンを実現するコードは次の通りです。

$(document).ready( function() {
  $('#button1').hover(
    function(){$(this)
      .removeClass('ui-state-default')
      .addClass('ui-state-hover');},
    function(){$(this)
      .removeClass('ui-state-hover')
      .addClass('ui-state-default');}
  )
  .mousedown(
    function(){$(this)
      .removeClass('ui-state-default,ui-state-hover')
      .addClass('ui-state-active');}
  );
});

ここでは class の削除と追加を行っています。

ホーム > jQuery UI の利用 > jQuery UI - 状態変化
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール

© 2011-2017 Keisuke Oyama jQuery 入門