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

YUI 3.3.0のプレビューリリース3

11月のYUIConfで私達はの私達の次のメジャーリリースでは、YUI 3.3.0のプレビューリリースYUI 3コードライン 。 我々は第三のプレビューリリースまで今なら、あなたは冬の休暇上のいくつかの時間があればそれにスピンを与えるために私たちはあなたを愛したいタイヤを断つお手伝いします。 を使うことができます中古品YUI 3.3.0pr1シード·ファイルを 、開始するYUILibrary.comからディストリビューションをダウンロード 、またはチェックアウトYUIBlogでホストされている3.3.0pr3分布を （注：性能が不足のためにYUIBlogに非常に緩慢であるコンボ処理、残りはあなたのCDN主導型の実装は一般的に）対応する3.2.0使用量よりも高速になりますのでご安心ください。

新しいもののいくつかは、このリリースで探します：

• 全く新しいオートコンプリート機能（ベータ版）
• 全く新しいチャート（ベータ版） 、SVGを搭載し、CanvasとVML
• すべて新しいDataTable（ベータ版）は、人気のYUI 2つのコンポーネントからより多くのモジュラーアップグレードの始まり
• 新しいダイヤルコントロール（ベータ版） 、ヤフーデザイナージェフ·コニフによって作成された有限の範囲に制御するか、スライダ上に取る革新的な
• 全く新しいリサイズユーティリティ（ベータ版） Liferayのエドゥアルド·ラングレン、YUI 3ベースのネイトキャバノーと共著者によって提供され、 AlloyUIのに使用可能な拡張機能YUI 3ギャラリー 。 （この中のエドゥアルドとネイト満たすことができますAlloyUI旋風ツアーがYUIConf 2010で撮影 ）。

そこにYUI 3.3.0好きなように、はるかにあり、GAの日付が近づくにつれて私たちはより多くの情報を共有しましょう​​。 現時点では、1月の第2週にリリースウィンドウを目指している。 我々は、プレビュー上のフィードバックを歓迎しますYUIフォーラムとのチケットデータベースは、新しいリリースを使用して独自の実装をテストする際に懸念される問題を発見した場合。

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

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

メンテナンスのために停止しYUILibrary.com（更新日：今すぐバックアップ）

12:32 2010年12月21日に更新します。バックアップおよび実行している-あなたはすべての問題を見れば私達に知らせてください。

私たちはメンテナンスのために今朝ダウンYUILibrary.com撮影した。 我々は最後の4-6時間にこの作品を期待しています。 ご不便をおかけして申し訳あり、我々はできるだけ短くダウンタイムを維持しようとするでしょう。

あなたはその間に緊急のサポートに関する質問がある場合には、しばしばお互いを助けるYUIコミュニティのメンバー数十人を見つけることができますFreenode.netの＃ゆいチャネルで落下することを検討してください。

YUIBlogと@ YUILibraryは、サイトをバックアップするときにアップデートを実行します。

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

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

YUI 2.9.0リリース更新

来週YUIチームは2011年第1四半期の後半に出荷するリリース2.9.0のための計画を開始します。 YUI 2.9.0は​​、2.xのコードラインの最後のメジャードットリリースとなり、チームは積極的にYUI 2プロジェクトに対するすべてのオープンチケットを見直し、いずれ彼らは2.9.0リリースの一部であることを割り当てて、閉鎖されます。それらは、 "修正されない"、またはYUI 3プロジェクトにそれらを移動します。

時間とリソースの制約の現実は、私たちはYUI 2.xにいくつかの閉鎖を提供し、私たちは3.xの開発に努力を倍加することができます最優先項目に焦点を当てるように強制します。 ここでは、リリース2.9.0に含まれるべきかを決定する際に私たちを導くために使用することがありますした基準のいくつかは、次のとおりです。

• 負のコアのユースケースに影響を与える問題。
• Aグレードのマトリックス上に新しいブラウザのリリースに関連する新たな問題。
• 拡張機能および新機能はYUI 2のデ優先順位とYUI 3のために考慮されます。

YUI 3のみに焦点を当てには2つの平行なコードラインを開発してからYUIチームの遷移は、YUI 2プロジェクトの終わりを意味するものではありません。 現在および将来のすべてのYUI 2のリリースでは、ヤフーCDN上でホストされ続けるYUI 2コードベースはGitHubでホストされ、引き続き、我々は将来的にはYUI 2のコミュニティベースのメ​​ンテナンスを探求したいと思います。

我々が計画プロセスを継続するとして、我々はコミュニティからのフィードバックを探して、リリースサイクルを通じて進捗状況を伝える、私たちのスケジュールを微調整することがあります。

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

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

