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

YUI معاينة النسخة 3.3.0 3

22 ديسمبر 2010 في 12:26 من قبل اريك Miraglia | في التنمية | 7 تعليقات

في YUIConf في نوفمبر تشرين الثاني أصدرنا معاينة YUI 3.3.0 ، وإطلاق سراح لدينا الرئيسي القادم على codeline YUI 3 . نحن الآن لدينا ما يصل الى الافراج عن معاينة ثالثة ، وإذا كان لديك بعض الوقت خلال عطلة الشتاء لمساعدتنا على ركلة الإطارات كنا نحب لك أن تعطيه تدور يمكنك استخدام البذور 3.3.0pr1 YUI الملف من كندي لتبدأ ، تحميل التوزيع من YUILibrary.com ، أو التحقق من توزيع 3.3.0pr3 استضافتها على YUIBlog (ملاحظة : الأداء بطيئا جدا على YUIBlog نظرا لعدم وجود السرد معالجة ؛ تطمئن بأن ما تتمتعون به كندي يحركها تطبيقات عموما سيكون أسرع من استخدام 3.2.0 المقابلة).

بعض الأشياء الجديدة في البحث عن هذا الإصدار :

كل جديد الإكمال (بيتا)
كل جديد رسوم بيانية (بيتا) ، والمدعوم من SVG ، قماش وVML
كل جديد DataTable (بيتا) ، وبدايات ترقية وحدات أكثر من مكون شعبية 2 YUI
جديدة لمكافحة الطلب (بيتا) ، وهي مبتكرة تأخذ على السيطرة نطاق محدود أو التمرير التي أوجدتها ياهو جيف Conniff مصمم
كل جديد أداة التحجيم (بيتا) ، التي قدمتها لوندغرين إدواردو Liferay ، المؤلف المشارك مع كافانو نيت من YUI 3 المستندة AlloyUI التمديدات المتاحة في معرض YUI 3 . (يمكنك تلبية ادواردو ونيت في هذا بالرصاص في جولة مكوكية AlloyUI YUIConf 2010 ).

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

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

YUILibrary.com داون للصيانة (تحديث : حتى الآن مرة أخرى)

21 ديسمبر 2010 في 09:08 من قبل فريق YUI | في التنمية | تعليقات فاقيإ

تحديث 2010/12/21 12:32 : عودة وتشغيلها -- واسمحوا لنا أن نعرف إذا كنت ترى أية مشاكل.

لقد اتخذنا هذا الصباح YUILibrary.com أسفل للصيانة. نتوقع أن يستمر هذا العمل 4-6 ساعات. نحن نعتذر عن الإزعاج وسنحاول الحفاظ على التوقف قصيرة قدر الإمكان.

إذا كان لديك أسئلة الدعم العاجل في هذه الأثناء ، والنظر في اسقاط من قبل القناة YUI # على Freenode.net ، حيث ستجد في كثير من الأحيان عشرات من أفراد المجتمع YUI مساعدة كل منهما الآخر.

وYUIBlog YUILibrary @ سيتم تشغيل التحديثات عندما كان الموقع احتياطيا.

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

تحديث النسخة 2.9.0 YUI

17 ديسمبر 2010 في الساعة 1:50 من جانب جيني دونيلي | في التنمية | 9 تعليقات

الاسبوع القادم سيقوم فريق YUI البدء في التخطيط لإطلاق سراح 2.9.0 ليتم شحنها في النصف الثاني من Q1 2011. YUI سوف تكون الأخيرة 2.9.0 نقطة الإفراج الرئيسية للcodeline الإصدار 2.x ، وفريق وسيتم استعراض جميع تذاكر مفتوحة بقوة ضد المشروع 2 YUI وإسناد لهم إما أن تكون جزءا من إصدار 2.9.0 ، وإغلاق هذه الاتهامات بانها "لن يصلح" ، أو نقلها إلى المشروع YUI 3.

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

حالات القضايا التي تؤثر سلبا على استخدام الأساسية.
القضايا المستجدة المتعلقة بإطلاقات متصفح جديد على مصفوفة A - الصف.
وسيتم التحسينات والمزايا الجديدة ذات الأولوية لاجتثاث YUI (2) وتعتبر لYUI 3.

