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

YUI 3 نصيحة سريعة: إضافة رهيبة الخاصة بك

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

لوقا ( @ ls_n نشر) هذا مقتطف في رده على سؤال في اليوم الآخر، واعتقد انه كان يستحق المشاركة هنا كبقشيش سريعة.

كما هو الحال مع معظم التعابير محدد مقرها، والكثير من القوة YUI 3 التعبيرية يأتي من ما يمكنك القيام به مرة واحدة لديك مرجع واحد أو أكثر HTMLElements - في YUI 3، وهذا يعني وجود إشارة عقدة، والتي تحصل عادة عن طريق Y.one( selector string ) أو Y.all( selector string ) . لذلك، Y.one("#foo"). doSomethingInteresting هو نمط شائع.

فإنه من السهل على تمديد التعبير YUI 3 من خلال إضافة سحر الخاصة بك إلى عقدة (و / أو NodeList). هنا طريقة واحدة لجعل الملحق الخاص بك وحدات وقابلة لإعادة الاستخدام.

أولا، إنشاء وحدة مخصصة جديدة (وسوف يطلق عليه node++ ):

  YUI.add ('العقدة + + "، وظيفة (ص) {
	
	 / / تعريف دالة التي سوف تعمل في سياق
	 / / عقدة سبيل المثال:
	 doSomethingAwesome وظيفة () {
		 Y.log ("هل شيء رائع هنا.")؛
	 }

	 / / استخدام addMethod إضافة doAwesomeThing إلى النموذج عقدة:
	 Y.Node.addMethod ("doAwesomeThing"، doSomethingAwesome)؛
	
	 / / تمتد هذه الوظيفة إلى NodeLists:
	 Y.NodeList.importMethod (Y.Node.prototype "doAwesomeThing")؛
	
 }، '0 .0.1 '، {يتطلب: [' العقدة ']})؛ 

جوهر لوقا هو هنا .

مع هذا التعريف على الصفحة، node++ يمكن use د في أي حال من الأحوال. في رمز تنفيذ الخاص بك، عليك أن تفعل:

  YUI (). استخدام ('العقدة + + "، وظيفة (ص) {
	
	 / / استخدام من عقدة واحدة:
         . Y.one ('# فو') doAwesomeThing ()؛

	 / / استخدام من NodeList:
	 Y.all ('ع') doAwesomeThing ()؛
	
 })؛ 

لاحظ أن فقط مثيل YUI (ق) الذي يمكنك ربط الخاص بك node++ وحدة سوف يحصلون على doAwesomeThing . ميزة واحدة من هذا التصميم أن عليك أن تحب وانتم بناء تطبيقات معقدة، ان المنطق الخاص بتنفيذ لن تحتاج إلى تغيير إذا كانت قائمة التبعية node++ تتطور - التي سوف تحصل على معالجة لك تلقائيا عند use() مرة، والتبعية إعلان يبقى مع رمز الذي تتعلق به.

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

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

YUI مسرح - بضاف الزجاج: (36 دقيقة) "استخدام Node.js وYUI 3"

29 سبتمبر 2010 الساعة 11:34 صباحا من قبل Miraglia اريك | في YUI مسرح | 11 التعليقات

عمل ريان دال على Node.js انضمت HTML5 باعتبارها واحدة من القصص الكبيرة من 2010 - - والمجتمع حول تشكيل هذا المشروع. وقد YUI مهندس بضاف زجاج تعمل على جعل YUI 3 حليفا قويا لمنفذي Node.js، وفي هذا الفيديو انه يظهر لك ما فعله حتى الآن - بما في ذلك العروض من الحاجيات تعزيز تدريجيا تشغيل نفس رمز على العميل والخادم. لا تفوت هذه واحدة.

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

• تحميل الفيديو عالية الدقة (480P ~ 271MB)
• تحميل الفيديو (M4V)
• عالي الدقة، نسخة transcripted من هذا الكلام موجود على موقع المسرح YUI

غيرها من مسرح YUI الأخيرة أفلام:

• الويس Reitbauer: dynaTrace اياكس الطبعة - dynaTrace يوفر واحدة من أقوى الأدوات لتحليل أداء تطبيقات ويب في Internet Explorer. في هذا الحديث، dynaTrace مهندس الويس Reitbauer يمشي من خلال أربعة سيناريوهات تحليلية محددة باستخدام واجهة dynaTrace.
• رايان غروف: تحقيق زن الأداء مع YUI 3 - فيما يلي المبادئ التوجيهية مقننة يمكن أن تساعدك على إنشاء مواقع وسريع، ولكن بناء التطبيقات التي هي نظيفة وسريعة وقابلة للتوسيع ينطوي أيضا على اتباع نهج متوازن في الأداء على كل صعيد من عملك F2E. تم تصميم YUI 3 لمساعدتك في هذه العملية، وتوفير طبقة تجريد حق الحجم مع المدمج في سحر الأداء، ومجموعة متنوعة من الأدوات التي تجعل سريع رمز اجهة سهلة وممتعة للإنتاج. في هذه الدورة، سنقوم استكشاف زن من جافا سكريبت performant في العالم 3 YUI، وأعرض لكم بعض من أدوات قوية YUI 3 يضع تحت تصرفكم في كل التطبيق أن تكتب.
• دوغلاس Crockford: Crockford في جافا سكريبت - مشهد 6: Loopage - يعوق تطوير البرمجيات من قبل مجموعة محددة من أخطاء التصميم التي تم إجراؤها في لغات البرمجة الأولى ويتكرر في كل ما تم القيام به منذ ذلك الحين. و، بأعجوبة إلى حد ما، وجافا سكريبت هو الذهاب الى جعل ذلك الحق، وتحويل جذري في طريقة نكتب التطبيقات. مرة أخرى. في حلقة من التاريخ، وقد حدث كل هذا من قبل، ولكنه لم يحدث مثل هذا. هذا هو السبب يجب أن نهتم ظهور من جانب الخادم جافا سكريبت والإثارة حول مشاريع مثل Node.js - وليس لأنهم في نهاية حادة من اتجاه، ولكن لأنهم تمهيد الطريق نحو ثورة الكبير المقبل في مجال البرمجيات.

الاشتراك في مسرح YUI:

• YUI مسرح آر إس إس
• YUI مسرح على اي تيونز

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

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

التركيز على التنفيذ: تأجير السيارات عبر عن

28 سبتمبر 2010 في 06:01 صباحا بواسطة كلوب ستيفان | في في البرية ، تطبيقات YUI | 2 تعليقات

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

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

المكونات التي YUI هل نستخدم؟

المكونات التي كنا باستخدام تشمل إدارة الاتصال ، الإكمال التلقائي ، مصدر البيانات ، التقويم ، الرسوم المتحركة ، JSON ، و حاوية .

لماذا اخترنا YUI

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

كيف نستخدمها YUI

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

الإكمال

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

تقويم

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

حاويات

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

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

اتصال مدير

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

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

الأفكار النهائية

عموما كنا سعداء للغاية مع اختيارنا لاستخدام YUI. ويوفر لنا مع مكتبة وحدات والتي تم توثيقه جيدا، وسهلة الاستخدام وتنفيذها.

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

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

في معرض 3 YUI: الوحدة RaphaelJS مات تايلور

27 سبتمبر 2010 في 01:05 من ماثيو تايلور | في التنمية ، YUI 3 معرض | 9 التعليقات

RaphaelJS هي مكتبة جافا سكريبت القوية التي تدير SVG الرسومات والصور المتحركة. لأنها تتيح لك بسهولة لخلق الجنفاص SVG ورسم الأشكال الأساسية والمسارات بسهولة جدا، حتى تجمع لهم في مجموعات، وتطبيق التحولات واحد أو العديد من ناقلات. يمكنك رسم الأشكال، ومعالجة الصور، ويديروا كل شيء. RaphaelJS يوفر لطيف API لإنشاء وتعديل العناصر SVG مع سهولة.

في حين أن المكتبة هي مثيرة للإعجاب، ولكني وجدت أنني يمكن أن تضيف بعض السمات الهامة لعناصر من مكتبة RaphaelJS مع YUI3. لقد بدأت هذه الجهود من جديد مع وحدة معرض RaphaelJS .

