2010 »август» Yahoo! User Interface блог (YUIBlog)

Юи театър - Дъглас Crockford: "Crockford на JavaScript - Сцена 6: Loopage" (52 мин.)

30 август, 2010 в 3:47 ч. от Ерик Miraglia | в Юи театър | 8 Коментари

Дъглас Crockford последната вноска в " на JavaScript Crockford ", серия, разговор, в който той обхваща ролята на събитието скоби и значението на от страна на сървъра JavaScript, сега е на разположение на видео. Flash видео се вгражда по-долу, или можете да изтеглите HD видео (480p ~ 370MB) . Видео от първите пет лекции е на разположение на Crockford на страница JavaScript .

Други скорошни театър Юи Videos:

Никола Zakas и Виктор Tsaran,: Достъпност на началната страница на Yahoo - Никола Zakas, главният разработчик на началната страница на Yahoo!, и Виктор Tsaran, Yahoo! е старши мениджър достъпност, обсъждат стратегии и методи, които направиха един от най-посетени сайтове в света, като напълно достъпна. Разговорът се състоя през юни 2010 г. BayJax Meetup в Yahoo.
Денис Lembree: JavaScript Достъпна - Денис Lembree, достъпността експерт и създател на AccessibleTwitter,, обсъжда предизвикателствата на JS-сайтове, достъпни. Разговорът се състоя през юни 2010 г. BayJax Meetup в Yahoo.
Райън Дал: Въведение в NodeJS - Райън Дал, създател на NodeJS, въвежда на проекта и говори за подобрение на ефективността и нова архитектура. Разговорът се състоя през май 2010 BayJax Meetup в Yahoo.
Илия Insua: jsdom: CommonJS изпълнението на DOM - Илия Insua въвежда изпълнението на JavaScript DOM май 2010 BayJax Meetup в Yahoo от страна на сървъра.
Никола Zakas, Стоян Стефанов, Рос Harmes, Жулиен Lecomte, Мат Суини: High Performance JavaScript - Пет фактори, които допринасят за висока O'Reilly JavaScript обсъждат напреднали JavaScript дум скриптови оптимизации на април 2010 BayJax Meetup в Yahoo.

Абонирането за Юи театър:

Споделете и разширяване : Запазете си отметка към del.icio.us | Digg тя | Reddit!

Въвеждане на Йети: Лесно интерфейс за тестване на Юи

25 август, 2010 в 3:16 ч. от Reid Бърк | развитие | 16 Коментари

Тестване JavaScript е важен, но често пренебрегвана част от уеб програмиране. Една от причините е, защото се развива за уеб означава насочване на повече от един браузър. Юи класифицира в момента 11 различни среди, които се радват на най-високото ни ниво на подкрепа. В допълнение, ние също тест Юи на нововъзникващите среда X клас, като мобилни устройства. Когато имаш толкова много различни среди, за да подкрепят, това е примамливо просто да вземете няколко важните от тях, да се развива и на местно ниво и да се надяваме за най-добър.

В Юи, ние използваме Селен и Хъдсън за Юи Тест -тестове на единица продукция на различни браузъра и операционната система конфигурации като част от непрекъснато ни стратегия за интеграция. Това е чудесно за улов на проблемите, които са резултат от интегрирането на работата си с останалата част от сложна софтуерна стека. Той идва с цена,: ПО инструменти като тези са сложни за инсталиране и поддръжка. Във всеки случай, те не ви помогнат, докато сте развитие код и тестване преди да се ангажират.

Днес, аз съм развълнуван да се освободи Йети 0.1.0, експериментална командния ред инструмент, създаден да направи крос-браузър тестване-лесно, преди да се ангажират един ред код.

Йети автоматично стартира на JavaScript единични тестове в браузъра и отчита резултатите, без да оставя на терминала. Това е много лесен за използване: просто стартирате на yeti test.html да получите резултатите от Юи Test-тест в test.html . Можете да преминават множество HTML документи, за да опитате множество компоненти наведнъж.

 $ yeti dom/tests/dom.html attribute/tests/attribute.html json/tests/json.html ✔ DOM Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 20 passed 0 failed ✔ Y.JSON (JavaScript implementation) from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 68 passed 0 failed ✔ Attribute Unit Tests from Safari (Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16) 106 passed 0 failed 194 tests passed! (3217ms)

Истинската сила на Йети работи тестове в няколко браузъра едновременно. Въпреки че Йети може да отвори тестовете си един по един на вашия компютър, Йети ви позволява да стартирате тестове за всеки браузър, на което и да е устройство, всички по едно и също време.

Ако се сблъскате с Йети без аргументи, той ще започне уеб сървър, до който имате достъп в http://localhost:8000 . След това можете да се отбележи браузъри или устройства за вашата мрежа, на този адрес и всеки тест, който започва да тече от този момент ще бъде изпълнена на всички браузъри посещение на тестовата страница.

Когато се комбинира с отличен localtunnel , защитни стени между вас и други компютри са по-малко болезнено. Ако не сте работи с чувствителна информация, това е просто начин да се направи си Yeti на разположение на интернет:

 $ localtunnel 8000 Port 8000 is now publicly accessible from http://example.localtunnel.com

