jQuery の Selector でカンマを使うと異なる要素の OR をとれる

jQuery の Selector でカンマを使うと異なる要素の OR を取れます。

次のように、異なる要素に対して同じ操作をするときは、

      $('#c1')
        .ToolTip({
            className: 'tooltip',
            position: 'mouse',
            delay: 500
          });

      $('#c2')
        .ToolTip({
            className: 'tooltip',
            position: 'mouse',
            delay: 500
          });

      $('.handle')
        .ToolTip({
            className: 'tooltip',
            position: 'mouse',
            delay: 500
          });

      $('a', '#r')
        .ToolTip({
            className: 'tooltip',
            position: 'mouse',
            delay: 500
          });

次のように、カンマを使えばよいですね。

   $('#c1, #c2, .handle, #r a')
     .ToolTip({
      className: 'tooltip',
   position: 'mouse',
   delay: 500
    });

カンマが OR と連想しにくい気がしますが、覚えてしまえば JavaScript コードのタイプ数をかなり減らせます。

オープンソースZen Cartカスタマイズ・ガイド―テンプレート、スタイルシート、JavaScriptからモジュール、管理画面のカスタマイズまで 佐久嶋 ひろみ by G-Tools

Interface Elements の Scrollto でページ内リンクを快適スムースに！

Postal Search Ajax API リファレンス のページ内リンクのジャンプを Interface elements for jQuery の Scrollto を使って、スムースにスクロールするようにしました。

いわゆる普通のページ内リンクだと、即ジャンプしてしまうので、油断しているとページ内のどこにジャンプしたのか判断できなくなることがありました。が、Scrollto を使ってスクロールするようにしたところ、ページ内リンクの振る舞いが視覚的になり、何が起こっているのか判断しやすくなりました。

実例を見る

Scrollto を使ったスクロールは、次のようなページ内リンクがあったとすると、

<a href="#Postal">Postal オブジェクト</a>

そのスクロール先は、ページ内リンクで指定した # 以降の id を持つ要素になります。ページ内リンクは name 属性を使うことが多いようですが、Scrollto を使うときは id 属性である必要があります。

<a id="Postal"></a>

Interface elements for jQuery のロードは、次のように interface.js を指定するか、

<script type="text/javascript" src="interface.js"></script>

もしくは、次のように iutil.js、ifx.js、ifxscrollto.js を指定します。

<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="ifx.js"></script>
<script type="text/javascript" src="ifxscrollto.js"></script>

後はページ内リンクを含む要素に対して、ScrollToAnchors メソッドを呼び出すだけで完了です。

ScrollToAnchors メソッドの第1引数はスクロール速度です。'slow'、'normal'、'fast' かミリ秒を数値で指定します。

第2引数はスクロールの方向軸です。'vertical' か 'horizontal' を指定します。省略したときは、スクロール先に最短距離で(スクロール先が斜め方向なら斜めに)スクロールします。

<script type="text/javascript">
jQuery(function($) {
  $('#content')
    .find('a[@id]')
      .css('display', 'block')
      .end()
    .ScrollToAnchors('slow');
});
</script>

上の例では a タグを block 要素に変更しています。これは Opera 9 向けの対応です。Opera 9 では スクロール先が inline 要素だと、その要素がスクロール先にならず、ページの先頭にスクロールしてしまいました。Opera 9 を考慮するならスクロール先は block 要素にする必要があります。


実例を見る

USBハード&ソフト開発のすべて―USBコントローラの使い方からWindows/Linuxドライバの作成まで (TECHI―Bus Interface) インターフェース編集部 by G-Tools

Interface Elements の Tooltips をいろいろな要素で使ってみた

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)をタイル状に並べます。

次に Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

続けて Interface elements for jQuery の Slider を使って、ハンドルをスライドすると、旅行記の写真(小)のサイズを拡大(または縮小)表示します。

さらに Interface elements for jQuery の Tooltips を使って、郵便番号の入力ボックス、スライダのハンドル、旅行記の写真(小)にマウスをポイントすると、ツールチップを表示します。

デモを見る