strictモードでは、町に来ている

これは、世界中の人々は、ECMAScriptプログラミング言語標準、第5版のECMA総会の承認の一周年を記念して、その違いを忘れ、平和と交わりを一緒に来る時間や季節である。 ES5の中で最も重要な機能は、新しい厳格なモードです。 strictモードでは、OPT-モードでの言語のほとんどの問題は機能の一部を修理または削除することです。

Strictモードを指定する

strictモードを要求するには、2つの方法があります。 最初にこのプラグマを挿入することである

  "厳格な使用"; 

ファイルまたはコンパイル単位の先頭に表示されます。 これは、任意の他のステートメントの前に現れなければなりませんが、それは空白やコメントを付けることができます。 それは役に立たない文字列リテラル文の形式を持っているので、ES3システムによって無視されます。 これはまた古いブラウザ上で実行できるプログラムをES5/strict書くことが可能であることを意味します。 厳格なコードは、非厳密な（あるいはずさんな ）コードと対話することができますので、厳格な機能がずさんな関数を呼び出すことができますし、ずさんな機能は、厳密な関数を呼び出すことができます。 この互換性の高いレベルは、strictモードでの採用が容易になります。

を持つファイルまたはコンパイル·ユニット内のコードのすべて"use strict";プリアンブルは、厳密なコードとして処理されます。 問題がある、しかし。 パフォーマンスの考慮事項は、現在私たちが累積HTTPの遅延を避けるために、一緒に多くのJavaScriptファイルを連結するために強いる。 を持つファイルの場合"use strict";プリアンブルはそれに追加ずさんなコードを持って、ずさんなコードが厳しいとして処理され、おそらく失敗します。 簡単なルールがあります：同一ファイル内で厳格かつずさんな混在させることはできませんが、我々はすでにいくつかの有名なWebサイトがこの間違ったを取得してきました。

二番目の方法は、プラグマは、関数の最初の文のようになります。挿入することです。 これは、関数全体が内にネストされたすべての機能を含む、厳格になることを宣言しています。 厳密性を尊重関数スコープなので、厳密なコードとずさんなコードが同じファイルに混在させることができます。 この二番目の形式は非常にうまく機能モジュールのパターンとその多くのバリエーション。 それは連結の危険を回避するため二番目の形式は好ましい。

  （関数（）{
    "厳格な使用";
    / /この関数は厳密である...
 }（））;

 （関数（）{
    / /しかし、この関数はずさんである...
 }（））; 

範囲

歴史的には、JavaScriptは関数のスコープです。方法について混乱されています。 時には彼らは静的スコープと思われるが、一部の機能は、動的スコープであるようにそれらを動作させる。 これは読んで理解するのが難しいプログラムを作り、混乱しています。 誤解は、バグを引き起こします。 また、パフォーマンスの問題です。 静的スコープは、コンパイル時に発生するバインディング変数を許可しますが、動的スコープのための要件は、バインディングが大幅なパフォーマンスのペナルティが付属してランタイムに延期される必要があることを意味します。

厳密モードでは、すべての変数バインディングは静的に行われている必要があります。 それは以前に動的バインディングを必要とする機能を排除または変更する必要があることを意味します。 具体的には、 withステートメントが除去され、 eval呼び出し元の環境を改ざんするための機能の能力が厳しく制限されています。

厳格なコードの利点の一つは、のようなツールということであるYUI Compressorは、それを処理するときに良い仕事を行うことができます。

暗黙のグローバル変数

JavaScriptはグローバル変数を暗黙的にしています。 明示的に変数を宣言しない場合、グローバル変数は、暗黙的にあなたのために宣言されています。 彼らは基本的な家事の雑用の一部を無視することができるので、これは初心者のためのプログラミングが容易になります。 しかし、それは大規模なプログラムの管理がはるかに困難になり、それが信頼性が大幅に低下します。 したがって、strictモードでは、暗黙のグローバル変数は、もはや作成されません。 あなたが明示的にすべての変数を宣言する必要があります。

グローバルリーク

可能性がある状況がいくつかありthisグローバルオブジェクトにバインドするには。 あなたが提供するのを忘れた場合たとえば、 new接頭辞を 、コンストラクタ関数を呼び出すときに、コンストラクタがありthis代わりに新しいオブジェクトを初期化するグローバルオブジェクトへの予期しないバインドされるので、その代わりに黙って、グローバル変数を改ざんされます。 このような状況では、strictモードではなくバインドされthisにundefinedエラーがはるかに早く検出できるようになり、代わりに例外をスローするコンストラクタの原因となります。

騒々しい失敗