След това можете да посетите този адрес за достъп до Йети и започват да текат тестове:

Това е особено полезно за клетъчни устройства: Можете да използвате интернет връзка на мобилния ви оператор, без да е необходимо да получите вашето устройство в същата мрежа като развитие компютър.

Yeti има за цел да направи JavaScript тестване-лесно, обаче, е далеч от това да е пълна. (Не се номера на версията 0.1.0 леко.) Yeti поема използвате Юи тест, били изпитвани върху Mac OS X и може да не работи с някои видове сценарии за тестване. Въпреки тези недостатъци, Йети е толкова полезен вътрешно, че ние не искахме да се изчака по-дълго да го споделите с общността на Юи.

Получаване на код

Йети е наличен на GitHub и се предлага под BSD лиценз на Юи .

Инсталиране

Йети е написана изцяло на JavaScript и работи на върха на NodeJS . Ако сте вече NodeJS и NPM потребителски, инсталиране е много проста:

 $ npm install yeti@stable

Ако не сте инсталирали NodeJS и NPM и сте на едно скорошно Mac, можете да инсталирате Yeti с удобен инсталатор.

Изтегляне на Йети 0.1.0 Installer 2,7 MB
Изисква Mac OS X 10.6 и Intel Core 2 процесор или по-добре

Ако компютърът ви не отговаря на изискванията на инсталатора, вие все още може да използвате Йети, ако сте в състояние да инсталирате NPM. Повече инсталация и инструкции за употреба са на разположение в README Йети .

Вашето участие е добре дошъл

Йети е първият проект, ние сме стартира през Юи Labs , една категория на чадър, където нашите нови идеи и инициативи, ще се оформи. Като такива, Йети се предлага без същото ниво на подкрепа, както другите ни проекти. Ние все още се насърчават да задават въпроси и да дават обратна връзка в форуми Йети и се надявам Йети прави тестването лесно и забавно. Ако това не стане, моля да ни кажете , подайте сигнал за грешка или да участва до Йети .

Приятно тестване!

За автора: Рийд Бърк ( @ Reid ) е най-новият член на екипа на Юи. Той обича отвратителни чудовища сняг и JavaScript.

Споделете и разширяване : Запазете си отметка към del.icio.us | Digg тя | Reddit!

Разработване на достъпна Star Оценки Widget

В бързината? Прескачане на демо страница .

Много сайтове за електронна търговия, социални мрежи и онлайн общности включват рейтинг или оценка функции. Изискване мнението на хората дори се превърна в бизнес модел, в момента има сайтове, посветени на рейтинг продукти, услуги, бизнес и повече.

Най-общия интерфейс се използва за показване на гласове е "Стар рейтингова система", в която определен брой точки (по-често се изразява като звезди) се възлага на елемент от всеки рецензент. Ние считаме, този модел на много сайтове, от Amazon Yelp.

Фигура А. звезди примери от Amazon и Yelp .

Като фигура А показва, двата визуални интерфейси са подобни, но това, което прави тези две решения интересно е им маркиране база. Единият разчита на <map> , а другият <img> .

Може би си мислите, че повечето системи за рейтинг ще се основава на някои маркиране, доказа, че е семантичен и "оперативен" в много потребителски агенти - това е, че рейтингови системи ще се основава на специфичен набор на HTML елементи и атрибути, към които се прилага поведение и Стил чрез JS и CSS. Това би имало смисъл, но е далеч от истината. Когато става въпрос за маркиране, авторите се опитват почти всичко:

<a> ,
<img> ,
<span> ,
<li> ,
<map> ,
<div> ,
<input> ,
и още ...

В случай на микроформати

Преди представянето на няколко изображения техники, за да маркирате рейтинги, мисля, че е Заслужава да се отбележи основен и прост подход (от микроформати ), която използва героите:

 <abbr class="rating" title="3 stars">***</abbr>

Професионалисти: Той е прост и семантичен.; Маркиране е минимална.; Методът не е зависима от CSS.; Методът не е зависима от изображението.; Налице е не HTTP искане.
Против: Невъзможно е да се представляват половината стойности (т.е. 3.5 звезди); Тя "работи" само със звездички ("звезди").; Екранни четци, по подразбиране, а не се разширяват за съкращения, които може да не е голяма работа в този случай).

Забележка: Аз използвам "*", а не ★ (★), защото на екрана читатели (най-малко JAWS и NVDA ) изглежда пренебрегват на HTML лица.

На Markup да показва изображения рейтинги

Когато става въпрос за показване на изображения, авторите имат много опции.

Едно изображение на рейтинг

Използвайки един единствен образ:

 <img src="4stars.png" alt="4 out of five">

Една звезда
Две звезди
Три звезди
Четири звезди
Пет звезди

Професионалисти: Използването на едно изображение на рейтинг е прост и семантичен.; Методът не е зависима от CSS.; Минимална маркиране.
Против: Това създава много искания за HTTP, тъй като има много различни изображения.; На върха на изпълнението проблем, тя може да бъде кошмар за издръжка, като автори трябва да се справят с повече активи (снимки, да създават, да прокара до CDN, да променя, когато на мястото на цветовете на климата, и т.н.).; Текст, изборът не е възможно в Opera (поне в версия 9.52), като алтернативен текст се игнорира

