Yahoo! User Interface блог (YUIBlog)

YUI 3.3.0 Предварительный просмотр Release 3

22 декабря 2010 в 12:26 Эрик Miraglia | В развитие | 7 Комментариев

На YUIConf в ноябре мы выпустили предварительный просмотр YUI 3.3.0, наш следующий крупный релиз на YUI 3 codeline . Сейчас мы до нашего третьего релиза предварительного просмотра, а если у вас есть какое-то время за зимние каникулы, чтобы помочь нам удар шины мы бы с удовольствием для вас, чтобы придать ему вращение. Вы можете использовать семена YUI 3.3.0pr1 файл из CDN , чтобы начать, загрузить дистрибутив с YUILibrary.com , или проверить 3.3.0pr3 распределения размещенные на YUIBlog (примечание: производительность довольно вяло на YUIBlog из-за отсутствия комбо-разгрузочные работы; быть уверены, что ваш CDN-приводом реализации в целом будет быстрее, чем соответствующий 3.2.0 использования).

Некоторые из новых вещей, чтобы искать в этой версии:

• Все новые автозаполнения (бета)
• Все новые карты (бета) , питание от SVG, Canvas и VML
• Абсолютно новый DataTable (бета) , начало более модульным обновление популярной YUI 2-х компонентная
• новый диск управления (бета) , инновационные взять на конечных диапазон регулирования или слайдер создан Yahoo! дизайнер Джефф Conniff
• Все новые утилиты изменения размера (бета) , при условии, Эдуардо Лундгрен из Liferay, соавтор с Nate Кавано из YUI 3-основанных AlloyUI расширения доступны в YUI 3 Галерея . (Вы можете встретиться с Эдуардо и Нейт в этом AlloyUI беглый тур выстрелил в YUIConf 2010 ).

Существует гораздо больше нравится в YUI 3.3.0, и мы будем делиться информацией в качестве даты GA приближается. В настоящее время, к которому мы стремимся релиз окно на второй неделе января. Мы ждем ваших отзывов на предварительный просмотр в YUI форумах и в билете базы данных , если вы найдете вопросы, вызывающие озабоченность, когда вы проверить собственную реализацию с новым релизом.

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!

YUILibrary.com временно закрыт (обновлено: резервное копирование сейчас)

21 декабря 2010 в 9:08 по YUI Команда | В развитие | Комментариев нет

Обновление 12:32 вечера 12/21/2010: Резервное копирование и работает - сообщите нам, если вы видите каких-либо проблем.

Мы взяли YUILibrary.com вниз сегодня утром на техническое обслуживание. Мы ожидаем, что эта работа последних 4-6 часов. Приносим свои извинения за причиненные неудобства, и мы постараемся сохранить простоя как можно короче.

Если у вас есть срочные вопросы поддержки в то же время, считают сократился на канале # юй на Freenode.net, где вы будете часто находить десятки YUI членов сообщества помогать друг другу.

YUIBlog и @ YUILibrary будет работать обновления, когда сайт резервного копирования.

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!

YUI 2.9.0 Новая информация о выпуске

17 декабря 2010 в 1:50 вечера по Доннелли Дженни | В развитие | 9 Комментариев

На следующей неделе команда YUI начнется планирование релиз 2.9.0 будет поставляться во второй половине 1 квартале 2011 года. YUI 2.9.0 будет последней крупной точка-релиз codeline 2.x, и команда будет агрессивно рассмотрения всех открытых билетов на YUI 2 проекта и либо присвоение им быть частью 2.9.0 релизе, закрытие их как "не решит", или перемещая их на YUI 3 проекта.

Реальность времени и ограниченности ресурсов заставляет нас сосредоточиться на изделия высочайшего приоритета, который будет оказывать некоторую закрытия, чтобы YUI 2.x и позволит нам удвоить наши усилия по развитию 3.x. Вот некоторые из критериев, которые мы будем использовать, чтобы вести нас в принятии решения, что должно быть включено в версии 2.9.0:

• Вопросы, которые негативно влияют случаях ядро ​​использования.
• Возникающие вопросы, связанные с новых релизов браузера на-классе матрицы.
• Улучшения и новые возможности будет определяться приоритетным для YUI 2 и рассмотрены для YUI 3.

