ヤフーユーザーインターフェイスブログ（YUIBlog）

YUI 3.2.0で来る場合：SimpleYUI

この資料に記載されている機能では、YUI 3.2.0pr2現在において入手可能であり、それは今後の3.2.0リリースの一部となります。 この記事のコードに従うことで、今日それで遊んで開始することができます。

SimpleYUIロードおよびインスタンス化の新しい方法ですYUI 3 。 DOMタスク、イベントの抽象化、UI効果、およびAjax：SimpleYUIファイルは、基本的なAjaxライブラリの機能のロールアップが含まれています。 YUIをロードする他の方法とは異なり、SimpleYUIは、ロード直後にYUIのインスタンスを作成し、グローバルに含まれるすべてのコンポーネントをバインドするY変数。 SimpleYUIを使用すると簡単です。

 <スクリプトのタイプ= "text / javascriptに"
  SRC = "http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js"> </ SCRIPT>

 <SCRIPT>
  / / Yを使用する準備ができました。ないインスタンス化が必要：
  Y.one（ "＃foo"）をAddClassによって（ "ハイ"）;
 </ SCRIPT>

この社会運動では "ライト"やYUIのデ満足バージョンでは、 - あなたはSimpleYUIファイルを使用して起動したときにはまだライブラリ全体のパワーと機能のすべてにアクセスすることができます。 しかし、SimpleYUIは、いくつかの共通の機能をロールアップし、グローバルインスタンス（作成することによって、素晴らしい利便性を提供しYすぐに使用する準備は完了です。）

DOMでの作業

SimpleYUIはあなたにYUI 3 APIの標準的なDOMの相互作用のすべてを与えます。

 / /要素の参照を取得し、クリックハンドラを追加する
 Y.one（ '＃デモ'）上の（ 'クリック'、関数（電子）{/ *ハンドルをクリックします* /}）;

 / /要素にコンテンツを追加
 Y.one（ '＃デモ'）のappend（ 'その他のコンテンツは、＃デモを追加しました。'）;

 / /＃デモから派生する任意の<LI>上の任意のクリックをリッスンします。
 Y.one（ '＃デモ'）デリゲート（ 'クリック'、関数（電子）{/ *ハンドルをクリックします* /}、 'LI'）;

 / /ドキュメント上の任意のクリックの位置に＃デモ移動
 Y.one（ '文書'）（ 'クリック'、関数（電子）{上の
    	 Y.one（ '＃デモ'）setXY（[e.pageX、e.pageY]）;
	 }
 。）

UI効果を作成する

（新しい非3.2.0）YUI遷移モジュールの一部であるUI効果のすべてがSimpleYUIでご利用いただけます：

 / /＃デモフェードし、DOMからそれを削除します。
 Y.one（ '＃デモ'）。トランジション（{
    緩和： "イーズアウト"、
    期間：2、/ /秒
    不透明度：0
 }は、関数（）{
     this.remove（）;
 }）;

アヤックス

SimpleYUIは、IOモジュールの基本的なAjax機能を提供しています。

 / / 'get.php'にHTTPリクエストを作成します。
 Y.io（ 'get.php'、{
    上：{
        完全：関数（ID、応答）{
             VARデータ= response.responseText / /応答データ。
             / / ... 応答を処理する...
         }
     }
 }）;

YUIの残りの部分はわずか（）を使用です。

あなたがSimpleYUIが同梱されていたものに限定されるものではない。 あなたは、他のYUI 3成分にもたらすことができるYUI 3ギャラリーモジュール、またはYUI 2シンプルなコンポーネントuse()いつでも文。

 SimpleYUIプログラムのロールアップに含まれていません/ /を使用し、ドラッグ＆ドロップ：
 Y.use（ 'DD-ドラッグ "は、関数（Y）{
     VAR DD =新しいY.DD.Drag（{
        ノード： '＃foo'を
     }）;
 }）;

YUI 3は、あなたがそれを必要とするたびに必要なものをロードについて良好であり、単にマスターuse()ステートメントを、あなたは離れて、必要なライブラリには何から常にコードは1行だけだ。

時SimpleYUIを使用し...

• ...あなたは速く始めたいとYUIのロープを学ぶ;
• ...あなたは新しいYUIのインスタンスを作成せずにページの生活の中でいつでも利用できる基本的なAjaxライブラリの機能を持っていると思います。

時SimpleYUIを使用しないでください...

• ...性能が利便性よりも重要。
• ...あなたは別々のインスタンスにサンドボックスの実装の一部をしたい。
• ...あなたは、さまざまなコンポーネントの負荷とどのような正確なモジュール/サブモジュールの構造は、ページ上にある場合について意図的になりたいです。

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！