jQuery UIでラベルを作る方法

jQuery UIでラベルを作る方法

サンプル

ラベル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>jQuery UI label</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 </head>
<body>
   <h4>ラベル</h4>
      <div class="ui-state-default" style="margin-top: 20px; padding:2px;">
         <a href=".." >リンク</a>
      </div>
      <div class="ui-state-hover " style="margin-top: 20px; padding:2px;">
         <a href=".." >リンク</a>
      </div>
      <div class="ui-state-focus " style="margin-top: 20px; padding:2px;">
         <a href=".." >リンク</a>
      </div>
      <div class="ui-state-active l" style="margin-top: 20px; padding:2px;">
         <a href=".." >リンク</a>
      </div>
      <script>
      function setCss(obj,remove,add) {
         $(obj).removeClass(remove);
         $(obj).addClass(add);
      }
      </script>
      <div class="ui-state-default " onmouseover="setCss(this,'ui-state-default','ui-state-hover');"  onmouseout="setCss(this,'ui-state-hover','ui-state-default');" style="margin-top: 20px; padding:2px;">
         <a href=".." >default→hover</a>
      </div>
      <div class="ui-state-default" onmouseover="setCss(this,'ui-state-default','ui-state-focus');"  onmouseout="setCss(this,'ui-state-focus','ui-state-default');" style="margin-top: 20px; padding:2px;">
         <a href=".." >default→focus</a>
      </div>

      <div class="ui-state-default" onmouseover="setCss(this,'ui-state-default','ui-state-active');"  onmouseout="setCss(this,'ui-state-active','ui-state-default');" style="margin-top: 20px; padding:2px;">
         <a href=".." >default→active</a>
      </div>
<body>
</html>

デモ

CSS Framework

jQuery UIでは、CSSフレームワークで簡単なデザインオブジェクトを提供してくれています。

Interaction States

「Interaction States」では、ラベルやリンク、ボタンに適したクラスを提供してくれています。

.ui-state-default

ボタンのようなクリックできるエレメントに適用できるクラスです。デフォルト状態のスタイルです。

.ui-state-hover

ボタンのようなクリックできるエレメントでマウスオーバーの際に適用できるスタイルです。

.ui-state-focus

ボタンのようなクリックできるエレメントでキーボードでフォーカスされた際に適用できるスタイルです。

.ui-state-active

ボタンのようなクリックできるエレメントでマウス選択状態で適用できるスタイルです。

以上、ご参考まで。