ترجمة مسج التالية رمز يوي 2.x رمز

Question

تنويه: ليس لدي أي خبرة في استخدام يوي على الإطلاق.

---

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

1.نظرا ID من عنصر HTML, تطبيق نمط متعددة القواعد على العنصر.

$('#foo').css({ color: 'yellow', background: 'black' });

2.تسلسل:نظرا معرف عنصر HTML, تطبيق أسلوب القاعدة على ذلك ، إضافة فئة من bar إلى ذلك ، ووضع محتوياته إلى '!'.

$('#foo').css('color', 'red').addClass('bar').html('!');

3.إلحاق LI عنصر #menu.

$('#menu').append('<li>An extra item</li>');

4.الحدث الأساسية ملزمة:عرض تنبيه كلما LI العنصر هو النقر على.

$('li').click(function() {
 alert('Clickety-click!');
});

Answer 1

تنويه:أنا لست يوي الخبراء ، قد تكون هناك طرق أفضل للقيام بهذه الأمور.

أيضا, مسج هو جيد في فعل ما كنت قد وضعت.YUI بنيت أكثر عن الحاجيات ، لذلك قد تجد لها وظيفة أساسية أقل شمولا من مسج (أي أنها لا تحل محل كل شيء كنت تريد من أي وقت مضى للقيام دوم مع وظيفة المكالمات).أشعر واحد يستخدم يوي 2.x لأنهم يريدون الحاجيات (يمكنني استخدام القوائم الخاصة بهم قليلا جدا).

#1:سوف تحتاج إلى تضمين هذا:

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script>

سوف يكون رمز:

var el = YAHOO.util.Dom.get('foo');
YAHOO.util.Dom.setStyle(el, 'color', 'yellow');
YAHOO.util.Dom.setStyle(el, 'background', 'black');

بدلا من ذلك...

YAHOO.util.Dom.setStyle('foo', 'color', 'yellow');
YAHOO.util.Dom.setStyle('foo', 'background', 'black');

#2:لا يوجد تسلسل في YUI 2.x, لذلك الحل الخاص بك لن يكون نفسه تقريبا:

var el = YAHOO.util.Dom.get('foo');
YAHOO.util.Dom.setStyle(el, 'color', 'red');
YAHOO.util.Dom.addClass(el, 'bar');
// Not sure how to set contents with YUI...  would just use:
el.innerHTML = "!";

أنا لا أهتم تسلسل على أي حال, أعتقد أن هذا الرمز هو أكثر قابلية للقراءة.(آسف على كتابة إفتتاحية.)

#3:مرة أخرى, غير متأكد من كيفية تعيين html مباشرة الى جانب ذلك فقط باستخدام innerHTML...وأعتقد أنه سيكون:

var el = YAHOO.util.Dom.get('menu');
el.innerHTML += '<li>An extra item</li>';

#4:يجب أن تشمل فئات مختلفة من أجل هذا الحل:

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

و هنا الشفرة:

var lis = document.getElementsByTagName("li");
YAHOO.util.Event.addListener(lis, 'click', function() {
        alert('Clickety-click!');
    });

مرة أخرى آسف أن هذه قد لا تكون ما قبل الأخيرة يوي الحلول.أيضا, إذا كنت قلقا حول الاستخدام المستمر "ياهو.util.longname.طريقة" ، يمكنك بسهولة فقط لجعل الخاصة بك المتغير المحلي.YUI يفعل هذا طوال الوقت في المكتبات:

(function() {
    var Event = YAHOO.util.Event;

    // Insert all your code here...
})();

Answer 2

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

YUI().use('node', function(Y) {
    // #1
    Y.get('#foo').setStyles({ color: 'yellow', background: 'black' });

    // #2
    Y.get('#foo').setStyle('color', 'red').addClass('bar').set('innerHTML', '!');

    // #3
    Y.get('#menu').appendChild(Y.Node.create('<li>An extra item</li>'));

    // #4
    Y.all('li').on('click', function() {
        alert('Clickety-click!');
    });
}