День 14: Javascript подсказки на стероидах

Фото автора =) 22.02.2008 от ROM

Оригинал

Примечание: Это обновление к моему первоначальному посту, который можно увидеть здесь: jQuery Подсказки.

Коди Линдли, автор «Thickbox», недавно выпустил «jTip – подсказка jQuery».
Мне действительно нравятся некоторые дополнительные возможности, которые эти подсказки предусматривают. Уверен, что есть те из вас, которые думают, что не нуждаются в еще других подсказках, но я могу предоставить некоторые интересные заявления об идеи Коди в моей работе. Когда я посмотрел на источник html, у меня возникла одна проблема, которая имеет отношение к доступности - ссылки не работают, если javascript выключен. Я не склонен смотреть на весь javascript сквозь призму доступности, но это только казалось мне, что не может быть другой способ создать такой же эффект намного лучшим способом.

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

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

Мои Изменения

Ссылка, которая действительно заставила меня задуматься о возне с кодом – один кусочек для yahoo. Она ведет к внешнему сайту (Yahoo), имеет отличные небольшие подсказки при событии mouseover, но мне не нравится этот код тем, что он использовал для создания это:

<a href="yahoo.htm?width=175&amp;link=http://www.yahoo.com" 

name="Before You Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

Поэтому я переделал немного его скрипт, и теперь тот же эффект может быть достигнут таким образом:

<a href="http://www.yahoo.com"
rel="yahoo.htm?width=175&link=yahoo&name=Before%20
%20You%20Click..."
id="yahooCopy"
class="jTip">
Go To Yahoo</a>

Демонстрация.

Улучшение: валидный HTML.
Мой новый код действует согласно w3.org

Улучшение: наименования
Пока я рассматривал код, делая неболшие изменения, я заметил, что Коди использует переменную названную ‘title’ которая была связана со значением найденным в имени ссылки. Это может сбивать с толку.

Улучшение: Юзабилити
С моим кодом у вас будет подсказка к подлинной ссылке к другому документу, внутреннему или внешнему. Или, если вы хотите только подсказку и не позаботитесь о юзабилити, вы можете убрать ссылку из кода.
Выбор за вами.

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

Наслаждайтесь.


Популярность: 81%

Подпишитесь: rss icon RSS Записей rss iconRSS комментариев.
Понравился пост? Поддержи сайт!

Рубрики: 15 дней с JQuery, Переводы |

Оставить комментарий

Подпишитесь, пожалуйста:

XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Заметьте: Включена проверка комментариев. Нет смысла повторно отправлять комментарий.


Рубрики:

Управление:




Рейтинг блогов
Рейтинг блогов
Рейтинг блогов
Яндекс цитирования
Каталог блогов Blogdir.ru
количество читателей онлайн и всего


Я - на Карте
Каждому своё…
Блог о jQuery, Linux и немного программировании