Tooltips は delay オプションを省略すると、表示がチラチラ(チカチカ)して見栄えがよくありません。delay オプションは 200 から 500 あたりが適切のようです。

a 要素のツールチップは title 属性の値のほかに href 属性の値 (URL) も表示してしまいます。URL を表示したくないこともありそうですが、そのオプションはないようです。

input 要素に position オプションの mouse を指定すると、input 要素のフォーカスがある間は、ツールチップがマウスポインタに追随してしまうため、少し違和感があります。bottom にすると、ツールチップがすぐに消えてしまいます。input 要素でツールチップを使うには、ちょっとしたコツが必要そうです。

input 要素や a 要素のほかにも、スライダのハンドルのような div タグでもツールチップを表示できます。


デモを見る

Paper×Paper―uiの紙工作 中林 うい by G-Tools

Interface Elements の Carousel とフォートラベル API で旅行写真の 3D ギャラリーを作る

デモを見る

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)を20枚ほど並べます。

次に Interface elements for jQuery の Carousel を使って、旅行記の写真(小)を奥行きのある回転をしながら表示します。

続けて Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

      $('#r').Carousel({
        items: 'a',
        itemWidth: 120,
        itemHeight: 90,
        itemMinWidth: 60,
        rotationSpeed: 10.0,
        reflections: .5
      });

画像のサイズは横幅が基準となるようです。ですので、itemWidth はとり得る最大の横幅を、itemMinWidth は最小の横幅を指定します。itemHeight は不要そうですが、回転しながら表示する位置を決めるために使うようなので itemWidth と同じくとり得る最大の縦幅を指定しています。

rotationSpeed は通常の回転の速度ではなく、マウスをポイントしたときの回転の速度を表します。この値は重みのようで、数値を大きくすればするほど速くなります。

reflections は写真が反射して写り込む量を表します。0.0 だと反射なし、0.5 だと半分ほど反射し、1.0 だとすべて反射するようです。

KOKUYO アルバム絵本 旅行ブック お仕立て券16ページ写真13枚 KSSK-AEK13-1P by G-Tools

Interface Elements の Slider で旅行写真を拡大(または縮小)表示する

デモを見る

はじめに フォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて見つかった旅行記の写真(小)をタイル状に並べます。

次に Interface elements for jQuery の Imagebox を使って、旅行記の写真(小)をクリックしたとき、その写真(大)をポップアップしてオーバーレイ表示します。

続けて Interface elements for jQuery の Slider を使って、ハンドルをスライドすると、旅行記の写真(小)のサイズを拡大(または縮小)表示します。

    var handle = $('<div />')
      .addClass('handle');
    $('<div />')
      .addClass('slider')
      .append(handle)
      .appendTo('#r')
      .Slider({
          accept: $('.handle'),
          onSlide: function(cordx) {
            $('img', '#r')
              .attr('width', .6 * cordx + 60)
              .attr('height', .45 * cordx + 45);
          }
      });

ハンドルをスライダしたとき、その値 0 から 100 に応じて、旅行写真の画像サイズを変化させています。横サイズは最小 60 から 最大 120 まで、縦サイズは最小 45 から 90 まで変化します。

世界の車窓から ―あこがれの鉄道旅行― Vol.4 遥かなる大地を行く(DVD付) by G-Tools

jQuery を使って入力ボックスに郵便番号のマスクを適用してみた

デモを見る

jQuery を使って、入力ボックスに郵便番号のマスクを適用してみました。

入力ボックスがフォーカスを得ると、"1234567" の書式での入力に制限します。また、入力済みの郵便番号があるときは、その郵便番号を選択状態にします。
入力ボックスがフォーカスを失うと、"123-4567" のハイフン付きの書式に変更します。

カット & ペーストに対するマスクは対応していません。今後の課題です。現在、シンプルかつ確実な方法を模索しています。

