ياهو مدونة المستخدم واجهة (YUIBlog)

في معرض YUI 3 : وحدة كاروسيل

13 ديسمبر 2010 في 11:53 بواسطة Venkatesan جوبال وفرانك فابيان | في التنمية ، YUI 3 معرض | 16 تعليقات

ما هو كاروسيل؟

عنصر تحكم يوفر كاروسيل مصغر للتصفح بين مجموعة من الكائنات مثل المحتشدة عموديا أو أفقيا في منطقة مثقلة الصفحة. في "كاروسيل" استعارة مستمد من وجود تشابه إلى الشريحة carousels في أيام التصوير السينمائي ، ويمكن الحفاظ على السيطرة كاروسيل الاخلاص لهذه الاستعارة عن طريق السماح مستمر ، والملاحة التعميم من خلال كل من كتل المحتوى.

وكاروسيل هو جزء من عائلة مكونة من الحاجيات التي تسمح لك "الزائد" مساحة على الصفحة ، وتوفير المزيد من المحتوى لهذا الفضاء من خلال أبعادها يناسب مع توفير وسيلة سهلة ، وآلية بديهية للمستخدم لاكتشاف والتنقل في محتوى إضافي . الأكورديونات ، علامات والأشجار وScrollViews أمثلة أخرى من هذا النوع.

ماذا بعد السيطرة كاروسيل آخر؟

YUI 3 حاجات قوية وغنية بالمميزات كاروسيل (كما هو الحال لدينا في YUI 2 ). كان الهدف لهذا التصميم لجعله كاروسيل العجاف ونظيفة وإضافة تكوينات إضافية من خلال المحمول ، والاستفادة من YUI 3 ' ق الجوهرية لدعم نمطية للحفاظ على خفة وسرعة.

YUI 3 القطعة الإطارية

واحدة من أكبر مزايا الكتابة الحاجيات مستخدما YUI 3 هو إطار القطعة (أكثر على الإطار القطعة : دليل المستخدم ، مقدمة في العمق الفيديو ). مقارنة كاروسيل في YUI 2.8.2 لبلدي YUI كاروسيل معرض 3 ، 3 YUI الإصدار ممشوق وأنيقة. هذا لأن معظم من رفع الأحمال الثقيلة فيما يتعلق بتوفير الأساس توفير مجموعة مشتركة من سمات مصغر ، دورة حياة منضبطة ، وتعزيز الدعم التدريجي ، وما إلى ذلك يأتي مع الفئة القطعة.

الإطار YUI القطعة 3 يوفر أيضا نمطا MVC متسقة الذي يشجع كل مصغر لاعتماد الفصل بين أساليب الدولة في مقابل الأساليب تحديث واجهة المستخدم. هذا يجعل رمز نظيفة جدا وصيانة. في الواقع هذا هو أحد العوامل الهامة التي تجعل من 3 YUI كاروسيل أفضل من ابن عم لها في وقت سابق من 2 المستندة إلى YUI.

و YUI 3 المساعد النموذج يسمح للمطورين لإضافة وظائف جديدة أو تعديل السلوك القائمة على الكائنات. وهذا يسمح بإضافة وظائف إضافية على رأس كاروسيل حيوي لسحب العناصر من خلال اياكس ، وما إلى ذلك ، 3 YUI كاروسيل لا يكون رمز الحركة خبز في ذلك ، ولكن بدلا من ذلك خلقت البرنامج المساعد الذي يضيف دعم الرسوم المتحركة في الحالات التي تمس الحاجة إليها . هذا يساعد على إبقاء المكون خفيفة جدا.

وكاروسيل معرض لموقع الويب الخاص بك

بعد القراءة عن ما هو كاروسيل ، وكيف يمكن أن تساعدك على تحسين موقع الويب الخاص بك ، فإنك تشعر نأمل حريصة على الحصول على أيديكم القذرة. لا تقلق ، مع شركائنا YUI 3 تمديد معرض كاروسيل ، وتنفيذ دائري على موقع الويب الخاص بك سهلا كما هو توفير قائمة نقطية في HTML. هذا ليس مجرد بيع ارض الملعب -- هذه هي الطريقة التي كنا كاروسيل المتكاملة مؤخرا معرض في صفحة الرياضة ياهو نتائج البحث.

