Nakajiman Software Blog: jQuery UI

ラベル jQuery UI の投稿を表示しています。すべての投稿を表示

2008-06-09

『jQueryで作るAjaxアプリケーション』 6月19日販売予約開始

jQueryで作る Ajaxアプリケーションという本が 6月19日に発売されることを知りました。Amazon で予約できるようになってます。発行元の技術評論社の紹介ページに Amazon よりも詳細な目次が、さらに、Chapter 3 HTML要素の指定とCSSプロパティの操作のサンプル PDF もあります。

手にとって読んではいませんが、ざっと目次を見たところ、次のように jQuery UI も扱っているので、どのように紹介しているのか、実用的な使い方の提案まで含むのか、といったことが気にかかります。

Chapter 10 jQuery UIの基本とマウスによる要素の操作
Chapter 11 要素の並べ替えとドラッグ&ドロップ
Chapter 12 jQuery UIによる画面コンポーネント[1]
Chapter 13 jQuery UIによる画面コンポーネント[2]

過去の連載などをまとめたものかなと、同サイトを探してみましたが、jquery.jsを読み解くや jQueryではじめるAjax とは著者が違うようです。

上記も含めて関心がありますので、後日、手にとって確認してみます。

2008-05-01

Interface elements for jQuery サイトが復活してひと安心

Interface elements for jQuery サイトが消えてしまった!?

先週くらいなのですが、↑が参照できないことに気が付いたのですが、未だに復活していないようです。追記です。先ほど、ダメモトで、再開する予定があるかどうか、作者にメールしておきました。返事がもらえるといいなぁ。

Interface elements for jQuery のサイトが復活しました。

Interface elements for jQuery
http://interface.eyecon.ro/

作者の Stefan Petre 氏から返事があり、ホスティング会社がある措置のため、interface ホスト (サブドメイン) のみ停止していたとのことでした。そして、その後、すぐに再開してくれたようです。素早すぎる対応に感謝です。ありがとうございました。

また jQuer UI フォーラムの該当スレッドにもお知らせしておきました。

2008-04-30

Interface elements for jQuery サイトが消えてしまった!?

Interface elements for jQuery
http://interface.eyecon.ro/

先週くらいなのですが、↑が参照できないことに気が付いたのですが、未だに復活していないようです。どのページも 404 Not Found になるので、サイトは存在するけど、コンテンツがそっくり消失しているようです。

jQuery UI のフォーラムでも同じ質問のスレッドがあるのですが、ちゃんとした理由がわからずじまいです。↓こんな感じです。

interface.eyecon.ro offline?

I don't know if it's coming back online or not, but it hasn't been supported for a very long time. Have you considered switching to jQuery UI? If there are features or plugins that jQuery UI doesn't provide, just file tickets or post to this group :-)

> Hello everyone,
> I've noticed that the website interface.eyecon.ro is offline. Does
> someone knows how this comes? And if he is comming back online?
> Thanx!

ネットで検索してみると、jQuery-interface - Vox など、同じように気が付いた人がいるみたいです。

もうこのまま復活しないのでしょうかね。ソースコード自体は手元にあるので、なんとかなるのですが、オンラインデモが見れないのが、ちょっと困っちゃいます。連絡先がわかればアーカイブ化などをお願いできそうですが、どこに記載があるだろう。

ほんの少しですが、過去にいくつかデモを作っていますので、何かの参考になればと思います。う～む。もっとデモを作って公開しておくべきでした。悔やみます。

追記です。

先ほど、ダメモトで、再開する予定があるかどうか、作者にメールしておきました。返事がもらえるといいなぁ。

2008-03-15

再び BLOGRANGER TG tube サムネイルがぐるぐる回転します

マッシュアップレシピ BLOGRANGER TG tube 地図とタグと動画のビミョーな関係

以前の BLOGRANGER TG touch では、タグマップ API を使い、そのタグをキーワードに Google ニュースを検索することで、タグに関連するニュースを探すというマッシュアップを手軽に実現できました。今回も、同じパターンを使って、タグに関連する動画を YouTube を使って探すというマッシュアップを実現してみました。

以前に作った BLOGRANGER TG tube を少し改造してみました。

BLOGRANGER TG tube とは、今現在のブログ界の様子を表す仮想地図をスクロールしながら、ブログ界の話題と繋がりのある動画をビジュアルに探すことを目的とした HTML/Ajax ベースのマッシュアップアプリケーションです。

BLOGRANGER TG API を使って仮想地図を表示します。そして、その仮想地図の中央付近の話題と繋がりのある動画を YouTube Data API を使って検索し、その動画のサムネイルをグルっと一周する円として表示します。さらに、その動画のサムネイルをクリックすると、その動画を Flash Player を使って再生します。

BLOGRANGER TG tube は jQuery を使って API を繋ぎ合わせ、jQuery プラグインを使ってビジュアルな表現を実現しています。そのソースコードや実装の説明は、次のとおりまとめてありますので、参考になればと思います。