jQuery(function($) {

$('#c')
  .keypress(function(e) {
      var code = typeof(e.charCode) != 'undefined'
        ? e.charCode : e.keyCode;

入力した文字コードを判別するため、ブラウザの差異を吸収します。Firefox など charCode プロパティを持つブラウザは charCode プロパティを、IE など charCode プロパティを持たないブラウザは keyCode プロパティを使います。
なお fix_events.js プラグインを使うと、キーボードイベントのブラウザの差異を吸収できるようです。

      if (code && !e.ctrlKey)

なんらかの文字を入力して Ctrl キーを押していないとき、文字の入力を制限します。
Ctrl キーを除外しているのは、カット (Ctrl+C) & ペースト (Ctrl+V) などを受け入れるためです。

        if ((code < 48 || code > 57)
          && code != 8 // BACKSPACE (Safari3)
          && code != 9 // TAB (Safari3)
          && code != 13) // RETURN (IE6, Opera9, Safari3)
            e.preventDefault();
    })

数字以外の文字のときはイベントをキャンセルし、既定の振る舞いをするよう促します。
ただし preventDefault メソッドの解釈がブラウザにより異なるため、バックスペースキー、タブキー、リターンキーのみ明示的に受け入れるようにしています。

  .focus(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      this.maxLength = 7;
      this.value = c;
      $(this).select();
    })

フォーカスを得たとき、入力ボックスの値を数字だけに変更します。このとき、入力文字数を7文字に制限して、入力済み数字があれば選択状態にします。

  .blur(function() {
      var c = this.value;
      c = c.replace(/[^\d]/g, '');
      if (c.length >= 3)
        c = c.substr(0, 3) + '-' + c.substr(3);
      this.maxLength = 8;
      this.value = c;
    });

フォーカスを失ったき、入力ボックスの値を "123-4567" の書式に変更します。

$('#c')
  .blur();

WEB ページをロードしたとき、入力ボックスの明示的にフォーカスを失わせ、入力ボックスの値が "123-4567" の書式になるようにつじつまを合わせます。

$('#f')
  .submit(function() {
      $('#c').blur();
    });

}); //jQuery

フォームを送信するときも同様です。

となりのトトロ SG-047A 郵便番号 by G-Tools

Interface Elements の Slider で郵便番号を入力してみたが・・・

デモを見る

Interface elements for jQuery の Slider を使って郵便番号を入力します。

7つある Slider は郵便番号の桁に対応しています。最も上の Slider が郵便番号の1桁目で、下に向かって2桁目、3桁目と続きます。そして、最も下の Slider が7桁目です。

Slider がとり得る値は 0 から 100 の相対値か、Slider 要素の幅の 0px から style.width のピクセル値です。ですので、郵便番号の7桁のように大きな値の幅持ち、かつ1刻みで入力を必要とするケースには Slider は適しません。Slider を使おうとするとき、その用途ととり得る値が期待どおりなのか検討が必要になるでしょう。

<style type="text/css">
<!--

.slider {
  background-image: url(/postal/images/slider_resize_back.jpg);
  margin: 0.5em auto;
  width: 300px;
  height: 20px;
  position: relative;
}

.handle {
  background-color: #fff;
  border: 1px solid #ccc;
  height: 20px;
  width: 10px;
  cursor: move;
}

#f {
  text-align: center;
}

#c {
  width: 7em;
}

-->
</style>

<script type="text/javascript">
//<![CDATA[

jQuery(function($) {

$('.slider').each(function(i) {
  $(this).Slider({
    accept: $('.handle', this),
    onSlide: function(cordx) {
        var x = Math.floor(Math.max(0, cordx - 1) / 10);
        var c = $('#c').val();
        while (c.length < 7)
          c = '0' + c;
        $('#c').val(c.substr(0, i) + x + c.substr(i + 1)
        );
      }
  });
});

}); //jQuery

//]]>
</script>

<form id="f">
〒
<input id="c" type="text" name="c" value="" maxlength="7"/>
</form>

<div id="s1" class="slider"><div class="handle"></div></div>
<div id="s2" class="slider"><div class="handle"></div></div>
<div id="s3" class="slider"><div class="handle"></div></div>
<div id="s4" class="slider"><div class="handle"></div></div>
<div id="s5" class="slider"><div class="handle"></div></div>
<div id="s6" class="slider"><div class="handle"></div></div>
<div id="s7" class="slider"><div class="handle"></div></div>

となりのトトロ SG-047A 郵便番号 by G-Tools