Переход команды YUI из развивающихся двух параллельных codelines сосредоточения исключительно на YUI 3 не означает конец YUI 2 проекта. Все нынешние и будущие YUI 2-релизы будут продолжать размещаться на Yahoo! CDN, коде YUI 2, продолжит быть размещено на GitHub, и мы хотели бы изучить общинных поддержание YUI 2 в будущем.

Поскольку мы продолжаем наш процесс планирования, мы будем тонкой настройки наш график, в поисках обратной связи с сообществом, и распространения информации о ходе работ по всему циклу выпуска.

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!

Строгий режим приходит в город

14 декабря 2010 в 2:12 вечера Дуглас Крокфорд | В развитие | 20 Комментариев

Это время и сезон, когда люди во всем мире забыть свои разногласия и прийти вместе в мире и общении, чтобы отпраздновать первую годовщину одобрение ECMA Генеральной Ассамблеей Программирование языка ECMAScript Standard, пятое издание. Наиболее важной особенностью является ES5 новых строгого режима. Строгий режим выбора в режиме, что ремонт или удаляет некоторые из наиболее проблемных функции языка.

Указание Строгий режим

Есть два способа отправки предложения строгого режима. Во-первых, вставить этот прагма

  "Использовать строгий"; 

в верхней части блок файла или компиляции. Он должен предстать перед любые другие заявления, но она может предшествовать пробелы и комментарии. Она имеет форму бесполезной строке буквальное утверждение, так что это будет игнорироваться ES3 систем. Это означает, что можно написать ES5/strict программ, которые могут работать и на старых браузерах. Строгий код также может взаимодействовать с нестрогим (или небрежно) код, поэтому строгие функции могут вызывать неряшливый функций, и неряшливый функций можно назвать строгим функций. Такой высокий уровень совместимости делает принятие строгого режима легко.

Весь код в файл или единица компиляции с "use strict"; преамбуле будет обрабатываться, как строгий кодекс. Существует проблема. Анализ производительности в настоящее время заставляет нас объединить большое количество файлов JavaScript вместе, чтобы избежать кумулятивного задержки HTTP. Если файл с "use strict"; преамбула имеет неряшливый код прилагается к нему, неряшливый код будет обрабатываться, как строгий и, скорее всего, удастся. Существует простой правило: Не смешивать строгий и небрежный в том же файле, но мы уже видели, некоторые известные сайты получить это неправильно.

Второй способ, чтобы вставить прагма в качестве первого оператора функции. Это заявляет, что вся функция будет строгим, в том числе каких-либо функций, которые вложены в его пределах. Строгость отношениях видимости функции, так что строгий кодекс и неряшливый код можно смешивать в одном файле. Это вторая форма очень хорошо работает с Pattern модуля и его многочисленные вариации. Вторая форма является предпочтительным, поскольку он позволяет избежать конкатенации опасности.

  (Функция () {
    "Использовать строгий";
    / / Эта функция строго ...
 }());

 (Функция () {
    / / Но эта функция небрежный ...
 }()); 

Сфера

Исторически сложилось так, JavaScript, смешивалось о том, как функции находятся в области видимости. Иногда кажется, что они статически областью, но некоторые функции заставить их вести себя так, будто они динамической областью видимости. Это сбивает с толку, что делает программу трудной для чтения и понимания. Непонимание причин ошибок. Он также является проблемой для производительности. Статические обзорный позволит связывание переменных случиться во время компиляции, но требования для динамического объем средств обязательным должно быть отложено до времени выполнения, который поставляется с значительного снижения производительности.

Строгий режим предусматривает, что все связывание переменных сделать статически. Это означает, что функции, которые ранее требовали динамическое связывание должны быть устранены или изменены. В частности, с заявлением устраняется, и eval способность функции вмешаться в среду вызывающей строго ограничен.

Одним из преимуществ строгой кода является то, что такие инструменты, как YUI Compressor можно лучше выполнять свою работу, когда ее обработки.

Подразумеваемая Глобальные переменные

JavaScript имеет неявные глобальные переменные. Если вы не явно объявить переменную глобальной переменной неявно объявляется для вас. Это делает программирование более легким для новичков, потому что они могут пренебрегать некоторыми из своих основных обязанностей домашнего хозяйства. Но это делает управление более крупные программы гораздо сложнее, и это значительно снижает надежность. Таким образом, в строгом режиме, подразумевает глобальные переменные больше не создаются. Вы должны явно объявить все ваши переменные.