RaphaelJS تحميل كسول والإضافات

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

 
 YUI ({معرض: "معرض-2010.09.22-20-15 '}). استخدام (' معرض، رافائيل، وظيفة (ص) {
 
	 Y.Raphael (). استخدام (وظيفة (رافائيل) {
		
		 / / استخدام رافائيل هنا وكأنك خارج YUI
		 فار ورقة = رافائيل ('myPaper'، 500، 500)؛
 
	 })؛
 
 })؛

إذا كنت تستخدم المحمول RaphaelJS، وتحديد مساراتها في مجموعة وإرسال ذلك كمعلمة الأول في Y.Raphael () استخدم الدالة ().:

 
 YUI ({معرض: "معرض-2010.09.22-20-15 '}). استخدام (' معرض، رافائيل، وظيفة (ص) {
 
	 myPlugins فار = ['الإضافات / raphael.awesomePlugin.js'، 'الإضافات / raphael.wickedPlugin.js']؛
 
	 Y.Raphael (). استخدام (myPlugins، وظيفة (رافائيل) {
 
		 / / استخدام رافائيل هنا وكأنك خارج YUI
		 فار ورقة = رافائيل ('myPaper'، 500، 500)؛
		 / / سيكون "ورقة" لديها أي وظائف جديدة تضاف بواسطة المحمول الخاص بك الآن
	 })؛
 
 })؛

يتم تحميل مكتبة RaphaelJS أولا، ثم يتم تحميل أي ملحقات محددة قبل تنفيذ الدالة رد الاتصال مع الكائن رافائيل كمعلمة فقط.

عرف الأحداث

ذات مرة كنت قد خلق مساحة الرسم مع الكائن رافائيل، ثم يمكنك الحصول على الفور وصولا الى الرسم. عند استدعاء أساليب مثل rect ، circle ، و path على مساحة الرسم، سوف تتلقى مرة أخرى الكائنات التي تمثل ناقلات SVG. عادة، سيكون لديك الوصول إلى عناصرها DOM المقابلة من خلال node الممتلكات. على سبيل المثال:

 
 فار ورقة = رافائيل ('myPaper'، 500، 500)؛
 فار مربع = paper.rect (0، 0، 100، 100)؛

هذا بإنشاء كائن متجه مستطيلة في إحداثيات [0،0] مع عرض وارتفاع 100 بكسل. لديك حق الوصول إلى عنصر DOM الأساسية (وهو SVG rect عنصر) كما يلي:

 
 فار rectNode = square.node؛
 rectNode.onclick = وظيفة () {
	 تنبيه ('تهانينا، نقرت مربع')؛
 }؛

إذا كنت من مستخدمي YUI متعطشا، ربما كنت ترغب شيء أكثر من هذا. ماذا عن بني في Y.Node كذلك؟ مثل مجرد node الملكية يشير إلى HTMLElement خلف الكائن SVG، و $node الملكية يشير إلى Y.Node المجمع لذلك العنصر. لذلك يمكنك أن تفعل أشياء من هذا القبيل:

 
 مربع. node.on $ ('تمرير الماوس "، وظيفة () {
	 تنبيه ('تهانينا، يمكنك تحريك الفأرة')؛
 })؛

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

 
 فار ورقة = رافائيل ('rcanvas'، 600، 800)؛
 
 . فار CIRC paper.circle = (350، 200، 100) attr ({شغل: "وردي"، والسكتة الدماغية: 'أسود'})؛
 
 / / دفع حفنة من المستطيلات في صفيف
 فار ط = 0؛ المستطيلات = []؛
 ل (وأنا <10؛ أنا + +) {
	 rectangles.push (paper.rect (0، 40 * ط، 200، 20) attr ({شغل: "الحمراء"، والسكتة الدماغية: 'الأصفر'}.))؛
 }
 
 / / من خلال حلقات المستطيلات، مضيفا معالجات محددة mousemove لكل دائرة
 Y.Array.each (مستطيلات، وظيفة (المستطيل، المؤشر) {
	 فار ط = مؤشر + 1؛
	 CIRC. node.on $ ('mousemove'، وظيفة (EVT) {
		 / / لون التعبئة هو دينامية، تعتمد على موقع هذا المستطيل
		 / / في الصفيف، فضلا عن مكان وجود الماوس
		 فار = LF circ.attrs.cx - circ.attrs.r،
			 غ = 2 * circ.attrs.r + LF،
			 س = evt.clientX - LF،
			 أعلى = circ.attrs.cy - circ.attrs.r،
			 BTM = 2 * circ.attrs.r + أعلى،
			 ص = evt.clientY - الأعلى؛
			 أحمر = (((128 * س) / (2 * circ.attrs.r)) -1) * ط / 6،
			 أخضر = 256 - ((((128 * س) / (2 * circ.attrs.r)) -1) * أنا / 6)،
			 أزرق = (((128 * Y) / (2 * circ.attrs.r)) -1) * أنا / 6؛
		 rect.attr ('ملء'، 'RGB (' + أحمر + '،' + أخضر + '،' + أزرق + ')')؛
	 })؛
 })؛