Едно изображение на единица

От на whatwg на работен проект :

 <img alt="4 out of 5" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="one-star.png"> <img alt="" src="no-star.png">

Една звезда
Две звезди
Три звезди
Четири звезди
Пет звезди

Професионалисти: Използването на две img елемента на рейтинга намалява броя на исканията на HTTP.; Методът не е зависима от CSS.
Против: В Opera, когато изображенията са с увреждания, алтернативен текст не е избираем, и в малък екран този текст се предава с граница, което го прави по-малко четлив.

Имайте предвид, че това е взето от спорен проект на работа. По мое мнение, този метод не е приемливо, тъй като алтернативен текст не точно и сбито описание на изображението. Освен това, ако на базата на този подход е, че тези снимки представляват съдържание, тогава защо част от тях не alt текст?

На Ajaxian , например, авторът използва алтернативен текст с всяко едно изображение, което го прави много смисъл, ако той смята, че всеки от тях е съдържанието:

 <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="+" src="star1.png"/> <img [snip] alt="-" src="star0.png"/> <img [snip] alt="-" src="star0.png"/>

Във всеки случай, като се използват, тъй като на много изображения, тъй като има звезди в сравнение с използването на един единствен елемент ( img или нещо друго) е основното предимство на улесняване на глас механизми - където потребителят избере една от звездите, за да гласувал. Така че ние трябва да имате това предвид ...

Sprite за фонови изображения

Следната техника е адаптация на стратегия, първоначално изпълнени от разработчиците на Yahoo! Музика :

Markup

 <span class="rating r1 stars">1 of 5</span> <span class="rating r2 stars">2 of 5</span> <span class="rating r3 stars">3 of 5</span> <span class="rating r4 stars">4 of 5</span> <span class="rating r5 stars">5 of 5</span>

CSS

 .stars { background: transparent url(img/sprite.png) no-repeat; } .rating { font-size: 0; height: 19px; overflow: hidden; vertical-align: middle; width: 96px; display: block; } .r1 { background-position: -385px 0; } .r2 { background-position: -288px 0; } .r3 { background-position: -192px 0; } .r4 { background-position: -96px 0; }

Една звезда: 1 от 5
Две звезди: 2 от 5
Три звезди: 3 от 5
Четири звезди: 4 от 5
Пет звезди: 5 от 5

Професионалисти: Този метод изисква само едно заявление HTTP, тъй като тя разчита на един единствен образ на Sprite.; Minimal "подножието печат".
Против: Съдържание не се разкрива с изображение ефект.; Нищо не се показва, когато страницата се отпечатва (стилове на печат може да се грижи за този въпрос).; В Opera, висок контраст на стиловете прави всички звезди изчезват; същото важи и с висока оптимизация на контрастен режим .; Текст подбор е възможно, но това не е очевидно, (чрез подчертава).

А Sprite в маркиране

Този подход се основава на върха метод , който използва един спрайт изображение като елемент един <img> а не на фоново изображение:

Markup

 <span title="1 of 5" class="rating r1"><img width="0" height="1" src="sprite.gif" alt=""/>1 out of 5</span> <span title="2 of 5" class="rating r2"><img width="0" height="1" src="sprite.gif" alt=""/>2 out of 5</span> <span title="3 of 5" class="rating r3"><img width="0" height="1" src="sprite.gif" alt=""/>3 out of 5</span> <span title="4 of 5" class="rating r4"><img width="0" height="1" src="sprite.gif" alt=""/>4 out of 5</span> <span title="5 of 5" class="rating r5"><img width="0" height="1" src="sprite.gif" alt=""/>5 out of 5</span>

CSS

 .rating { position: relative; height: 1.6em; width: 8.1em; overflow: hidden; vertical-align: middle; display: block; } .rating img { position: absolute; width: 40.5em; height: 1.55em; top: 0; border: 1px solid #fff; } .r1 img { right: 0; } .r2 img { left: -24.4em; } .r3 img { left: -16.2em; } .r4 img { left: -8.1em; }

Една звезда: 1 от 5
Две звезди: 2 от 5
Три звезди: 3 от 5
Четири звезди: 4 от 5
Пет звезди: 5 от 5

Професионалисти: Този метод изисква само едно заявление за HTTP.; Тази техника е само един от четирите метода, над който разкрива съдържанието, когато на Firefox потребителите да избират "скриете изображения" или "правят изображения невидим" (от лентата с инструменти на разработчика).; Когато изображенията са недостъпни червеният "Х" се появява само в най-високата оценка (т.е. 5 от 5), вместо на всеки един, както е случаят с други разтвори, които разчитат на img елементи.
Против: Показването на изображения разчита на CSS.

Заслужава да се отбележи, че за разлика от други техники за заместване на изображения, този метод позволява:

изображения, за да мащабирате в зависимост от настройките за размер на текст.
изображения да се отпечатат.
алтернативен текст, за да лесно да се подбират, като цялото изображение се появява осветен (Firefox).
изображението няма да изчезнат с висок контраст настройка / стилове.
алтернативен текст за избор в Opera (когато изображенията са забранени).
алтернативен текст без граници в малък екран на Opera.

На Markup да гласува

Започвайки с родния механизъм

За да гласува, ние се нуждаем от ниско ниво гласуване механизъм, който позволява подбор и подаване на прост потребител. За това, можем да разчитаме на помощта на формуляр с етикети и контроли:

Markup

 <fieldset> <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5">1/5</label> <label><input type="radio" name="movie" value="2_5">2/5</label> <label><input type="radio" name="movie" value="3_5">3/5</label> <label><input type="radio" name="movie" value="4_5">4/5</label> <label><input type="radio" name="movie" value="5_5">5/5</label> </fieldset>

Резултат

Добавяне почивки и празно

За по-добра четливост,, добавят <br> и празно.

Markup

 <fieldset> 
 <legend>Rating</legend> <label><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Резултат

Въвеждане на Sprite снимката в маркиране

За това решение, ние използваме по-малък Sprite от този в примера по-горе. Тя се състои от две единични звезди "на" и "изключено").