الانتقال من فريق YUI من تطوير منطقتين codelines موازية للالتركيز فقط على YUI 3 لا يعني نهاية للمشروع 2 YUI. جميع الحاضر والمستقبل YUI 2 النشرات ستظل استضافتها على كندي ياهو ، سوف CODEBASE 2 YUI يستمر استضافتها في GitHub ، ونحن نرغب في استكشاف الصيانة المجتمعية للYUI 2 في المستقبل.

ونحن نواصل عملية التخطيط ، ونحن سنكون صقل جدولنا الزمني ، وتبحث عن ردود فعل من المجتمع ، والتواصل التحديثات التقدم طوال دورة الافراج عنهم.

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

هل الوضع الدقيق القادمة الى المدينة

14 ديسمبر 2010 في 14:12 من قبل دوغلاس Crockford | في التنمية | 20 التعليقات

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

تحديد الوضع الدقيق

هناك طريقتان لطلب وضع صارمة. الأول ، هو إدراج هذا pragma

  "الاستخدام الدقيق" ؛

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

كافة التعليمات البرمجية في ملف الوحدة أو تجميع مع "use strict"; ستتم معالجة الديباجة كما رمز صارمة. هناك مشكلة ، وإن كان. اعتبارات الأداء إجبار لنا حاليا لسلسلة ملفات جافا سكريبت كثيرة معا لتجنب التأخير المتراكم HTTP. إذا كان ملف مع "use strict"; ديباجة ورمز قذرة إلحاق إليه ، ستتم معالجة رمز قذرة وصارمة وستفشل على الارجح. هناك قاعدة بسيطة : لا تخلط الدقيق وقذرة في نفس الملف ، لكننا رأينا بالفعل بعض المواقع الشهيرة الحصول على هذا الخطأ.

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

  (وظيفة () {
    "الاستخدام الدقيق" ؛
    / / هذا هو وظيفة صارمة...
 }())؛

 (وظيفة () {
    / / ولكن هذه هي وظيفة قذرة...
 }())؛

مجال

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

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

واحدة من مزايا قانون صارم هو أن أدوات مثل ضاغط YUI يمكن القيام بعمل أفضل عند معالجة ذلك.

متغيرات العالمية ضمني

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

التسرب العالمية

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

فشل صاخبة

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

ثماني

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

في C ، تم اختيار التمثيل مؤسف للغاية من octalness : الصفر. حتى في C ، 0100 يعني 64 ، وليس 100 ، و 08 خطأ ، وليس 8. حتى أكثر سوء الحظ ، تم نسخ هذه مفارقة تاريخية في جميع اللغات تقريبا الحديثة ، بما في ذلك جافا سكريبت ، حيث يتم استخدامها فقط لإنشاء أخطاء. ليس لديها أي غرض آخر. حتى في الوضع الدقيق ، لم يعد مسموحا أشكال الثماني.

وهلم جرا

و arguments الزائفة الصفيف يصبح أكثر قليلا مجموعة شبيهة في ES5. في الوضع الدقيق ، فإنه يفقد callee و caller الخصائص. هذا يجعل من الممكن لتمرير الخاص arguments إلى رمز غير موثوق بها من دون التخلي عن الكثير من سياق سرية. أيضا ، فإن arguments يتم القضاء على الملكية من الوظائف.

في الوضع الدقيق ، مفاتيح مكررة في وظيفة حرفية سينتج خطأ في بناء الجملة. ويمكن أن تعمل ليس لديها معلمتين يحمل نفس الاسم. ويمكن أن تعمل ليس لديها متغير مع نفس اسم واحدة من معلماته. ويمكن أن لا يعمل delete المتغيرات الخاصة به. محاولة ل delete خاصية غير شكلي الآن رميات استثناء. القيم ليست بدائية ملفوفة ضمنا.

إذا كان البرنامج الخاص بتمرير JSLint ، وأنها ستعمل على الارجح في وضع الصارمة.

ولا يزال من هذا العالم غير المثالي

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

لماذا وضع المسائل الصارمة