هذا المثال يعمل هنا ، ولكن كما ترون في لقطات أدناه، ولون من كل شريط يعتمد على مكان الماوس فوق الدائرة، فضلا عن النظام من شريط.

تبعا للمكان الذي يقع مؤشر الفأرة على الدائرة، وألوان شريط تغيير على حدة.

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

 
 فار ورقة = رافائيل ('rcanvas'، 600، 800)؛
 
 . فار CIRC paper.circle = (350، 200، 100) attr ({شغل: "وردي"، والسكتة الدماغية: 'أسود'})؛
 
 / / جعل صفائف من المستطيلات والدوائر
 فار ط = 0، المستطيلات = []، والدوائر = []؛
 ل (وأنا <10؛ أنا + +) {
	 rectangles.push (paper.rect (0، 40 * ط، ط 40 *، 20) attr ({شغل: "الحمراء"، والسكتة الدماغية: 'الأصفر'}.))؛
	 circles.push (paper.circle (0،0،20) إخفاء ().)؛
 }
 Y.Array.each (مستطيلات، وظيفة (المستطيل، المؤشر) {
	 فار ط = مؤشر + 1؛
	 CIRC. node.on $ ('mousemove'، وظيفة (EVT) {
		 فار = LF circ.attrs.cx - circ.attrs.r،
			 غ = 2 * circ.attrs.r + LF،
			 س = evt.clientX - LF،
			 أعلى = circ.attrs.cy - circ.attrs.r،
			 BTM = 2 * circ.attrs.r + أعلى،
			 ص = evt.clientY - الأعلى؛
			 newWidth = (((256 * س) / (2 * circ.attrs.r)) -1) * ط / 6،
			 أحمر = (((128 * س) / (2 * circ.attrs.r)) -1) * ط / 6،
			 أخضر = 256 - ((((128 * س) / (2 * circ.attrs.r)) -1) * أنا / 6)،
			 أزرق = (((128 * Y) / (2 * circ.attrs.r)) -1) * أنا / 6؛
		 / / هذا الوقت، وليس فقط تغيير اللون، ولكن أيضا عرض المستطيل
		 rect.attr ({
			 عرض: newWidth،
			 شغل: "RGB ('+ أحمر +'، '+ أخضر +'، '+ أزرق +') '
		 })؛
		 / / اطلاق النار حدث مخصص لإعلام أن هذا العرض المستطيل قد تغير
		 rect.fire ('عرض، تغيير'، {العرض: newWidth، المصدر: المستطيل، بالترتيب: مؤشر})؛
	 })؛
	
	 / / كل المستطيل يحصل على المستمع أن يطلق على العرض، تغيرت
	 rect.on ('عرض، تغيرت، وظيفة (EVT) {
		 فار attrs = evt.source.attrs؛
		 / / الحصول على دائرة المناظرة ونقلها إلى الطرف الأيمن من المستطيل
		 دوائر [evt.order]. attr ({
			 CX: attrs.x + attrs.width،
			 قبرصي: attrs.y،
			 شغل: 'cornflowerblue'
		 .}) عرض ()؛
		
	 })؛
	
 })؛

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

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

ملخص

مع صعود HTML5 والتقنيات التابعة لها، وهناك الكثير من الخيارات الأخرى أكثر من فلاش للتفاعلات الغنية. من الناحية المثالية، ينبغي أن تنقلها أي عناصر في الصفحة تكون متاحة تماما وموحدة. هذا يفتح possiblities رائع بالنسبة لنا لخلق الوصول إليها، وضوابط الويب القياسية من دون اللجوء الى فلاش. SVG خيارا جذابا لأنه يتم دعم كل ناقلات رسمها على صفحة من قبل عقدة DOM أن نتمكن من تعديل مع YUI تماما مثل أي عقدة DOM الأخرى. وهذا ما يسمح لل معرض وحدة RaphaelJS لزيادة كافة الكائنات SVG يتم إنشاؤه بواسطة RaphaelJS، وهذا هو عامل رئيسي في التفاعل مع هذه الغنية elments من أي مكان آخر في الصفحة.

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

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