Ние поставяме img елементи вътре в етикетите. Предполагаме, те няма да имат стойност, без да поддържа CSS, като по този начин ние ги "крият" чрез създаване на конкретни измерения чрез тяхната width и height атрибути. Имайте предвид, че използването на 0 с двете атрибути ще покаже счупен образ в някои UA и.

 <form ...> <fieldset> <legend>Rating</legend> <label class="one" title="1 out of 5"><input name="LandOf" value="1" checked="checked" type="radio"> 1/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="two" title="2 out of 5"><input name="LandOf" value="2" type="radio"> 2/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="three" title="3 out of 5"><input name="LandOf" value="3" type="radio"> 3/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="four" title="4 out of 5"><input name="LandOf" value="4" type="radio"> 4/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> <label class="five" title="5 out of 5"><input name="LandOf" value="5" type="radio"> 5/5<img src="star-sprite.gif" alt="" height="0" width="0"></label> </fieldset> </form>

Имайте предвид, че с горното маркиране, ние може да се очаква (в повечето браузъри) поле за избор чрез избор на етикета.

Като се има предвид Достъпност

За съжаление, както е, това маркиране, създава проблеми в най-малко две екранни четци: JAWS и NVDA (виж тест за тези грешки). Проблемът е свързан с използването на title атрибут и празен низ за алтернативен текст.

Заобиколно да не се обърка екрана четец на потребителите е да се използва "звезди" като алтернативен текст ( alt ) и да използва JavaScript, за да вмъкнете title на Задържането на курсора.

По-добро Markup

 <fieldset> 
 <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="4_5"> 4/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="5_5"> 5/5</label> </fieldset>

Резултат

Оформление

, Даваща размерите на изображение чрез CSS

Ние използваме em за да позволи на изображението, за да расте или се свива в зависимост от шрифта размер.

Markup

Непроменен

CSS

 img { width:2.8em; height:1.4em; }

Резултат

Както можете да видите по-вече, кликнете върху изображението, избира съответния бутон на радиото. Няма нужда за скриптове, като имплицитни етикетиране произвежда това поведение (с изключение на IE).

Премахване на изображение от потока

Стайлинг на label с position:relative и изображението с position:absolute с top / left ценности е достатъчно, за да скрие input и текст в етикетите.

Markup

Непроменен

CSS

  етикета { 
    позиция: относителна;
 } 
 IMG {
   ширина: 2.8em;
   височина: 1.4em;
    позиция: абсолютно; 
    Top: 0; 
    ляво: 0; 
 }

Резултат

Показване на една звезда на етикета

Ние стил на етикета, така че размерите му съвпада с височината и ширината на една звезда.

Markup

Непроменен

CSS

 label { position:relative;   височина: 1.4em;
  ширина: 1.4em;
  препълване: скрит;
  дисплей: блок; 
 }
 IMG {
   ширина: 2.8em;
   височина: 1.4em;
   позиция: абсолютно;
   Top: 0;
   ляво: 0;
 }

Резултат

Показване на звездите хоризонтално

Ние премахване на br и ние се носят етикетите.

Markup

Непроменен

CSS

  ДВУСТАЕН {
  дисплей: няма;
 } 
 етикета {
   позиция: относителна;
   височина: 1.4em;
   ширина: 1.4em;
   препълване: скрит;
    дисплей: блок; 
    поплавъка: ляво; 
 }
 IMG {
   ширина: 2.8em;
   височина: 1.4em;
   позиция: абсолютно;
   Top: 0;
   ляво: 0;
 }

Резултат

Показване на Sprite изображението в зависимост от рейтинга

За да настроите "3 от 5" рейтинг, ние прилагаме един и същи клас на последните два етикета. Този клас ще се измести на позицията на изображението вътре в етикета.

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"> 1/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="2_5"> 2/5</label><br> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="3_5"> 3/5</label><br> <label   клас = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="4_5"> 4 / 5 </ етикет> <br>
 <Етикет   клас = "no_star"   > <img Src="img/small-sprite.gif" width="0" height="1" alt="stars"> <input type="radio" name="movie" value="5_5"> 5 / 5 </ етикет>
 </ Fieldset>

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0; }   . No_star IMG {
  ляво:-1.4em;
 }

Резултат

Не се разчита само на изображението, за да се покаже информация