وهناك مثال بسيط

دعونا نبدأ مع مثال بسيط من شأنها أن تغطي تقريبا كل شيء تحتاج إلى معرفته. أسهل طريقة لاستخدام كاروسيل معرض جديد هو السماح YUI 3 تحميل automagically فإنه من ياهو شبكة المحتوى التسليم. إذ تشير إلى ما هو كاروسيل ، وقائمة قابلة للتمرير من البنود ، ونحن إنشاء قائمة في HTML. نحن وتشمل قائمة في شعبة ، والذي يسمح جافا سكريبت لتجد بسهولة والعمل معها. إذا كان لديك بالفعل بعض البيانات التي يتم تمثيلها في طريقة تشبه في قائمة العلامات الخاصة بك ، كما كنت قد وضعت للتو في شعبة دائري حولها واختبار حظك! من المهم جدا أن أقول إنه على الرغم من أننا نستخدم مثال صورة هنا ، يمكنك استخدام كاروسيل معرض عن أي شيء تريد!

  <divclass="carousel" id="container">
   <ol>
     <li><imgsrc="img/c1.jpg"> </ لى>
     <li><imgsrc="img/c2.jpg"> </ لى>
     <li><imgsrc="img/c3.jpg"> </ لى>
     <li><imgsrc="img/c4.jpg"> </ لى>
     <li><imgsrc="img/c5.jpg"> </ لى>
     </ OL>
 </ DIV> 