JavaScriptは常に読み取り専用プロパティを持っていましたが、ES5年代までは、それらを自分で作成できませんでしたObject.createProperty関数は、その能力を露呈した。 読み取り専用プロパティに値を代入しようとすると、それは静かに失敗しました。 代入は、プロパティの値を変更しないだろうが、それが持っていたかのようにプログラムが進みました。 これは、プログラムが不整合な状態になることがあります整合性の危険性があります。 strictモードでは、読み取り専用のプロパティを変更しようとすると、例外がスローされます。

8進数の

ワードサイズが3の倍数であったマシン上のマシンレベルのプログラミングを行うときに数字の8進数（または基数8）の表現は非常に有用であった。 60ビットのワードサイズを持っていたCDC 6600メインフレームで作業するときは、8進数を必要としていました。 あなたは8進数を読み取ることができれば、あなたは20桁、単語を見て可能性があります。 2桁はopコードを表し、1桁の8個のレジスタのいずれかを同定した。 マシンコードから高レベルの言語にゆっくりと移行中に、それはプログラミング言語で8進形式を提供するために有用であると考えられていた。

Cでは、octalnessの非常に不幸な表現が選ばれました：リーディングゼロ。 したがって、C言語で、0100は64ではなく、100を意味し、08はエラーではなく、8です。 さらに残念なことに、この時代錯誤は、それがエラーのみを作成するために使用されるJavaScriptなど、ほぼすべての近代的な言語にコピーされています。 それは他の目的を持っていません。 したがって、strictモードでは、8進形式は、もはや許されません。

エトセトラ

arguments疑似配列は、ES5でもう少しのような配列になります。 strictモードでは、その失ったcalleeとcallerプロパティを示しています。 これにより、あなたの合格することができるarguments秘密のコンテキストの多くを与えることなく、信頼できないコードに。 また、 argumentsの関数のプロパティが除去されます。

strictモードでは、関数リテラル内の重複するキーは、構文エラーが生成されます。 この関数は、同じ名前を持つ2つのパラメータを持つことができません。 関数は、パラメータの1つとして同じ名前を持つ変数を持つことはできません。 この関数は、できません。 delete独自の変数を。 しようとするとdelete 、非構成可能なプロパティは例外をスローします。 プリミティブ値は暗黙的にラップされていません。

あなたのプログラムに合格した場合JSLint 、それはおそらく、strictモードで動作します。

それはまだ不完全な世界です

strictモードでは対応していないことがJavaScriptでの問題が残っています。 たとえば、セミコロンの挿入は、まだ危険です、0.1 + 0.2は依然として0.3と等しくありません。 これらの問題の修正は、将来の版を待つ必要があります。

なぜ厳格なモード事項

プログラムの信頼性と読みやすさに明らかな利点に加えて、strictモードでは、マッシュアップの問題を解決するために役立っています。 我々は、コード、ブラウザを引き継ぐために、ユーザーまたは当社のサーバーに自分自身を詐称するライセンスを与えることなく、我々と我々のユーザーのために有用な事をする私たちのページにサードパーティのコードを招待できるようにしたい。 我々は、サードパーティのコードを制約する必要があります。 のようなシステムGoogleのカハは 、パフォーマンスと不便で、大幅なコストで、これを行います。 私自身のADsafeのシステムは、これを行いますが、排除の費用でthisと[]の採用が困難になる可能性が言語から添字。 strictモードでは、私たちはADsafeとカハの表現力の利便性とパフォーマンスをサードパーティのコードを行うことができます。 私たちのサイトがより複雑になり、より多くの接続されて、これは非常に重要になります。

厳密モードでは、XSSの問題を解決していません。 その問題を解決するには、依存するいくつかの肯定的な行動を取るW3C 。

ES5/strictは、プレビューになりました、すぐにどこでもすべての規格に準拠したブラウザで標準装備となります。

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

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

CSSのPositionプロパティ

このプロパティは、すべての要素に適用されます。 それは5つの可能な値があります。

• static
• relative
• absolute
• fixed
• inherit

位置：静的

第9節から視覚整形モデル ：

ボックスには、に従ってレイアウト通常のボックスであり、 通常の流れ 。 top 、 right 、 bottom 、そしてleftプロパティが適用されません。

には、注意すべき点は、このデモ

• 2番目のボックスは、それが位置宣言なしになる場所を正確に示しています。
• に与えられた値はtop "静的"コンテキストでは、の計算値は適用されませんので、 ボックスのオフセットは常にauto 。

覚えておくべき事