Важно е да предложи алтернатива на дисплея на звездите, в случай, не са налични изображения. Това е така, защото етикетите и радио бутони се оформят, за да бъде на върха на всяка друга страна. Едно просто решение е да се движат input и текст извън екрана (т.е. използване на text-indent:-999em ) и се прилагат на цвят на фона на етикетите.

Markup

Без промяна

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left;   фон: примкар;
  марж-надясно: 1px;
  текст тире:-999em; 
 }
 IMG {
   ширина: 2.8em;
   височина: 1.4em;
   позиция: абсолютно;
   Top: 0;
   ляво: 0;
 }
  . No_star {
  фон: # МКО;
 } 
 . No_star IMG {
   ляво:-1.4em;
 }

Забележка:

text-indent определя също така един нагоре скочи, на образа всеки път, когато контролите фокуса.
дясното поле е да се уверите, основните цветове създават квадрати и правоъгълници, което ще се случи с съседни етикети, споделящи един и същи цвят на фона).

Резултат

Завършек

Ние използваме псевдо-клас :hover да създаде някакъв ефект преобръщане,
Крием границата fieldset
Крием легендата,
Ние стил на курсора.

Markup

Непроменен

CSS

 br { display:none; } label { position:relative; height:1.4em; width:1.4em; overflow:hidden; float:left; background:teal; margin-right:1px; text-indent:-999em; } input { position:absolute; left:-999em; top:.5em; } img { width:2.8em; height:1.4em; position:absolute; top:0; left:0;   курсора: показалка; 
 }
 . No_star {
   фон: # МКО;
 }
 . No_star IMG {
   ляво:-1.4em;
 }
  етикет: hover {
  непрозрачност: 0,5;
  филтър: алфа (непрозрачност = 50);
 }
 fieldset {
  граница: 0;
 }
 легенда {
  текст тире:-999em;
 }

Забележка: label:hover се игнорира от IE6 и Opera кървене от цвета на фона чрез изображенията. В демо-страница , вместо да използват opacity , аз съм с различен Sprite , който показва четири държави.

Резултат

Показване на рейтингите, без да позволяват взаимодействие с потребителя

Ние можем да направим рейтинг "само за четене", като се добавят disabled и checked качества в съответните input .

Markup

 <fieldset> <legend>Rating</legend> <label><img src="img/small-sprite.gif" width="0" height="1" alt="stars"><input type="radio" name="movie" value="1_5"   инвалиди   > 1/5 </ етикет> <br>
   <<img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <вход тип = "Радио" име = "филм" стойност = "2_5"   инвалиди   > 2/5 </ етикет> <br>
   <<img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <вход тип = "Радио" име = "филм" стойност = "3_5" Проверено = "   проверява   "> 3/5 </ етикет> <br>
   <Label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <вход тип = "Радио" име = "филм" стойност = "4_5"   инвалиди   > 4/5 </ етикет> <br>
   <Label class="no_star"> <img src="img/small-sprite.gif" width="0" height="1" alt="stars"> <вход тип = "Радио" име = "филм" стойност = "5_5"   инвалиди   > 5/5 </ етикет>
 </ Fieldset>

CSS

Правилото :hover е била отстранена

h4> Резултати

Предоставянето на повече мисъл в процеса

В този момент, е възможно да се гласува без скрипт подкрепа, но зрящите потребители нямат представа за техния избор. Така че ние използват JavaScript, за да:

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

В същото време, ние да се възползват за използване на скрипт, за да вмъкнете title атрибути, които ще създадат "подсказки", когато потребителите мишката върху етикетите / звезди.

Поради липсата на обратна връзка по отношение на селекцията, без JavaScript, ние етикети за стил и форма контролира само ако има скрипт подкрепа. За да направите така че ние използваме JavaScript за да зададете флаг на html елемент и след това да създадете правило, въз основа на потомък селектори, съдържащи това кука. Ако флагът липсва, това правило не се прилага и елементи, които не се оформят.

Това е демо страница , крайният продукт. За да видите как това решение се държи в съответствие с различни настройки, може да искате да използвате любимите си инструменти за разработчици, за да се увеличи размер на текста, счупи изображения пътеки, да изключите JavaScript, обърнете CSS разстояние, и още ...

Увивам

Идва с "приемливо" решение изисква да се идентифицират нуждите на потребителски програми потребители особености, потребителски настройки агенти и други, което означава, продължително тестване.

В този процес, обратна връзка с потребителите е от съществено значение, защото след най-добрите практики не винаги е сигурно. Например, както е споменато по-рано, за определяне никаква стойност за alt атрибут на изображенията в етикетите, изглежда да е безопасно нещо, което трябва да направите, но се оказва, че той създава проблеми с най-малко две screenreaders (вж. тест ).