Глобальный утечки

Есть ряд ситуаций, которые могут вызвать this будет привязан к глобальному объекту. Например, если вы забыли обеспечить new префикс при вызове функции-конструктора, конструктора this будет связан неожиданно для глобального объекта, так что вместо инициализации нового объекта, то вместо этого будет молча подделка глобальных переменных. В таких ситуациях, строгий режим, а не связывать this с undefined , что вызовет конструктор создает исключение, а не, позволяя ошибка была обнаружена гораздо раньше.

Шумная Невыполнение

JavaScript всегда была свойства только для чтения, но вы не можете создать их сами, пока ES5 в Object.createProperty функция подвергается эту возможность. Если вы попытались присвоить значение только для чтения свойство, оно не будет молча. Назначение не изменит стоимости имущества, но ваша программа будет действовать, как будто он. Это целостность опасность, которая может привести к программам идти в противоречивом состоянии. В строгом режиме, пытаясь повлиять на свойство только для чтения будет сгенерировано исключение.

Восьмеричный

Восьмеричный (или основание 8) представления чисел была чрезвычайно полезной при выполнении машинного уровня программирования на машинах, чье слово размеры были кратны 3. Вы необходимые восьмеричные при работе с CDC 6600 мэйнфреймов, которые словом размер 60 бита. Если бы вы могли читать восьмеричной, вы можете взглянуть на слово, как 20 цифр. Две цифры представлены операционного кода и одну цифру определили одну из 8 регистров. Во время медленного перехода от машинных кодов для языков высокого уровня, то считалось, что полезно дать восьмеричной формы в языках программирования.

В C, крайне неудачным представление octalness был выбран: ведущий ноль. Таким образом, в C, средства 0100 64, не 100, и 08 является ошибкой, а не 8. Еще более к сожалению, это анахронизм, была скопирована в почти всех современных языков, включая JavaScript, где он используется только для создания ошибок. Он не имеет другой цели. Таким образом, в строгом режиме, восьмеричной формы не допускаются.

Et Cetera

arguments псевдо массив становится немного более массивов, как в ES5. В строгом режиме, оно теряет свою callee и caller свойствами. Это дает возможность передать ваши arguments для ненадежного кода, не отказываясь много конфиденциальной связи. Кроме того, arguments свойство функций устраняется.

В строгом режиме дубликат ключей в буквальном функция будет производить синтаксической ошибке. Функция не может иметь двух параметров с одинаковыми именами. Функция не может иметь переменную с тем же именем, один из его параметров. Функция не может delete свои переменные. Попытка delete неконфигурируемых собственности в настоящее время вызывает исключение. Примитивные значения не неявно упаковке.

Если ваша программа проходит JSLint , это вероятно, будет работать в строгом режиме.

Это все еще несовершенном мире

Есть еще проблемы в JavaScript, что строгий режим не адрес. Например, точка с запятой вставки по-прежнему опасность, и 0,1 + 0,2 до сих пор не равно 0,3. Коррекция эти проблемы придется ждать следующих выпусках.

Почему Строгий режим вопросам

Кроме очевидных выгод для надежности программы и читаемости, строгого режима, помогает решить проблемы Mashup. Мы хотим, чтобы иметь возможность пригласить кода сторонних на наших страницах, сделать полезные вещи для нас и наших пользователей, не давая, что код лицензии взять на себя браузер или исказить себя пользователь или наших серверах. Мы должны ограничить кода сторонних. Такие системы, как Каха компании Google сделать это, но на значительные затраты в производительности и неудобства. Мой собственный ADsafe система также делает это, но за счет устранения this и [] индексация от языка, который может сделать принятие трудно. Строгий режим позволяет сделать кода сторонних с удобством и производительность ADsafe и выразительность Caja. Это будет критически важно, как и наши сайты становятся все более сложными и более связаны между собой.

Строгий режим не решает XSS проблемы. Решение этой проблемы зависит от W3C, принимая некоторые позитивные действия .

ES5/strict сейчас находится в превью, и скоро будет стандартным оборудованием во всех браузерах, совместимых со стандартами во всем мире.

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!

Свойство CSS позиции

14 декабря 2010 в 7:35 утра по Тьерри Кобленц | В CSS 101 , дизайна , развития | 6 Комментариев

Это свойство применимо ко всем элементам. Она имеет пять возможных значений:

• static
• relative
• absolute
• fixed
• inherit

положение: статический

В разделе 9 модели визуального форматирования :

Коробка нормальная коробка, изложенные в соответствии с нормальным потоком . top , right , bottom и left свойства не применяются.

Вещи заметить в этой демо-

• Второе поле показывает, где именно это было бы без позиции декларации.
• Значений, указанных в top не распространяется, потому что в "статическом" контекста, вычисленное значение поле смещения всегда auto .

Что нужно помнить

• Если position свойство элемента имеет значение static , что элемент не считается расположены.
• Потому что static начальное значение (значение по умолчанию), то нет необходимости включать в себя такие стили в заявлении блока, если он не переписать другое значение.

положение: относительная

В разделе 9 модели визуального форматирования :

Положение блока рассчитывается в соответствии с нормальным потоком (это называется положение в нормальном потоке ). Затем окно смещается относительно своего нормального положения. Когда поле B является относительно позиционируемых, положение следующее окно рассчитывается как будто B были не компенсируется.

Вещи заметить в этой демо-

• 'Два' Box съехал на 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

В IE, "позиционирование" окно может быть благословением или проклятием:

• В IE6 position:relative (with haslayout) может быть использован для предотвращения окно стилизовано под отрицательные поля с подрезанными время от родительского контейнера (см. как позиционирование окна исправляет эту проблему).
• Позиционирование элемента может "мешать" стек пути коробок в IE 6 и 7, как это может создать новый контекст стэка (см. тест ).

Порядок расположения и укладки уровня

• По той последовательности, в исходном коде, позиционируемых блоков приходят перед поплавки и коробки в нормальном потоке.
• Авторы могут указать стек уровней через свойство 'г-индекс "только на позиционируемых блоков.
• В IE6 и 7, простого факта, позиционирования окна может установить контекст стэка (см. выше, " случай IE ").

Мобильные устройства

Читать статью ППК, в [шестое] значение позиции , чтобы выяснить, почему мобильных разработчиков браузеров не могут реально поддержать position:fixed .

Дополнительные материалы

• Модели визуального форматирования
• Должность (CSS собственности)
• Положение декларации

"Призрак" по аналогии DrLangbhani:

Элемент с позиции относительной всегда смещения относительно его нормального положения в потоке. Другими словами, он сдвинут относительно того, где это было бы в нормальных условиях, и смещение не влияет на расположение элементов вокруг него. Это как призрак, который оставил свое тело позади. Орган, который имеет ширину и высоту, и влияет на его окружении, но невидим. Призрачные окно может двигаться, но все еще подключен к старым телом в том, что его позиция все еще измеряется от него. Теперь элемент с позиции абсолютного еще проще. Она больше не влияет на его окружение вообще (это вытащил из макета потока). Это теперь истинное призрак без тела остался позади. Что же касается ее элементов брата обеспокоены тем, что это как если бы оно больше не существует. Чтобы получить свои позиции, просматривать каждый из его элементов родителей пока не найдете ни с позиции: относительное, [положение: фиксированной,] или позицию: абсолютная. Этот элемент будет служить ориентиром. Только если вы не найдете "позиционируется" элемент будет ли смещение от документа.

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!

В YUI 3 Галерея: Модуль карусель

13 декабря 2010 в 11:53 утра по Гопал Venkatesan и Фабиан Франк | В развитии , YUI 3 Галерея | 16 Комментариев

Что такое карусель?

Контроль Карусель предоставляет виджет для просмотра среди множества подобных объектов выстроены вертикально или горизонтально в перегруженных страницу региона. "Карусель" метафора происходит от аналогии с слайд карусели во времена пленочной фотографии; Карусель управления может поддерживать верность этой метафоре, позволяя непрерывный, круговой навигации через все содержание блоков.

Карусель является частью семейства виджетов, которые позволяют "перегрузки" места на странице, предоставляя больше содержания для этого места, чем помещается в его размеров, обеспечивая при этом легкий, интуитивно понятный механизм для пользователя, чтобы обнаружить и перейдите дополнительный контент . Аккордеоны, вкладки, деревья и ScrollViews и другие примеры этого жанра.

Почему еще одна карусель под контроля?