Jquery in Action
Bear Bibeault Yehuda Katz

Learning jQuery: Better Interaction Design and Web Development With Simple Javascript Techniques

Ajax: The Definitive Guide (Definitive Guide)

by G-Tools

2007-10-24

jQuery Cycle Plugin とフォートラベル API で旅行写真をシャッフル表示する

はじめにフォートラベル API の旅行記検索 API を使って、入力した郵便番号からその地域の旅行記を検索します。続けて、見つかった旅行記の写真(大)を img 要素として追加します。

次に JQuery Cycle Plugin の shuffle を使って、旅行写真(大)をシャッフルしながら繰り返し表示します。shuffle という効果はそのほかの効果と比べて、機械的な印象が薄く、少し人の雰囲気を感じるので気に入りました。

デモを見る

jQuery(function($) {

$('#f').submit(function(e) {
  var c = $(this.c1).val()
    + '-'
    + $(this.c2).val();
    
  var url = 'http://api.4travel.jp/Ver1/SearchAlbum.php'
    + '?callback={fn}';
  var params = $.param({
    format: 'jsonp',
    zip: c,
    max: 3
  });

  $('#r').empty();

  $('#i')
    .show()
    .jsonp(url+'&'+params, function(response) {
      $(this).hide();

      if (response.error)
        return;

      $.each(response, function(i, album) {
          
        $('<img />')
          .attr('alt', this.albumtitle)
          .attr('src', this.picture.replace(/sml/g, 'lrg'))
          .attr('width', 400)
          .attr('height', 300)
          .appendTo('#r');

        $.each(this.pictinfo, function() {
            
          $('<img />')
            .attr('alt', album.albumtitle)
            .attr('src', this.picturl.replace(/sml/g, 'lrg'))
            .attr('width', 400)
            .attr('height', 300)
            .appendTo('#r');
        });
      
      }); //$.each

      $('#r').cycle('shuffle');

    }); //.jsonp

  return false;
  
}).submit(); //.submit

}); //jQuery

ひとりたび2年生
たかぎなおこ

by G-Tools

2007-10-09

Interface Elements の ScrollToAnchors はページ内外リンクを区別してくれない!?

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

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

↑と思いきや、Interface Elements の ScrollToAnchors はページ内外リンクを区別していないため、# を指定したページ外リンクが機能しなくなってしまいました。なんてこった。

ScrollToAnchors (ifxscrollto.js) のソースコードは次のとおりです。a 要素の href 属性で # を含むものに click イベントを仕掛けています。このとき、# 以降の文字列をスクロール先の要素の ID として使っています。このように a 要素の href 属性の URL からページ内のリンクか、ページ外のリンクか区別していないため、# 指定のページ外リンクがページ内リンクと判断されます。

    ScrollToAnchors : function(speed, axis, easing) {
      return this.each(
        function()
        {
          jQuery('a[@href*="#"]', this).click(
            function(e)
            {
              parts = this.href.split('#');
              jQuery('#' + parts[1]).ScrollTo(speed, axis, easing);
              return false;
            }
          );
        }
      )
    }

ですので、ScrollToAnchors を使わずに、次のように自前のコードを用意しました。現在のページの URL を location.href から取得し、その URL を基準として、ページ内リンクか、ページ外リンクかを区別するようにしています。そして、ページ内リンクのときだけ ScrollTo を使って、ページ内をスムーススクロールするようにしています。

var pageUrl = location.href.split('#')[0];
$('a[@href]', '#content').each(function() {
  if (this.href.indexOf(pageUrl + '#') == 0) {
    var id = this.href.split('#')[1];
    $(this).click(function() {
   $('#' + id).ScrollTo('slow');
   return false;
 });  
  }
});

上記の自前のコードを適用したページは次のとおりです。ページ内外のリンクとも期待どおり機能するようになりました。

Postal Search Ajax API ダイジェスト
Postal Search Ajax API リファレンス

Jquery in Action
Bear Bibeault Yehuda Katz

by G-Tools

2007-09-26

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)
インターフェース編集部

USBターゲット機器開発のすべて―各種USBコントローラの使い方と基本ソフトウェアの作成法 (TECHI―Bus Interface)

USB 2.0とUSB On-The-Goを含むカスタムUSBデバイス開発のすべて USBコンプリート[第3版]

オリジナルUSB機器の設計と製作―USBインターフェースの基礎から応用までを豊富な設計・製作例を通して学ぶ (ハードウェア・セレクション)

Ethernetのしくみとハードウェア設計技法―プロトコルの詳細からネットワーク対応機器の作成まで (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の紙工作
中林うい

きもちが届く、手づくりてがみ。―身近な素材を切る、貼る、折る、縫う42 (AC mook―カフェタイムブックスシリーズ)

by G-Tools

登録: 投稿 (Atom)