معاد تحميل clearfix + فيض: مخفي بسط

27 سبتمبر 2010 في 06:27 صباحا بواسطة Koblentz تييري | في CSS 101 | 12 تعليقات

clearfix و overflow : hidden قد تكون التقنيات هما الاكثر شعبية لمسح يطفو بدون توصيف الهيكلية.

هذه المقالة القصيرة هو حول تعزيز الأسلوب الأول وتسليط بعض الضوء على المعنى الحقيقي للثاني.

clearfix

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

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

لذلك، لإنشاء تخطيط المربع نفسه عبر المتصفحات يمكننا تحسين طريقة الأصلي من خلال توليد محتوى باستخدام كل العناصر الزائفة :before و :after :

  . clearfix: قبل،
 . clearfix: بعد {
   المحتوى:؛ "."    
   عرض: كتلة؛    
   ارتفاع: 0؛    
   الفائض: خفي؛	
 }
 . clearfix: بعد {واضحة: على حد سواء؛}
 . clearfix {التكبير: 1؛} / * IE <8 * / 

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

overflow

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

10.1 تعريف "كتلة تحتوي على":

4. إذا كان العنصر له "الموقف: المطلقة"، يتم تأسيس كتلة محتوية على أقرب سلف مع موقف ' من 'المطلق'، 'النسبية' أو 'ثابت'، ...

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

ويمكنك التحقق من هذه الصفحة عرض لمعرفة كيفية عمل الأشياء.

بدائل أفضل

إذا يمكنك تطبيق عرض على العنصر تحتوي على العوامات، ثم الخيار الأفضل هو استخدام:

  العرض: مضمنة لبنة؛
 عرض: value> صريح <any؛ 

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

• الواردة العوامات، يطفو أرفق مع CSS نقي والمعروفة باسم تقنية clearfix
• كيفية مسح العربات بدون توصيف الهيكلية
• أسلوب جديد Clearfix
• 10.1 تعريف "كتلة تحتوي على"

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

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

YUI: ساعات فتح الأربعاء 29 سبتمبر

24 سبتمبر 2010 في الساعة 1:50 من قبل سميث لوقا | في التنمية | 1 تعليق

الدفعة القادمة من YUI: سوف تكون ساعات فتح يوم الاربعاء المقبل، في 29.

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

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

سنكون على الانترنت من 10:00 إلى 12:00 التوقيت الصيفي الباسفيكي. تفاصيل الاتصال هي نفسها كالعادة.

1. الاتصال الهاتفي في ل1-888-371-8922 (سكايب يعمل كبيرة لغير الولايات المتحدة المشاركين *)
2. أدخل رمز الحضور 47188953 #
3. الانضمام إلى جلسة المشاركة الشاشة (وهذا سوف يطلب منك تثبيت البرنامج المساعد أدوبي الاتصال إذا كانت هذه هي المرة الأولى التي تستخدم فيه)

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

لا تنسى للاكتتاب في التقويم YUI واتبع @ yuilibrary على التغريد للحصول على أحدث التحديثات على ساعات فتح وغيرها من الإمتاع YUI.

نأمل أن نراكم هناك!

* - إذا سكايب ليست خيارا، البريد الالكتروني لي لعدة المحلية.

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

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

في البرية عن 24 سبتمبر 2010

24 سبتمبر 2010 الساعة 1:00 بعد الظهر من قبل اريك Miraglia | في في البرية | تعليقات فاقيإ

ونحن على الاستعداد ل YUIConf 2010 والكثير في الأشهر المقبلة، وهنا بعض من الأشياء الأخرى اتخذنا علما في العالم أكبر YUI:

• YUI مسرح القمم NetTuts قائمة من يجب أن نرى الصوتية F2E : أندرو بورغيس يكتب عن مسرح YUI : "يبدو أن في كثير من الأحيان كما بضع مرات في الشهر، وياهو! يجلب للمطورين في طليعة من تكنولوجيا الإنترنت للحفاظ على العاملين لديها ما يصل الى تاريخ. لمصلحة من بقيتنا، وتسجل هذه المحادثات والتي تم نشرها. ستجد المعروفة مثل المشروعات الإنمائية Crockford دوغلاس وZakas نيكولاس، واجراء محادثات حول كل شيء من الأداء وإمكانية الوصول إلى جافا سكريبت ودوم في. " #
  
• DigitalInsurance.com (وهو الموقع apipkin @) بدعم من YUI 3 : غزير معرض مساهم أنتوني موقد فخار وساعد انتاج جديد بوابة DigitalInsurance.com .، والمدعوم من YUI 3 #
  
• لا شيء عن طريق التحسين التدريجي ولكن JS (@ codepo8 على davglass @) : كريستيان Heilmann يكتب على Ajaxian: "تعزيز التقدمية لا تزال مسألة محيرة لكثير من الناس الذين هم متحمسون جدا لقدرات جافا سكريبت في المتصفح بيئات الحديثة. يمكن أن يشعر التي عفا عليها الزمن لكتابة حلول للحصول على بيئة خالية من شبيبة ثم مرة أخرى ويعزز في جافا سكريبت. لقد نشأت مثل ذلك بالنسبة لي انها مسألة بسيطة لفعل الشيء الصحيح ولكن مع عالم اليوم من مكتبات جافا سكريبت وخارج نطاق فإن صندوق الحاجيات يمكن أن يبدو عملية السحب. أدخل بضاف الزجاج الفريق YUI. لقد كان تحول مفهوم التحسين التدريجي في جميع أنحاء في رأسه وكعاشق شبيبة ورمز الخلفية "endurer" انطلق من أجل حل هذه المشكلة مرة وإلى الأبد بطريقة جافا سكريبت نقي ". اطلع على المقال كاملا للحصول على التفاصيل . #
  
• الإضافات أكثر تراكب لYUI 3 من Andrich أوليفر : من صفحة أوليفر GitHub: "تراكب الإضافات هي عبارة عن مجموعة من خمسة الإضافات كتبت من أجل تعلم YUI التطوير المساعد 3 في العام. ثلاثة من أصل خمسة الإضافات أكثر أو أقل محاكاة اشياء تراكب التي أنشأتها Ferraiuolo إيريك .... الإضافات الخمسة هي:
  • BaseOverlayPlugin
  • ModalOverlay
  • KeepAligned
  • HideOnEscape
  • ConstrainDimensions "
  ( المصدر الأصلي. ) #
• ريد بيرك الشرائح YUI لHackU في جامعة كارنيجي ميلون YUI مهندس (و: اليتي كاتب) ريد بيرك جلد حتى بعض الشرائح و 3 على أساس YUI محرك العرض لحديثه الأخير في جامعة كارنيجي ميلون. #
  
• Devcurry على التعلم من شبيبة Crockford والمعلمون أخرى على مسرح YUI : Suprotim أغاروال يكتب في devcurry هذا الصباح: "في هذا المنصب، وسوف تتشارك باتصالات من بعض أشرطة الفيديو جافا سكريبت مفيدة جدا والمحاضرات التي ألقاها المعلمون جافا سكريبت، والكامل للمعلومات، ومشاهدة ممتعة و بحرية مطلقة! على الرغم من أن الانترنت هو كامل من أشرطة الفيديو مجانا، وقد اخترت فقط اثنين منهم، والتي وجدت مفيدا للغاية. الاستعداد لتدوين الملاحظات كما انك تعلم .. محاضرات فيديو Crockford على جافا سكريبت - دوغلاس Crockford هو مهندس معماري جافا سكريبت والمسرحيات ودور هام في تصميم ميزات جديدة للغة. أشرطة الفيديو له هي "يجب أن يكون بين 'لأي مطور جافا سكريبت. YUI مسرح - توفر وصولا إلى محادثات البرمجة مجانا من المعلمون في جافا سكريبت وتطوير الشبكة "Suprotim يمضي إلى سرد بعض المصادر الأخرى للمحتوى، بما في ذلك عناوين أخرى مسرح YUI #
  

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

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!