YUI 3 необходимы надежные, многофункциональные Карусель (как у нас в YUI 2 ). Дизайн для этой цели была карусель, чтобы сделать его мяса и чистые и дополнительные конфигурации с помощью подключаемых модулей, используя YUI 3 ' с внутренней поддержкой модульности, чтобы сохранить легкость и скорость.

YUI 3 Виджет Framework

Одна из самых больших преимуществ создания пользовательских виджетов с использованием YUI 3 является Виджет базы (больше на виджет рамки: руководство пользователя , углубленное введение видео ). Сравнение Карусель в YUI 2.8.2 на мой YUI 3 Галерея Карусель , YUI 3 версии худой и элегантный. Это потому, что большая часть тяжелой работы в отношении обеспечения основы предоставления общий набор свойств виджета, дисциплинированный жизненного цикла, прогрессивная поддержка аксессуара, и т.д. поставляются с Виджет класса.

YUI 3 виджета система также обеспечивает постоянной практики, которая способствует MVC каждый виджет принять разделения государственной методы против методов интерфейса обновления. Это делает код очень чистым и удобным. На самом деле это один из важных факторов, поэтому YUI карусель 3 лучше, чем ранее YUI 2-основанных двоюродный брат.

YUI 3 Плагин модель позволяет разработчикам добавлять новую функциональность или изменить существующее поведение на объекты. Это позволяет добавлять дополнительную функциональность поверх Карусель динамически тянуть элементов через Ajax, и т.д. Так, YUI Carousel 3 не указал код анимации запеченный в него, но вместо этого я создал плагин, который добавляет поддержку анимации для случаев, когда это необходимо . Это помогает держать компонент очень легкий.

Галерея Карусель для вашего собственного сайта

После прочтения о том, что карусель, и как он может помочь вам улучшить свой сайт, Вы, надеюсь чувствовать хотят, чтобы ваши руки грязные. Не волнуйтесь, с нашей YUI 3 расширение Галерея Карусель, карусель реализации на вашем сайте так же просто, как предоставление маркированный список в HTML. Это не просто коммерческая подача - вот как мы недавно интегрированные Галерея Карусель в Поиск Yahoo! Страница спортивных результатов.

Простой пример

Давайте начнем с простого примера, который будет охватывать почти все, что вам нужно знать. Самый простой способ для вас, чтобы использовать новую карусель Галерея чтобы YUI 3 автоматически загрузить его из сети контекстной рекламы доставки Yahoo. Ссылаясь на то, что Карусель, прокручиваемый список элементов, мы создаем список в HTML. Мы включаем в список дел, что позволяет нашим JavaScript, чтобы легко находить и работать с ней. Если у вас уже есть некоторые данные, которые представлены в списке, как путь в разметке, вы можете также просто положить карусели дел вокруг нее и испытать свою удачу! Очень важно сказать, что, хотя мы используем изображение пример здесь, вы можете использовать Галерея Карусель для чего вы хотите!

  <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>
 </ P> 

Теперь, когда у нас есть данные для работы, мы хотим повысить выглядит, показывая все пять элементов, используя виджет Карусель. Предполагая, что вы уже используете YUI 3 это простой задачей. Единственное, что вы не могли видеть раньше, в зависимости от того, насколько глубоко Вы были копаться в YUI 3 и галереи в прошлом, является то, что мы указанием Галерея версии явно. Это необходимо, поскольку мы используем новый виджет, который не включает в Галерее построить что загрузчик YUI это пытается загрузить из по умолчанию. Однако, как YUI и YUI галерея зрелых, это не будет необходимо больше в будущем, когда по умолчанию номер сборки в сторону увеличения.

  YUI ({галерея: 'галерея-2010.10.20-19-33'})
  . Использования ("Галерея-карусель", "галерея-карусельного Anim", "заменить", функции (Y) {
   уаг карусели = новый Ю. карусель ({BoundingBox: "# контейнер",
    ContentBox: "# контейнер> ол"});
   carousel.plug (Ю. CarouselAnimPlugin, {анимации: {Скорость: 0.7}});
   carousel.render ();
 }); 

(Кстати, если вы заинтересованы в получении нового материала, который Вы можете посетить Галерея YUI 3 репозитория на GitHub или вилкой в Гопал , где он разрабатывает Карусель. Если вы нашли ошибку, мы всегда рады услышать об этом.)