• 場合positionの要素のプロパティは値があるstatic 、その要素が配置されると言われていません 。
• ので、 static初期値（デフォルト値）ですが、それは別の値を上書きすることでない限り、宣言ブロック内のこのようなスタイルをインクルードする必要はありません。

位置：相対

第9節から視覚整形モデル ：

ボックスの位置は、通常の流れ（これは内の位置と呼ばれるに従って計算される通常のフロー ）。 その後、ボックスはその通常の位置からの相対位置にオフセットされます。 BはオフセットされていないかのようにボックスBが相対的に配置されている場合は、次のボックスの位置が計算されます。

には、注意すべき点は、このデモ

• ボックス '2'は、300ピクセル下に移動しましたが、ボックス "3"と同様に次の段落では、場所にとどまった。 それはボックスの背後にあるその足跡を残して、ページから解除された場合のように表示されます。 相対的に配置ボックスを相殺すると、 流れを乱さないためです。
• 相対配置のボックスと重なる次の要素。 それは他のボックスの前面に表示されます。

覚えておくべき事

• 計算値は常に=下=右、上残されています。 場合direction包含ブロックのはltr 、 '左'勝'right'の値になります- '左'。 場合direction包含ブロックのあるrtl 、 'right'の勝は'left'は無視されます。 著者らは、反対側のプロパティに同じ値を設定することによって、物事がどのように動作するかの利点を取ることができる。
• '絶対的な"モデルとは異なり、 top 、 right 、 bottom 、そしてleftプロパティは、ストレッチも（彼らはそのサイズを変更することはできません）ボックスを圧縮することはできません。

位置：絶対的な

第9節から視覚整形モデル ：

ボックスの位置（おそらくサイズ）で指定されているtop 、 right 、 bottom 、そしてleftプロパティ。 これらのプロパティは、ボックスのに対してオフセットを指定するを含むブロック 。 絶対配置のボックスは完全に正常な流れ（それが後の兄弟に影響を与えません）から削除され、包含ブロックに対する位置が割り当てられています。 かかわらず、また、 絶対配置のボックスはマージンを持っている、彼らはありません崩壊 、他のマージンと。

には、注意すべき点は、このデモ

• オフセットにはボックスが指定されていないため、ボックス'2'は、元の位置から移動しませんでしたが、我々が使用した場合top:0;left:0;たとえば、そのボックスには、であろうビューポートの左上隅 。
• レイアウト賢いボックス"の2つは'でスタイリングされていたように、それは、 display:none 。 ボックスは、 フローから削除されました。
• フローのボックス "2"外で、ボックス '3'は、ボックス "1"（段落が続いている）に対して、最大移動しました。
• フローから削除されたすべての要素は、ボックス '2'のように水平にシュリンクラップしています。

覚えておくべき事

• 任意の '絶対的'または'固定'配置された要素のための計算値displayあるblock 。
• 任意の '絶対的'または'固定'配置された要素のための計算値floatありませんnone 。
• 'を含むブロックは、 "ポジショニング·コンテキストを確立するボックスです。 それは、最も近い先祖によって確立されている'位置' 、 '絶対'相対'または'固定'の。これは、親ボックスが包含ブロックではないかもしれないことを意味。
• それはトップでスタイリングされたかのように絶対座標で配置されたボックスのデフォルトの位置は常に同じではありません。：0;左：0;（LTRコンテキスト内で）。 これは二つの理由からです。
  1. に配置ボックスの包含ブロックは、 最も近い祖先に配置することによって確立され、どれもが存在しない場合、リファレンスコンテナがルート要素です。 に含まれるブロックのルート要素の生活は初期包含ブロックと呼ばれる四角形のことです。 連続メディアのために、それはの大きさがあるビューポート （画面上のウィンドウまたは他の表示領域）と、キャンバスの原点に固定されている。 この例では、ビューポートとの関係（ブロックを含むデフォルト）に位置するボックスを示しています。
  2. 要素は、パディングボックスで、[ コンテンツ]ボックスにされていなかったり、包含ブロックの境界ボックスを基準に配置されます。 この新しい例では、パディングボックスのエッジは、コンテンツボックスの端を（を含むブロックはされて触れていない場合は、チェックボックス'二人'になる場所を示していますbody ）。
• ボックスの大きさの結果であるかもしれないtop 、 right 、 bottom 、およびleftプロパティ値。 例については、すべてのプロパティをゼロにすると、その包含ブロックのパディングボックスの寸法に合わせてボックスのストレッチを行います。 参照してくださいすべてのボックスのオフセットをゼロ （：IE6はボックスを伸ばしていません注意してください）。
• ドキュメント（のように一緒にスクロールしないマスクオーバーレイを作成するには、 前の例 ）、いずれかを使用してfixedの代わりにabsoluteまたはスタイルのbodyとのposition:relative 初期の位置決めブロック （スタイリングビューポートとして html IEで動作しません） 。 このようなオーバーレイのデモを示しています。
• position:absoluteトリガのhaslayout 。

