jQuery UI - 状態変化

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

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

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

ボタンの状態

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

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

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

ボタン

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

$(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 の削除と追加を行っています。