بالإضافة إلى فوائد واضحة لبرنامج الاعتمادية وسهولة القراءة ، وطريقة صارمة تساعد على حل مشكلة المزج. نريد أن نكون قادرين على دعوة third رمز الحزب على صفحاتنا أن تفعل أشياء مفيدة لنا ومستخدمينا ، دون ان يعطي هذا الرمز الترخيص للسيطرة على المتصفح أو تشويه نفسها للمستخدم أو خدمتنا. نحن بحاجة إلى تقييد رمز طرف ثالث. نظم مثل كاجا غوغل القيام بذلك ، ولكن بتكلفة كبيرة في الأداء وإزعاج بلدي ADsafe النظام كما تقوم بذلك ، ولكن على حساب القضاء على this و [] . subscripting من اللغة ، التي يمكن أن تجعل من الصعب اعتماد وضع يسمح لنا صارمة لجعل third رمز الحزب والراحة والأداء والتعبير ADsafe من كاجا. هذا سوف يكون من المهم للغاية كما مواقعنا تصبح أكثر تعقيدا وأكثر صلة.

وضع صارمة لا يحل المشكلة XSS. الحل لهذه المشكلة يعتمد على W3C اتخاذ بعض الإجراءات الإيجابية .

ES5/strict الآن في معاينات ، وسيتم قريبا المعدات القياسية في جميع المتصفحات المتوافقة مع المعايير في كل مكان.

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

للملكية المركز CSS

14 ديسمبر 2010 في 07:35 بواسطة Koblentz تييري | في CSS 101 ، تصميم ، تطوير | 6 تعليقات

عن المؤلف : تييري Koblentz هو مهندس الأمامية في ياهو!
انه يملك TJK التصميم ، EZ - css.org و CSS - 101.org . يمكنك اتباع تييري على التغريد في thierrykoblentz @ .

هذه الخاصية تنطبق على جميع العناصر. أن لديها خمسة القيم الممكنة :

static
relative
absolute
fixed
inherit

الموقف : ثابت

من الباب 9 نموذج التنسيق المرئي :

مربع هو مربع عادي ، المنصوص عليها وفقا لل التدفق الطبيعي . و top ، right ، bottom ، و left خصائص لا تنطبق.

الأشياء لاحظت في هذا العرض

المربع الثاني يدل تماما حيث أنه سيكون من دون اعلان موقف.
القيمة المعطاة لل top لا ينطبق لأن في سياق "ثابت" ، والقيمة المحسوبة ل إزاحة مربع دائما auto .

لتذكر الأشياء

إذا كان position الملكية عنصر له قيمة static ، ليس هذا العنصر وقال أن وضعه.
لأن static هو القيمة الأولية (القيمة الافتراضية) ، فلا حاجة لمثل هذه تشمل التصميم في كتلة الإعلان إلا إذا كانت الكتابة فوق قيمة مختلفة.

الموقف : النسبية

من الباب 9 نموذج التنسيق المرئي :

موقف يحسب مربع وفقا لتدفق العادي (وهذا ما يسمى الوضع في التدفق الطبيعي ). ثم يقابل مربع نسبة إلى وضعها الطبيعي. عندما يتم وضع نسبيا B مربع ، يتم حساب الموقف من مربع التالية كما لو كانت لا تعوض باء.

الأشياء لاحظت في هذا العرض

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

لتذكر الأشياء

تترك دائما القيم المحسوبة = اليمين وكبار = القاع. إذا كان direction من كتلة تحتوي على و ltr ، وقيمة يفوز "اليسار" و "الحق" يصبح -- 'اليسار'. إذا كان direction من كتلة تحتوي على و rtl يتم تجاهل ، "حق" تفوز و "اليسار". ويمكن الاستفادة من الكتاب لكيفية عمل الأشياء من خلال وضع قيمة متساوية للممتلكات المعاكس.
خلافا للنموذج "المطلق" ، top ، right ، bottom ، و left لا يمكن أن تمتد خصائص ولا ينكمش مربع (أنها لا يمكن تغيير حجمه).

الموقف : مطلقة

من الباب 9 نموذج التنسيق المرئي :