覚えておくべき最も重要なこと

この位置決め方式はフローからボックスを削除しますので、レイアウトのためにそれを使用することは悪いpraticeと見なされます。

位置：固定

第9節から視覚整形モデル ：

固定位置は、絶対位置決めのサブカテゴリがあります。 唯一の違いは、固定位置決めボックスは、包含ブロックによって確立されていることであるビューポート 。 用連続メディアドキュメントがスクロールされている場合、固定ボックスは移動しません。 この点で、彼らは似ています固定の背景画像 。 のためにページ付けしたメディア （文書の内容は、1つまたは複数の離散的なページに分割されている）、固定位置とボックスは各ページで繰り返されています。 これは、各ページの下部には、例えば、署名を配置するのに便利です。 ページ領域よりも大きい固定位置とボックスが切り取られます。 初期包含ブロックに表示されない固定位置ボックスの一部が印刷されません。

には、注意すべき点は、このデモ ：

• 固定位置は、絶対位置決めのサブカテゴリであるため、 '絶対'は本当だったすべては '固定'（要素がシュリンクラップ、それがフローから削除された、など）にも当てはまります。
• ボックスは、 ビューポートとの関係に配置され、それがページでスクロールしていません。
• IE 6では、ボックスが表示され、静的なボックスとして 、しかし、 "面白い"がありますこの問題を回避するそのためには。
• ドキュメントを印刷する場合は、ボックス'2'は、すべての単一ページに表示されます。

覚えておくべきこと：

• ボックスの位置は、 "絶対的な"モデルに従って計算されていますが、加えて、ボックスがされて固定されたいくつかの基準に関して。 ハンドヘルド、投影、スクリーン、TTY、およびテレビのメディアタイプの場合には、ボックスに対して固定されているビューポートとスクロールしたときは移動しません。
• ボックスの一部がビューポート領域の外にある場合、コンテンツは、晴眼者にinaccessileかもしれません。
• printメディアタイプの場合には、著者らは、各印刷ページに表示されない要素を防止することができます。 多分のように、@ mediaルールを使用して：

   メディアプリント{@ 
     ＃ロゴ{位置：静的;}
   } 

• のようなposition:absolute 、 position:fixedトリガされますhaslayoutを IEで。

位置：継承する

場合position:inherit与えられたボックスに指定されている、それはボックスの親のプロパティと同じ計算値を取得します。

IE 6と7で使用する場合を除き、このキーワードをサポートしていないことに注意してdirectionとvisibility （参照CSSプロパティの値が継承 ）。

考慮すべき事項

ボックスのオフセット

絶対に、固定配置ボックスは、の割合で設定した値があることに注意してtop 、 right 、 bottom 、そしてleft 包含ブロックの寸法（親ボックスでないかもしれない）に従って計算されます。

'position'と 'オーバーフロー'

でスタイルボックスoverflow:hidden 、相対位置の要素（ネストしたボックス）をクリップしますが、それは常に絶対座標で配置されたものを非表示になりません。 親ボックスは常に包含ブロック（ 最も近い祖先ではないため、これは'位置' '絶対'は、 '相対的'または'固定'）。

要するに、これは絶対座標で配置された要素がオーバーフローでスタイルボックスの外側に表示されることを意味します。それらの包含ブロックは、ボックス自体または前記ボックス内の要素でない限り、隠された。 このデモページには、物事がどのように働くかを示しています。

マージン

著者は関係なく、位置決め方式の要素のマージンを使用することができます。

IEの場合

IEでは、 "位置"ボックスには、祝福や呪いかもしれません。

• IE6で、 position:relative (with haslayout)から負のマージンでスタイルボックスを防止するために使用することができるクリップされている （どのように参照して親コンテナでボックスを配置すると、この問題を修正）。
• これは新しいスタックコンテキスト（参照設定することができるように要素を配置すると、IE 6および7に方法ボックススタックを" 乱す "ことができるテストケースを ）。

重なり順とレベルをスタッキング

• ソースコード内の順序に従って、 配置ボックスは通常フローの浮動小数点数と箱の前に来る。
• 著者らは、 唯一の配置ボックスの'のz-index'プロパティを経由してスタックレベルを指定することができます。
• IE6と7では、ボックスを配置するという単純な事実は、スタックコンテキスト（上記参照、 "確立することができますIEの場合 "）。

モバイルデバイス