الآن أن لدينا بياناتنا للعمل مع ، ونحن نريد لتعزيز يبدو من خلال اظهار جميع البنود الخمسة باستخدام القطعة كاروسيل. على افتراض أن كنت تستخدم بالفعل YUI 3 هذه المهمة مباشرة. الشيء الوحيد الذي قد لا يكون لديك مثيل من قبل ، اعتمادا على مدى عمق كنت قد حفر في YUI (3) ومعرض في الماضي ، هو أننا تحديد صيغة معرض بشكل صريح. هذا ضروري لأننا باستخدام مصغر العلامة التجارية الجديدة ، وهي ليست بما في ذلك في معرض بناء تلك YUI لودر يحاول تحميل من افتراضيا. لكن ، وكما YUI وYUI معرض ناضجة ، وهذا لن يكون من الضروري بعد الآن في المستقبل عندما يتم زيادة عدد بناء الافتراضي.

  YUI ({معرض : "معرض 2010/10/20 - - 19 - 33'})
  . استخدام ("معرض - دائري" ، "معرض ، دائري ، أنيم" ، "البديل" ، وظيفة (ص) {
   فار = دائري جديد Y. كاروسيل ({boundingBox : "حاوية #" ،
    contentBox : "# حاوية> رأ"}) ؛
   carousel.plug (Y. CarouselAnimPlugin ، {الرسوم المتحركة : {السرعة : 0.7}}) ؛
   carousel.render () ؛
 }) ؛ 

(بالمناسبة ، إذا كنت ترغب في الحصول على الاشياء العلامة التجارية الجديدة يمكنك زيارة معرض YUI 3 مستودع على github أو شوكة في جوبال ، حيث يتطور كاروسيل. إذا وجدت خطأ ، ونحن دائما سعداء لسماع ذلك.)

العودة الى مثالنا... YUI سوف أعتبر من هنا. المحمل تسحب تلقائيا معرض كاروسيل وتابعيها من ياهو شبكة المحتوى التسليم. بعد ذلك ، يتم تهيئة كاروسيل وعرضها. يمكن للمستخدم ثم انقر على السهم إلى اليسار أو اليمين للتمرير حولها. يرجى أن يغفر لي لجلب في سطر واحد من التعقيد لا لزوم لها ، لكنني لا تقاوم. كنت Y.CarouselAnimPlugin للسماح لدينا شريحة دائري بسلاسة من صفحة واحدة إلى أخرى بدلا من مجرد عرض في الصفحة التالية على الفور. لا تتردد في اللعب مع المعلمة إذا كنت ترغب في سرعة.

كما ترون من الصورة أعلاه ، وكاروسيل هو وتشغيلها. ومع ذلك ، قد لا يصلح CSS جيدا في بقية الصفحة الخاصة بك. هذا يقودنا إلى القسم القادم ، حيث سنناقش كيفية تخصيص معرض كاروسيل.

تخصيص معرض كاروسيل

الآن أن لديك كاروسيل الخاص وتشغيلها والتعرف على حالة الاستخدام لموقع الويب الخاص بك ، وتريد أن نأمل دمجه بسلاسة. كما ذكرنا سابقا ، وفعلنا ذلك لدينا رياضة صفحة نتائج البحث. إذا كنت ترغب في زيادة عدد العناصر مرئية ، على سبيل المثال 3-4 ، يمكنك القيام بذلك عن طريق تعديل الخط الذي instantiates كاروسيل.

  فار = دائري جديد Y. كاروسيل ({boundingBox : "حاوية #" ،
  contentBox : "# حاوية> رأ" ، numVisible : 4}) ؛ 

لا تزال ليست جيدة بما فيه الكفاية؟ نعم ، هذا صحيح. لحسن الحظ المغلق يسمح لنا لإضافة تعريفات لدينا أسلوب الكتابة الخاصة ، وحتى تلك الأولية دون لمس أي CSS القائمة. لذلك سوف يكون الخطوة الأولى على الأرجح إلى إزالة الحدود ، لأنها نافرة تماما. فقط إضافة المغلق التالي لرأس الصفحة.

  . YUI 3 دائري {
   الحدود : لا شيء مهم ؛
 }
 . YUI - 3 - دائري الملاحة {
   خلفية : لا شيء مهم ؛
 }
 . رأ دائري لى {
   الحدود : لا شيء مهم ؛
 } 

الآن ، والتي تبدو أفضل. لقد استعملت أيضا الهامش السلبي لتقليل الفجوة بين كاروسيل ورئاسة مجلس بلدي. ومع ذلك ، ما زلنا لم نصل تماما. أفترض أنك تحتاج أيضا إلى استخدام الأزرار المخصصة الخاصة بك ، والتي تدمج بشكل جيد في تخطيط الصفحة الخاصة بك. على سبيل المثال هذا سوف نستخدم نفس الأزرار التي يتم استخدامها أيضا على صفحات ياهو نتيجة البحث. وهذا يتطلب أكثر قليلا ، ولكن لا تزال بسيطة ، CSS.

  . YUI 3 دائري على زر {
   خلفية : عنوان ("sprite_button.png") عدم تكرار التمرير 0 0 شفافة الهامة ؛!
   الطول : 20px الهامة ؛ العرض :! 28px الهامة ؛
 }
 . YUI - 3 - دائري الملاحة البند {
   خلفية : عنوان ("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 - دائري الملاحة البند مختارة {
   الخلفية موقف : 121px - 0 من الأهمية بمكان ؛!
 } 

سوف نغادر إلى هذا اليوم ، ونأمل تشعر بأنك مستعد للبدء. على الأقل كان هذا كل ما نحتاجه. ومع ذلك ، اعتمادا على كيفية كبيرة موقعك ، وكيف كنت مهتما في أدائها ، وهناك أفكار عامة حول تحميل شيء من طرف ثالث شبكة توصيل المحتوى التي تنطبق هنا أيضا. على سبيل المثال ، وضعت Sidnei دا سيلفا الى بعض الأفكار المثيرة للاهتمام في بلوق وظيفة في وقت سابق من هذا الشهر. سنكون سعداء لتقديم كيفية أن يشرح كيف يمكن تحريك القطعة YUI وتبعياته إلى موقع الويب الخاص بك ، أو محتوى الشبكة حتى التسليم ، لذلك كنت قادرا على الحفاظ على عدد من طلبات HTTP عند أدنى مستوى ممكن. دعونا نعرف إذا كنت مهتما ، ونحن نتطلع إلى تعليقاتك!

المزيد من الجهود لاستكشاف في معرض

و فريق ممتاز من ادواردو لوندغرين ونيت كافانو من Liferay يكون عنصرا كاروسيل في معرض كذلك -- وبالتأكيد تستحق التدقيق بها اذا كنت في السوق لهذا النوع من الرقابة.

العثور على المحادثات : المدونات | technorati

وتوسيع حصة : المرجعية مع متواجد حاليا | مراجعته ذلك! | reddit!