يتم تحديد موقف مربع (وربما حجمها) مع top ، right ، bottom ، و left ممتلكاتهم. هذه الخصائص تحديد التعويضات فيما يتعلق مربع و تحتوي على كتلة . تتم إزالة مربع المتمركزة على الاطلاق من التدفق الطبيعي تماما (وليس له أي تأثير على الأشقاء في وقت لاحق) ، وتعيين الموقف فيما يتعلق تحتوي على كتلة. أيضا ، على الرغم من وضعه على الاطلاق مربعات والهوامش ، وأنها لا تنهار مع أي هوامش أخرى.

الأشياء لاحظت في هذا العرض

لأن لم يتم تحديد مربع الإزاحة ، لم مربع 'اثنين' لا تتحرك من موقعها الأصلي ، ولكن إذا كان علينا استخدام top:0;left:0; على سبيل المثال ، هذا المربع ستكون في أعلى الزاوية اليسرى من المعاينة .
تخطيط حكيم ، فمن كان مثل نصب مربع 'اثنين' مع display:none . تمت إزالة مربع من التدفق.
مع خارج مربع 'اثنين' من التدفق ، وانتقلت "الثلاثة" مربع ضد مربع "واحد" (الفقرات اتبعت).
مثل إزالة جميع عناصر من 'اثنين' تدفق ، مربع وأفقيا يتقلص الملفوفة.

لتذكر الأشياء

عن أي عنصر "المطلق" أو "ثابت" وضعه القيمة المحسوبة ل 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 .

أهم شيء أن نتذكر

لأن هذه الخطة موضع يزيل صناديق من التدفق ، فإنه يعتبر من الممارسات السيئة لاستخدامه للتخطيط.

الموقف : ثابت

من الباب 9 نموذج التنسيق المرئي :

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

الأشياء لاحظت في هذا العرض :

منذ تحديد المواقع الثابتة هو فئة فرعية من الموضع المطلق ، كل شيء كان هذا صحيحا ل'المطلق' ينطبق أيضا على "ثابتة" (العنصر يتقلص ، يلتف ، يتم إزالته من التدفق ، الخ).
يتم وضع مربع في ما يتعلق المعاينة ، فإنه لا انتقل مع الصفحة.
في IE 6 ، يظهر مربع على شكل مربع ثابت ، ولكن هناك "مضحك" الحل البديل لذلك.
عند طباعة المستند ، مربع 'اثنين' يظهر في كل صفحة واحدة.

أشياء لنتذكر :

موقف يحسب مربع وفقا لنموذج "المطلق" ، ولكن بالإضافة إلى ذلك ، هو مربع الثابتة فيما يتعلق ببعض المرجعية. في حالة محمول والشاشة ، الإسقاط ، السمع ، وأنواع وسائل الإعلام التلفزيون ، هو ثابت مربع فيما يتعلق المعاينة وعندما لا يتحرك تمريره.
قد يكون المحتوى لمستخدمي inaccessile النظر إذا كان جزء من المربع هو خارج منطقة المعاينة.
في حالة وسائل الاعلام المطبوعة النوع ، قد ترغب في منع كتاب عنصرا من الظهور على كل صفحة مطبوعة. ربما باستخدام قاعدة @ وسائل الإعلام ، كما في :
```
  @ {وسائل الإعلام المطبوعة 
   # شعار {الموقف : ثابت ؛}
 } 
```
مثل position:absolute ، position:fixed سيؤدي haslayout في IE.

الموقف : وراثة

إذا كان position:inherit المحدد لمربع معين ، ثم فإنه سيتم اتخاذ نفس القيمة المحسوبة ملكا للآباء في المربع.

علما بأن IE 6 و 7 لا تدعم هذه الكلمة إلا عندما تستخدم مع direction و visibility (انظر قيمة الخاصية CSS ترث ).

الأشياء في الاعتبار

إزاحة مربع

أن تدرك أن للمطلقة وثابتة في وضع مربعات ، والقيم المنصوص عليها في النسبة المئوية ل top ، right ، bottom ، و left يتم حسابها وفقا للأبعاد الكتلة التي تحتوي على (والتي قد لا تكون خانة الأصل).

'الموقف' و 'تجاوز'

مربع مع نصب overflow:hidden سوف مقطع العناصر المتمركزة نسبيا (مربعات متداخلة) ، لكنه لن يخفي دائما تلك المتمركزة على الاطلاق. هذا هو الأصل لأن مربع ليست دائما كتلة تحتوي على (أقرب سلف مع 'موقف' من 'المطلق' ، 'النسبية' أو 'ثابت').

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