PPKの記事、読んで[第六]の位置の値をモバイル·ブラウザ·ベンダーが実際にサポートできない理由を見つけるために、 position:fixed 。

さらに測定値

• 視覚整形モデル
• 位置（CSSプロパティ）
• 位置の宣言

DrLangbhaniで"ゴースト"のアナロジー：

位置からの相対を持つ要素は、常に流れのそれの通常の位置からの相対位置にオフセットされます。 言い換えれば、それは通常の状況下であろう場所に対して相対的にシフトされ、それをシフトすると、その周りの要素のレイアウトには影響しません 。 それは背後にその本体を残している幽霊のようなものです。 幅と高さを持つとその周辺に影響を与えますが、見えないボディ。 幽霊のようなボックスが移動することができますが、その位置は、まだそれから測定されるという点ではまだ古いボディに接続されています。 現在位置の絶対を持つ要素はさらに簡単です。 それはもはや、すべての（それがレイアウトのフローから引き出されています）でその周囲に影響を与えません。 それが今に残さない身体の真のゴーストです。 それはもはや存在しない場合限り、その兄弟要素が懸念しているとしてそれは。 相対的な、[位置：固定]または位置：絶対あなたはどちらの位置に1を見つけるまで、その位置を取得するには、親要素のそれぞれに目を通す。 その要素は、参照ポイントとして使用する。 あなたは "位置付け"要素が見つからない場合にのみ、それが文書からオフセットされます。

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

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

カルーセルモジュール：YUI 3ギャラリーで

カルーセルとは何ですか？

カルーセル·コントロールは、オーバーロードされたページ領域内に垂直または水平に配列のようなオブジェクトのセットの中で閲覧するためのウィジェットを提供します。 "カルーセル"のメタファーは、フィルム写真の時代には、スライドカルーセルへの類推から派生して、カルーセル·コントロールは、コンテンツのすべてのブロックを介して連続的な、円形のナビゲーションを可能にすることにより、この比喩に忠実度を維持することができます。

カルーセルは、あなたに "過負荷"ページ上のスペースを、追加のコンテンツを発見し、ナビゲートするユーザーのために簡単に、直感的なメカニズムを提供しながら、そのサイズ内に収まるよりも、その空間のためのより多くのコンテンツを提供できるようにウィジェットの家族の一員です。 。 アコーディオン、タブ、ツリーとScrollViewsは、このジャンルの他の例である。

なぜ、まだ別のカルーセルコントロール？

YUI 3は、堅牢で機能豊富なカルーセル（私たちが持っているとして必要YUI 2 ）。 このカルーセルの設計目標は、スリムでクリーンな作りを生かして、プラグインを介して追加の構成を追加しましたYUIの3 '軽さとスピードを維持するためにモジュール化の本質的なサポートしています。

YUI 3ウィジェットフレームワーク

YUI 3を使用してカスタムのウィジェットを書くことの最大の利点の1つは、ウィジェット·フレームワーク（：ウィジェットフレームワークの詳細でユーザーガイド 、 ビデオ導入の深さで ）。 比較YUI 2.8.2のカルーセルを私にYUI 3ギャラリーカルーセル 、YUI 3のバージョンは、リーンとエレガントです。 ウィジェットの属性の共通セットを提供する基盤を提供することに関して、重い物を持ち上げる、統制のとれたライフサイクル、プログレッシブ·エンハンスメントのサポートなどの大部分はWidgetクラスが付属しているためです。

YUI 3ウィジェットのフレームワークは、UIの更新方法の対状態のメソッドの分離を採用するすべてのウィジェットを促進する一貫性のあるMVCパターンを提供します。 このコードは非常にクリーンで、メンテナンスが容易になります。 実際にはこれがYUI 3カルーセルは、その前にYUI 2ベースのいとこよりも優れている理由の重要な要因の一つです。

YUI 3プラグインモデルでは、開発者はオブジェクトに新しい機能を追加したり、既存の動作を変更することができます。 これは、動的に、YUI 3カルーセルは、それに組み込まアニメーションコードを持っていないのAjaxなどを介して要素を取り出すためのカルーセルの上に追加の機能を追加することができますが、代わりに私はそれが必要とされる場合のアニメーションのサポートを追加するプラグインを作成しました。 このコンポーネントは非常に軽量で維持するのに役立ちます。

あなた自身のウェブサイトのギャラリーのカルーセル

何カルーセルは、どのようにあなたのウェブサイトを向上させることができますを読んだ後で、うまくいけばあなたの手を汚すに熱心感じています。 私たちのYUI 3ギャラリーカルーセル拡張子の付いた、心配しないでください、あなたのウェブサイト上でカルーセルを実装するには、HTMLで箇条書きリストを提供するのと同じくらい簡単です。 それはただの販売ピッチではありません - それは我々が最近Yahoo!スポーツの検索結果ページにギャラリーカルーセルを統合方法を説​​明します。

簡単な例

ほとんどあなたが知っているために必要なすべてをカバーする簡単な例から始めましょう。 新しいギャラリーカルーセルを使用するための最も簡単な方法は、YUI 3は自動的にYahooのコンテンツ配信ネットワークからロードできるようにすることです。 カルーセルとは何かを想起し、項目のスクロール可能なリストは、我々は、HTMLのリストを作成します。 我々は、JavaScriptが容易に見つけ、それを扱うことができdivのリストが含まれています。 すでにあなたのマークアップ内のリストのような方法で表現され、いくつかのデータを持っていれば、またちょうどその周りにカルーセルdivを入れて、あなたの運をテストするかもしれません！ それは我々がここでの画像の例を使用しているが、あなたが欲しい何のためにギャラリーカルーセルを使用することができます、と言うことは非常に重要です！

  <div class="carousel" id="container">
   <OL>
     <LI> <img src="img/c1.jpg">た</ li>
     <LI> <img src="img/c2.jpg">た</ li>
     <LI> <img src="img/c3.jpg">た</ li>
     <LI> <img src="img/c4.jpg">た</ li>
     <LI> <img src="img/c5.jpg">た</ li>
     </ OL>
 </ DIV> 

今我々が動作するように我々のデータを持っていることを、我々はカルーセルウィジェットを使用して、すべての5つの項目を示すことによって、ルックスを強化したい。 あなたは既にYUI 3を使用していると仮定すると、これは簡単な作業です。 今まで見たことがないかもしれない唯一の事は、あなたが過去にYUI 3、ギャラリーに掘削されたか深くに応じて、我々が明示的にギャラリーのバージョンを指定しているということです。 我々はYUIのローダーは、デフォルトでからロードしようとしているビルドをギャラリーに含まれていないブランドの新しいウィジェットを使用しているので、これが必要です。 デフォルトでは、数が増加しているビルドしたときただし、YUIとYUIギャラリー成熟したように、これは将来的にはもはや必要ありません。

  YUI（{ギャラリー： "ギャラリー·2010年10月20日-19-33 '}）
  。使用（ "ギャラリー·カルーセル"、 "ギャラリー·カルーセル-Animの"、 "代替"は、関数（Y）{
   VARカルーセル=新しいY.Carousel（{のBoundingBox： "＃コンテナ"、
    contentBox： "＃コンテナ> OL"}）;
   carousel.plug（Y.CarouselAnimPlugin、{アニメーション：{速度：0.7}}）;
   carousel.render（）;
 }）; 

（あなたは全く新しいものを得ることに興味があればところで、あなたは訪問することができますYUI 3ギャラリーリポジトリを githubのかにゴパルのフォーク彼はカルーセル開発し、あなたがバグを見つけたら、我々は常にそれを聞いて幸せである。）

私たちの例に戻ると... YUIはここからそれを取るでしょう。 ローダーは、自動的にYahooのコンテンツ配信ネットワークからギャラリーカルーセルとその依存関係を取得します。 その後、カルーセルが初期化され、表示されています。 その後、ユーザーは周りにスクロールするには、左または右矢印をクリックすることができます。 不要な複雑さの1行にもたらすことを許してください、私は抵抗できませんでした。 I used Y.CarouselAnimPlugin to let our carousel slide smoothly from one page to the other instead of just displaying the next page instantly. Feel free to play with the speed parameter if you wish.

As you can see from the screenshot above, the Carousel is up and running. However, the CSS might not fit very well into the rest of your page. This leads us to our next section, where we'll discuss how to customize Gallery Carousel.

Customizing Gallery Carousel

Now that you have your Carousel up and running and identified a use case for your website, you hopefully want to integrate it seamlessly. As mentioned previously, we did so for our Sports Search Results Page. If you want to increase the number of visible items, for example from three to four, you can do so by modifying the line which instantiates Carousel.

 var carousel = new Y.Carousel({ boundingBox: "#container",
 contentBox: "#container > ol", numVisible: 4 }); 

Still not good enough? Yeah, right. Luckily CSS allows us to add our own style definitions and even overwrite the initial ones without touching any existing CSS. So your first step will probably be to remove the borders, because they are quite obtrusive. Just add the following CSS to your page header.

 .YUI 3-carousel {
  border: none !important;
 }
.YUI 3-carousel-nav {
  background: none !important;
 }
.carousel ol li {
  border: none !important;
 } 

Now, that looks better. I've also used a negative margin to reduce the gap between my Carousel and the heading. However, we are still not completely there. I assume that you also want to use your own custom buttons, which integrate nicely into your page layout. For this example we will use the same buttons that are also used on Yahoo's search result pages. This requires a bit more, but still simple, CSS.

 .YUI 3-carousel-button {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  height: 20px !important; width: 28px !important;
 }
.YUI 3-carousel-nav-item {
  background: url("sprite_button.png") no-repeat scroll 0 0 transparent !important;
  background-position: -133px 0 !important;
 }
.YUI 3-carousel-first-button {
  background-position: -90px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-first-button-disabled {
  background-position: -60px 0 !important;
  margin-right: 35px !important;
 }
.YUI 3-carousel-next-button {
  background-position: -30px 0 !important;
 }
.YUI 3-carousel-button-disabled {
  background-position: 0 0 !important;
 }
.YUI 3-carousel-nav-item-selected {
  background-position: -121px 0 !important;
 } 

We will leave it to that for today and hope you feel ready to get started. At least that was all that we needed. However, depending on how big your site is and how interested you are in its performance, there are general thoughts about loading something from a third party content delivery network that also apply here. For example, Sidnei da Silva laid out some interesting thoughts in a blog post earlier this month. We would be happy to provide a How To that explains how a YUI widget and its dependencies can be moved to your own website, or even content delivery network, so you are able to keep the number of HTTP requests as low as possible. Let us know if you are interested, we are looking forward to your feedback!

More to Explore in the Gallery

The excellent team of Eduardo Lundgren and Nate Cavanaugh of Liferay have a Carousel component in the Gallery as well — certainly worth checking out if you're in the market for this kind of control.

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

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

YUIシアター-ライアングローブ： "紹介YUI 3コンプリート"（42分）

In this talk from YUIConf 2010 , YUI 3 AutoComplete author Ryan Grove ( @yaypie ) takes you on a whirlwind tour of some of the many autocomplete patterns made possible by this component (which is coming in the soon-to-be-released YUI 3.3.0) and provides a deep dive into its powerful new YQL integration, filtering, and highlighting capabilities. ( Note : If you enjoy this talk, you might want to check out Ryan's other excellent talk from this year, “ Achieving Performance Zen with YUI 3 .”)

下に埋め込 ​​んだビデオがお好みのRSSリーダでは正しく表示されない場合は、必ずYUIシアターの映像の高解像度版を見るためにクリックスルー 。

• Download HD video (480p ~297MB)
• （M4V）ビデオをダウンロードする
• スライドをダウンロード

その他の最近のYUIシアター動画：

• Paul Donnelly and Nagesh Susarla: YQL + YUI: Building End-to-End Applications — When developing widgets, it's not how to use YQL data that comes up as a question, but rather how to access it. In this YUIConf 2010 session, YQL engineers Paul Donnelly and Nagesh Susarla review starting your query out in the YQL console, accessing YQL data via the various endpoints, and going through YQL's various authentication layers.
• Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 & YQL — In this session from YUIConf 2010, TipTheWeb cofounder and YUI contributor Eric Ferraiuolo discusses the creation of a project-scale codebase using YUI 3, YUI 3 Gallery, and YQL.
• Reid Burke: Yeti: YUI's Easy Testing Interface — Testing cross-browser web applications has been too difficult for too long: You're either manually reloading browsers or struggling with complicated automation software. In this session from YUIConf 2010, YUI engineer Reid Burke talks about how YUI's Yeti project helps to address these problems. Reid discusses when you should use automated testing for your frontend code, how Yeti works with YUI Test, how to setup cross-browser testing in minutes and how the YUI team uses Yeti to ship a better product.
• Douglas Crockford: Project Future — Yahoo! JavaScript architect Douglas Crockford reflects on the life of Walt Disney, who dreamed of creating a 'City of the Future' in Florida as part of the project that became Disney World. (This is not a technical session, but rather one about big dreams and the life lessons we can draw from them.)
• Tom Hughes-Croucher: How to Stop Writing Spaghetti Code — In this session from YUIConf 2010, Yahoo! engineer Tom Hughes-Croucher explores different coding styles for event-driven, non-blocking server-side JavaScript and which styles are most successful.

CCコンテンツ/親切な許可によって使用されます：

• http://www.flickr.com/photos/franksvalli/5166422476/
• http://www.flickr.com/photos/franksvalli/5165821437/

YUIシアターを購読する：

• YUI Theater RSS feed
• iTunesでYUIシアター

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

Share and extend: Bookmark with del.icio.us | digg it! | reddit!