Вернемся к нашему примеру ... YUI займет его отсюда. Загрузчик автоматически тянет Галерея Карусель и его зависимости от содержания сети доставки Yahoo. После этого, Карусель инициализации и отображается. Пользователь может затем нажмите стрелку влево или вправо, чтобы прокрутить. Пожалуйста, простите меня за чего на одной линии ненужные сложности, но я не мог сопротивляться. Я использовал Y.CarouselAnimPlugin , чтобы наши карусели скользить от одной страницы к другой, а не просто отображением следующей странице мгновенно. Не стесняйтесь играть с Скорость параметр, если хотите.

Как вы можете видеть на скриншоте выше, Карусель запущен и работает. Тем не менее, CSS, возможно, не очень хорошо подходят в остальной части вашей страницы. Это приводит нас к следующему разделу, где мы обсудим, как настраивать Галерея Карусель.

Настройка Галерея Карусель

Теперь, когда у вас есть карусели и работает, и определили вариант использования для вашего сайта, вы, надеемся хотите интегрировать это без проблем. Как упоминалось ранее, мы сделали это для нашего спорта странице результатов поиска. Если вы хотите увеличить количество видимых элементов, например, от трех до четырех, вы можете сделать это, изменив линию, которая создает экземпляр Карусель.

  уаг карусели = новый Ю. карусель ({BoundingBox: "# контейнер",
  ContentBox: "# контейнер> ол", numVisible: 4}); 

Все еще не достаточно хорошо? Да, верно. К счастью, CSS позволяет нам добавить наши собственные определения стиля и даже перезаписать исходные, не касаясь любой существующий CSS. Таким образом, ваш первый шаг, вероятно, будет для удаления границ, потому что они довольно навязчиво. Просто добавьте следующие CSS на вашу страницу заголовок.

  . YUI 3-карусели {
   границы: ни один важный;
 }
 . YUI 3-карусельного навигационной {
   фон: ни один важный;
 }
 . Карусель ол ли {
   границы: ни один важный;
 } 

Теперь, это выглядит лучше. Я также использовал отрицательную маржу, чтобы сократить разрыв между моим Карусель и заголовком. 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.

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!

YUI Theater - Райан Роща: "Введение 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 .

• Download HD video (480p ~297MB)
• Скачать видео (m4v)
• Скачать слайды

Другие недавние театра YUI Видео:

• Paul Donnelly and Nagesh Susarla: YQL + YUI: Building End-to-End Applications — When developing widgets, it's not how to use YQL data that comes up as a question, but rather how to access it. In this YUIConf 2010 session, YQL engineers Paul Donnelly and Nagesh Susarla review starting your query out in the YQL console, accessing YQL data via the various endpoints, and going through YQL's various authentication layers.
• Eric Ferraiuolo: TipTheWeb.org: Heavy Duty YUI 3 & YQL — In this session from YUIConf 2010, TipTheWeb cofounder and YUI contributor Eric Ferraiuolo discusses the creation of a project-scale codebase using YUI 3, YUI 3 Gallery, and YQL.
• Reid Burke: Yeti: YUI's Easy Testing Interface — Testing cross-browser web applications has been too difficult for too long: You're either manually reloading browsers or struggling with complicated automation software. In this session from YUIConf 2010, YUI engineer Reid Burke talks about how YUI's Yeti project helps to address these problems. Reid discusses when you should use automated testing for your frontend code, how Yeti works with YUI Test, how to setup cross-browser testing in minutes and how the YUI team uses Yeti to ship a better product.
• Douglas Crockford: Project Future — Yahoo! JavaScript architect Douglas Crockford reflects on the life of Walt Disney, who dreamed of creating a 'City of the Future' in Florida as part of the project that became Disney World. (This is not a technical session, but rather one about big dreams and the life lessons we can draw from them.)
• Tom Hughes-Croucher: How to Stop Writing Spaghetti Code — In this session from YUIConf 2010, Yahoo! engineer Tom Hughes-Croucher explores different coding styles for event-driven, non-blocking server-side JavaScript and which styles are most successful.

CC Content/Used by Kind Permission:

• http://www.flickr.com/photos/franksvalli/5166422476/
• http://www.flickr.com/photos/franksvalli/5165821437/

Подписка на YUI Theater:

• YUI театра RSS кормить
• YUI Театр на ITunes

Найти разговоры: Bloglines | Technorati

Доля и расширить: Закладка с del.icio.us | Digg это! | Reddit!