jQuery

jQuery UIでラベルを作る方法

2021年10月19日 by single コメントはまだありません

jQuery UIでラベルを作る方法

サンプル

ラベル

リンク
リンク
リンク
リンク
default→hover
default→focus
default→active

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

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

以上、ご参考まで。