الهوامش

يمكن استخدام هوامش الكتاب على العناصر بغض النظر عن نظام تحديد المواقع الخاصة بهم.

حالة IE

في آي إي "، لتحديد المواقع" قد يكون مربع نعمة أم نقمة :

في IE6 ، position:relative (with haslayout) يمكن استخدامها لمنع مربع على غرار مع هوامش سلبية من أن يثقب من الحاوية الأصل (انظر كيفية وضع مربع حل هذه المسألة).
قد المواقع عنصرا "زعزعة" المكدس مربعات الطريقة IE 6 و 7 لأن هذا قد وضع السياق الجديد التراص (راجع حالة اختبار ).

التراص النظام والتراص المستوى

وفقا للتسلسل في شفرة المصدر ، وصناديق تأتي في وضعه أمام يطفو ومربعات في تدفق طبيعي.
يمكن للمؤلفين تحديد مستويات مكدس عبر خاصية 'ض مؤشر' فقط على مربعات وضعه.
في IE6 و 7 ، يمكن للحقيقة بسيطة لتحديد المواقع مربع تأسيس السياق التراص (انظر أعلاه ، " حالة IE ").

أجهزة الجوال

قراءة المادة PPK ، و موقف [السادسة] قيمة ، لمعرفة لماذا الباعة متصفح المحمول يمكن في الحقيقة لا تدعم position:fixed .

مزيد من القراءات

ألف "شبح" قياسا بواسطة DrLangbhani :

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

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

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

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

حول كتاب : جوبال Venkatesan ( @ g13n ) يعمل لياهو في بنغالور حيث هو واحد من عمداء واجهة المجتمع الهندسة ؛ جوبال كان المهندس الرئيسي على و YUI كاروسيل 2 المشروع منذ الافراج 2.6.0. وهو أيضا مؤلف جديد YUI 3 كاروسيل معرض الوحدة. فابيان فرانك ينحدر من ألمانيا ويعمل لياهو في بكين ؛ فابيان تم مع ياهو منذ أنهى الماجستير للأبحاث في جامعة غلاسكو.

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

عنصر تحكم يوفر كاروسيل مصغر للتصفح بين مجموعة من الكائنات مثل المحتشدة عموديا أو أفقيا في منطقة مثقلة الصفحة. في "كاروسيل" استعارة مستمد من وجود تشابه إلى الشريحة 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 القائمة. 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.

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

YUI مسرح -- ريان جروف : "التعريف YUI 3 الإكمال التلقائي" (42 دقيقة).

December 10, 2010 at 5:55 am by Eric Miraglia | In YUI Theater | Comments Off

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 .”)

If the video embed below doesn't show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater .

CC Content/Used by Kind Permission:

Subscribing to YUI Theater:

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

الصفحة التالية »

مدعوم من وورد على ياهو! استضافة المواقع .

تحديد الوضع الدقيق

مجال

متغيرات العالمية ضمني

التسرب العالمية

فشل صاخبة

ثماني

وهلم جرا

ولا يزال من هذا العالم غير المثالي

لماذا وضع المسائل الصارمة

الموقف : ثابت

الأشياء لاحظت في هذا العرض

لتذكر الأشياء

الموقف : النسبية

الأشياء لاحظت في هذا العرض

لتذكر الأشياء

الموقف : مطلقة

الأشياء لاحظت في هذا العرض

لتذكر الأشياء

أهم شيء أن نتذكر

الموقف : ثابت

الموقف : وراثة

الأشياء في الاعتبار

إزاحة مربع

'الموقف' و 'تجاوز'

الهوامش

حالة IE

التراص النظام والتراص المستوى

أجهزة الجوال

مزيد من القراءات

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

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

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

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

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

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

More to Explore in the Gallery

Other Recent YUI Theater Videos:

CC Content/Used by Kind Permission:

Subscribing to YUI Theater:

مكتبة YUI على التغريد

ترجمة

نقابة

المشاركات الأخيرة

مكتبة YUI

المحفوظات :

المدونات

تعليق سياسة

تصبح ياهو

التعريف :