Също така, обратна връзка от страна на потребители на помощни устройства позволява да игнорира някои съобщения за грешка на валидирането - като този, че Firefox доклади лентата с инструменти за достъпност (според http://bestpractices.cita.uiuc.edu/html/nav/form/ ).

Целта тук не е да се определи всичко, все пак. Да бъдеш в състояние да се гласува, без да посочващо устройство е един от моите приоритети, но подобряване на облика на решение в Opera, когато изображенията са с увреждания, не е нещо, което смятат от съществено значение.

Най-интересната част от това "пътуване" е да се направи решение, достъпен за много потребители, при различни условия, решаване на въпроси като:

изображения ефект,
JavaScript изключен,
CSS изключен,
комбинация от по-горе.

Също така е хубаво да знаете, че тази техника разчита на img елементи, а не фонови изображения, което позволява на звездите да:

преоразмеряване себе си, според настройките на потребителя,
Покажи в режим на висок контраст,
да се отпечатва по подразбиране (за разлика от фонови изображения).

Всичко това идва, без да жертват производителност, тъй като това решение се разчита на тази единствена Спрайт:

Късно намирането

Наскоро открих, Amazon е изградена система за неговото гласуване страница. Това е доста интересен, тъй като те служат различно решение, в зависимост от сценария подкрепа. Ако има скриптът, те използвате изображение <map> (интересен подход), ако има не е скрипт, подкрепа, те използват радио бутони. И в двата случая решението е достъпен за Потребителите, използващи клавиатура, и това помага да се максимизира достъп до функция, която е основен диференциатор за платформата на Амазонка.

Имайте предвид, че те не използва JavaScript, за да замени радио бутоните с изображение <map> Вместо това, те използват noscript елементите, в които за маркиране на таблица съдържа радио бутони.

"Извън кутията" Решения

Dreamweaver ^®: Пъргав Рейтинг Widget
Юи: Star Рейтинг скрипт за Юи; Star Рейтинг скрипт с Юи
JQuery: Half-Star Оценка Plugin; JQuery Аякс ругател; Проста система за класифициране със "звезди"; 5-звездна система рейтинг в PHP, MySQL и JQuery
WordPress: GD Star Рейтинг за WordPress; GD Star Рейтинг; Звезден рейтинг за Отзиви
Светкавица: 5 Star компонент на рейтингова система
Misc.: Как трябва да бъде рейтинг звезда; Звездна джаджа 2

Специални благодарности

Специални благодарности към Виктор Tsaran на и Тод Kloots, за техния ценен обратна връзка.

Споделете и разширяване : Запазете си отметка към del.icio.us | Digg тя | Reddit!

Обявяване Юи 3.1.2: Критична актуализация на защитата за всички Потребители Юи 3.1.x/3.2.0pr1

19 август, 2010 в 24:35 от Ерик Miraglia | развитие | Коментари Off

Екипът Юи Юи 3.1.2 днес. Това е важна актуализация на защитата за всички потребители на Юи 3.1.x и 3.2.0pr1. Ако са домакини на Юи 3.1.x или 3.2.0pr1, на вашия сайт, или ако използвате кръстосана домейн функционалност на на Юи 3.1.x/3.2.0pr1 IO, са засегнати.

XDR в полезност Юи, IO прилага Flash транспорт и като метод за браузъри, които не поддържат родния XDR. Грешка при изпълнението на Flash резервно в Юи версии 3.1.x и 3.2.0pr1, позволява на io.swf файл, за да работят несигурно, независимо дали се сервира от Yahoo! CDN или от вашия собствен сървър. Лек за този проблем е двойна:

• Ако инсталирате за пълен Юи 3.1.x/3.2.0pr1 изгради директория на вашия сървър, сменете се build/io/io.swf в засегнатата версия, с версията, включени в Юи 3.1.2. така че независимо дали сте или не сте използвате полезност IO или XDR неговата функция.
Ако използвате Йо XDR функция, надграждане до версия 3.1.2 от io-swf се занимава с проблема със сигурността. Водещ версия 3.1.2 от io.swf на вашия собствен сървър (този файл не може да работи безопасно от CDN, тя не е включена на CDN като на 3.1.2). Ако сте били, изготвяне io.swf от http://yui.yahooapis.com , премахнете този домейн от вашия crossdomain.xml файл.

Повече подробности за този въпрос може да се намери в ползата документация на IO .

Споделете и разширяване : Запазете си отметка към del.icio.us | Digg тя | Reddit!

Бързо режим за редактиране Юи 2 DataTable

Август 19, 2010 в 8:42 ч. от Джон Lindal | развитие | 9 Коментари

"Юи 2 DataTable осигурява гладък редактиране на място. When disableBtns is turned on in the column configuration, editing simple values like strings or numbers feels just like Excel. However, the experience cannot be as responsive as a desktop application because each change typically requires an XHR call to the server to store (or reject!) the new value. If the user needs to change many of the displayed values, it can be a slow and frustrating experience. To solve this, I developed QuickEditDataTable. This extends DataTable to add Quick Edit mode, which allows all editable values to be changed in one bulk operation:

( Click the screenshot to play with this example .)

Преглед

To enter Quick Edit mode, call startQuickEdit() . To exit Quick Edit mode, call cancelQuickEdit() .

It is your responsibility to save the changes before calling cancelQuickEdit() . To simplify this task, QuickEditDataTable provides getQuickEditChanges() . This returns an array of objects, one for each row. Each object contains only the values that were changed in that row, keyed off the column id's. For example, if the table has 4 columns (title, author, year, quantity), and the user only changed the quantity in one row to 20, then the object for that row would be {quantity:20} . The other values would be omitted.

QuickEditDataTable can easily extend YAHOO.widget.ScrollingDataTable if you need that functionality. If you need this, simply make a copy of the source file and change the base class.

Configuration

Quick Edit is a modal state in which the cell formatters for editable columns are swapped out and replaced with special formatters that generate input , textarea , or select elements. Only columns that have quickEdit configuration will be editable. The configuration options are:

copyDown

If true, the top cell in the column will have a button to copy the value down to the rest of the rows.

formatter

The cell formatter which will render an appropriate form field: <input type=”text”>, <textarea>, or <select>. By default, the cell formatter YAHOO.widget.QuickEditDataTable.textQuickEditFormatter is used for all cells to produce input elements. To get a textarea element, configure a column to use YAHOO.widget.QuickEditDataTable.textareaQuickEditFormatter instead. You can also write a custom quick edit formatter — see below.

validation

Validation configuration for every field in the column.

css

CSS classes encoding basic validation rules:

yiv-required: Value must not be empty.
yiv-length:[x,y]: String must be at least x characters and at most y characters. At least one of x and y must be specified.
yiv-integer:[x,y]: The integer value must be at least x and at most y . x and y are both optional.
yiv-decimal:[x,y]: The decimal value must be at least x and at most y . Exponents are not allowed. x and y are both optional.

fn

A function that will be called with the DataTable as its scope and the cell's form element as the argument. Return true if the value is valid. Otherwise, call this.displayQuickEditMessage(...) to display an error and then return false.

msg

A map of types to messages that will be displayed when a basic or regex validation rule fails. The valid types are: required , min_length , max_length , integer , decimal , and regex . There is no default for type regex , so you must specify a message if you configure a regex validation. The default error messages for the other types are stored in YAHOO.widget.QuickEditDataTable.Strings and can be overridden and/or localized.

regex

Regular expression that the value must satisfy in order to be considered valid.

Sometimes, a non-editable column must be rendered differently during Quick Edit mode. The best example is a column containing a link, since navigating away from the page while in Quick Edit mode can be disastrous. To remove the link during Quick Edit, configure qeFormatter for the column to be YAHOO.widget.QuickEditDataTable.readonlyLinkQuickEditFormatter . For email addresses, use YAHOO.widget.QuickEditDataTable.readonlyEmailQuickEditFormatter . You can also write you own custom, read-only formatter. Simply follow the normal rules for constructing a DataTable cell formatter.

Custom Quick Edit Formatters

To write a custom cell formatter for QuickEdit mode, you must structure the function as follows:

function myQuickEditFormatter(el, oRecord, oColumn, oData) {
  var markup =
    '<input type="text" class="{yiv} yui-quick-edit yui-quick-edit-key:{key}"/>' +
    YAHOO.widget.QuickEditDataTable.MARKUP_QE_ERROR_DISPLAY;
    el.innerHTML = lang.substitute(markup, {
      key: oColumn.key,
      yiv: oColumn.quickEdit.validation ? (oColumn.quickEdit.validation.css || '') : ''
    });
    el.firstChild.value = extractMyEditableValue(oData);
    YAHOO.widget.QuickEditDataTable.copyDownFormatter.apply(this, arguments);
};

You can use textarea or select instead of input , but you can only create a single field.

extractMyEditableValue() does not have to be a separate function nor must it be limited to using only oData . The work should normally be done inline in the formatter function, but the name of the sample function makes the point clear.

About the author: John Lindal ( @jafl5272 on Twitter) is one of the lead engineers constructing the foundation on which Yahoo! APT is built. Previously, he worked on the Yahoo! Publisher Network.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Using YUI 2 on the DuckDuckGo Search Engine

August 19, 2010 at 5:41 am by Gabriel Weinberg | In YUI Implementations | 2 Comments

DuckDuckGo is a search engine that uses YUI extensively. Here's what it uses in particular:

ImageLoader . Matt Mlinac's YUI 2 ImageLoader was the first thing I implemented and what originally hooked me on YUI for this project. DuckDuckGo has favicons next to results and often has “Zero-click Info” above results that usually includes an image . I didn't want these images to compete with the results when loading, as getting results as fast as possible is the ultimate goal.
The ImageLoader Utility handles this well by loading the images after the page load. DDG also auto-loads the next page of results when you scroll down. Sometimes the favicons icons are therefore hidden, and with ImageLoader their load is delayed (sometimes indefinitely) until necessary. To accomplish this, there is a different image group per (internal) page, each with its own custom trigger.
```
 div.event=new YAHOO.util.CustomEvent('it');
    var ig1=new YAHOO.util.ImageLoader.group(div,'click');
    ig1.addCustomTrigger(div.event);
    div.ig = ig1;
```
Cookie . DuckDuckGo has a lot of settings , which are stored via cookies and alternately via URL params . When cookies are used, I use Nicholas Zakas's YUI 2 Cookie Utility to easily get and set the values.
```
 YAHOO.util.Cookie.set(cookie, value, { expires: new Date("January 12, 2025") });
  x=ki||YAHOO.util.Cookie.get("i"); 
```
StyleSheet . Some DDG settings change the look and feel of the site. These changes are actually accomplished after page load via Luke Smith's YUI 2 StyleSheet Utility . Some of these changes are straightforward and I can just use the setStyle Dom function .
```
 YAHOO.util.Dom.setStyle('b2','display','block'); 
```
Others require actual class changes, which I use the utility to do.
```
 YAHOO.util.StyleSheet('DDG').set('.ci', {display: "block"}).
            set('.cid', {display: "block"}).
            set('.ci2', {display: "block"}).
            enable(); 
```
Dom . I also use some functions in Matt Sweeney's base YUI 2 Dom component . I referenced setStyle above, and I also use the related getStyle , addClass and removeClass functions. In addition, I find the getViewportHeight , getViewportWidth , getX and getY functions to be incredibly useful to make things work cross-browser, and now on mobile screens as well.
KeyListener . DDG has a bunch of keyboard shortcuts that let you navigate results without the mouse. I use the YUI 2 KeyListener component to enable these shortcuts.
```
 kl14 = new YAHOO.util.KeyListener(document, { keys:[70] }, { fn:not } );kl14.enable(); 
```
AutoComplete . I'm currently working on adding search suggestions to the search engine, and will be using Jenny Donnelly's YUI 2 AutoComplete component for the front-end. I understand that AutoComplete is getting introduced in YUI 3 soon. Everything else I use has already been introduced in YUI 3, though I still use YUI 2. However, I will be exploring the migration to YUI 3 soon.

About the author: Gabriel Weinberg is the founder of the DuckDuckGo search engine, based out of Valley Forge, PA. Gabriel has been a startup founder for over ten years, and his last company was sold in 2006. Gabriel holds degrees from MIT in Physics and the Technology and Policy Program.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Implementing YUI on the Assembla.com Agile Planner

August 18, 2010 at 6:35 am by Joachim Larsen | In YUI Implementations | Comments Off

Fast and fun – that was the user requirement for the new Assembla.com Agile Planner – an AJAX interface for adding development tasks, building story/feature outlines, and scheduling them into releases. We were lucky to have YUI 3 to make it fast and fun to implement as well.

I had used YUI 2 for a number of prior projects and I had been impressed by the engineering of the UI components and the underlying library infrastructure. I wanted to learn more about YUI 3, with its compact syntax and deeper focus on DOM manipulation and CSS3-style selectors. This project, with a low dependence on 'prebuilt widgets,' was a perfect opportunity to get my feet wet with YUI 3. The facilities for 'large app' implementation via custom modules and integration with YUI loader made it a natural choice.

The Agile Planner supports a number of drag and drop user interactions with multiple interaction groups and context based behaviors. At the same time, it handles a complex set of interactions with the server, including merging in new data from the server, and propagating changes to the server.

We improved on the existing Planner which was based on Rails handlers and Prototype.js. YUI's sandbox philosophy and strong OOP facilities made coexisting with Prototype.js a breeze.

We used a large number of YUI components, including:

Async-Queue to offer a responsive experience on a page that can involve 1000+ simultaneous tickets
Drag and Drop with interaction groups.
IO as a connection manager to queue and massage server interaction.
Event-delegate to allow simply hydrating html templates and forgetting about them.
Event-key for keyboard interaction and navigation.
Collection for giving us a consistent implementation experience across browsers.
Cookie for easy short-term UI persistence.
Profiler to find the biggest speed gains
YUI Doc to leave information for the rest of the team

Working with YUI 3 on an app like this has been fun, and I am looking forward to hearing what our users will urge us to do next!

About the author: Joachim Larsen is a frontend engineer with Assembla.com.

Share and extend: Bookmark with del.icio.us | digg it! | reddit!

Следваща страница »

Други скорошни театър Юи Videos:

Абонирането за Юи театър:

Получаване на код

Инсталиране

Вашето участие е добре дошъл

В случай на микроформати

На Markup да показва изображения рейтинги

Едно изображение на рейтинг

Едно изображение на единица

Sprite за фонови изображения

Markup

CSS

А Sprite в маркиране

Markup

CSS

На Markup да гласува

Започвайки с родния механизъм

Markup

Резултат

Добавяне почивки и празно

Markup

Резултат

Въвеждане на Sprite снимката в маркиране

Като се има предвид Достъпност

По-добро Markup

Резултат

Оформление

, Даваща размерите на изображение чрез CSS

Markup

CSS

Резултат

Премахване на изображение от потока

Markup

CSS

Резултат

Показване на една звезда на етикета

Markup

CSS

Резултат

Показване на звездите хоризонтално

Markup

CSS

Резултат

Показване на Sprite изображението в зависимост от рейтинга

Markup

CSS

Резултат

Не се разчита само на изображението, за да се покаже информация

Markup

CSS

Резултат

Завършек

Markup

CSS

Резултат

Показване на рейтингите, без да позволяват взаимодействие с потребителя

Markup

CSS

Предоставянето на повече мисъл в процеса

Увивам

Късно намирането

"Извън кутията" Решения

Специални благодарности

Преглед

Configuration

Custom Quick Edit Formatters

YUI Library on Twitter

Превеждам

Обединение

Последните публикации

YUI Library

Archives:

Блогрол

Коментар политика

Become a Yahoo!

Meta: