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

カルーセルモジュール：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行にもたらすことを許してください、私は抵抗できませんでした。 私が使用Y.CarouselAnimPlugin 1ページからだけではなく、即座に次のページを表示する他にスムーズに私たちのカルーセルのスライドをさせること。 必要に応じて速度パラメータで再生すること自由に感じなさい。

あなたは上記のスクリーンショットからわかるように、カルーセルは稼働しています。 ただし、CSSは、ページの残りの部分に非常によく適合しない場合があります。 これは、我々がギャラリーカルーセルをカスタマイズする方法を説明します私たちの次のセクションでは、私たちをリードしています。

ギャラリーカルーセルをカスタマイズする

今すぐあなたのカルーセルを起動して実行してあなたのウェブサイトのためのユースケースを識別し、あなたがうまくいけば、シームレスに統合したいと思います。 前述のように、我々はスポーツの検索結果ページのようにした。 あなたは3つから4つに、例えば、表示されるアイテムの数を増やしたい場合は、カルーセルをインスタンス化する行を変更することによって行うことができます。

  VARカルーセル=新しいY.Carousel（{のBoundingBox： "＃コンテナ"、
  contentBox：numVisible、 "＃コンテナは> OL"：4}）; 

まだ十分では良くない？ ええ、右。 幸いにも、CSSは、我々独自のスタイル定義を追加したり、既存のCSSを触れずに初期のものを上書きすることができます。 彼らは非常に目障りなので、だからあなたの最初のステップは、おそらく、罫線を削除することであろう。 ちょうどあなたのページヘッダーに次のCSSを追加します。

  。YUI 3カルーセル{
  国境：なし重要。！
 }
 。YUI 3カルーセル-NAV {
  背景：なし重要。！
 }
 。カルーセルオールリチウム{
  国境：なし重要。！
 } 

今、それは良く見えます。 私はまた私のカルーセルと見出しの間のギャップを減らすためにネガティブマージンを使用しました。 しかし、我々は完全に残っていません。 私はまた、あなたのページレイアウトにうまく統合する独自のカスタムボタンを使用することを想定しています。 この例では、我々はまた、Yahooの検索結果ページに使用されているものと同じボタンを使用します。 これがもう少し必要ですが、それでも、単純なCSS。

  。YUI 3カルーセルボタン{
  背景：URL（ "sprite_button.png"）ノー繰り返しスクロール透明0 0重要。
  高さ：20px重要な、幅：28px重要。！
 }
 。YUI 3カルーセル-NAV-アイテム{
  背景：URL（ "sprite_button.png"）ノー繰り返しスクロール透明0 0重要。
  背景の位置：-133px 0重要。！
 }
 。YUI 3カルーセル·ファースト·ボタン{
  背景の位置：-90px 0重要。！
  マージン右：35px重要。
 }
 。YUI {3  - カルーセル·ファースト·ボタンが無効
  背景の位置：-60px 0重要。！
  マージン右：35px重要。
 }
 。YUI 3カルーセル·次のボタン{
  背景の位置：-30pxの0は重要。！
 }
 。YUI {3  - カルーセルボタンが無効
  背景の位置：0 0重要。！
 }
 {YUI 3カルーセル-NAV-アイテム選択
  背景の位置：-121px 0重要。！
 } 

我々は今日のためにそれにそれを残し、あなたが開始する準備ができて感じる期待されます。 少なくとも、それは我々が必要とするすべてであった。 あなたのサイトであり、どのように興味を持ってあなたがその性能にどれくらい大きいしかし、に応じて、またここに適用されるサードパーティのコンテンツ配信ネットワークから何かをロードに関する一般的な考えがあります。 たとえば、Sidnei·ダ·シルヴァは、今月のブログ投稿で、いくつかの興味深い考えを打ち出した。 我々は、YUIウィジェットとその依存関係はあなた自身のウェブサイト、あるいは、コンテンツ配信ネットワークに移動することができますどのように説明することにどのように提供するために幸せになるので、可能な限り低くHTTPリクエストの数を維持することができます。 あなたが興味を持っているかどうか知らせ、私たちはあなたのフィードバックを楽しみにしています！

ギャラリーでもっと詳しく

Liferayのエドゥアルド·ラングレンとネイトキャバノーの優れたチームが持っているだけでなく、ギャラリーでカルーセルコンポーネントを -確かに、あなたがコントロールする、この種の市場でなら一見の価値。

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

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