Верстка рейтингів

Рано чи пізно кожен кодер стикається з таким завданням. І вирішити її можна по різному.

показ рейтингу

Спосіб 1 - дідівський метод

Вирізаємо дві картинки: одна для порожнього значення (в нашому випадку це зірочка), інша для заповненого. Виводимо на сайт п'ять картинок, скільки з них потрібно порожніх, а скільки заповнених визначає алгоритм програміста:

Які ж тут недоліки?

  1. для невеликого блоку потрібна була купа рядків - не кращим чином позначиться на Новомосковскемості коду, пошукової та сео оптимізацію;
  2. буде потрібно дві окремі картинки - знову ж швидкість завантаження сторінки, навантаження на сервер;
  3. використання картинок (тег ) Для оформлення, відповідно написати щось зрозуміле в alt немає можливості, а google попереджав. що краще так не робити;
  4. програмісту, який має готове число рейтингу, все одно доведеться додатково думати і писати код для коректного виведення цього самого рейтингу на сайті.

І на мій погляд найбільший недолік - практично нереальність виведення рейтингу зі значенням перестав кратним 1 / N, де N - к-ть можливих оцінок в рейтингу (в нашому прикладі 5). Наприклад, спробуй при такій верстці вивести значення рівне 64%. На сайті маємо отримати щось на зразок такого:

Спосіб 2 - гідний

Цей варіант вирішує всі перераховані вище проблеми. Алгоритм для нашого прикладу:

  1. робимо контейнер, задаємо йому фон з одним порожнім зіркою, яка розмножується по осі x (background-repeat. repeat-x);
  2. в нього вкладаємо блок, з фоном повної зірки (і тут фон множитися по осі x). За замовчуванням цей блок має довжину (width) рівну 0;
  3. в HTML коді, за допомогою атрибута style. встановлюємо довжину вкладеного блоку рівну значення рейтингу.

Різницю важко не помітити. І повір, програміст тобі буде вдячний за такий код.

Для зменшення числа окремих картинок тут сміливо можна застосовувати техніку спрайтів.

Показ рейтингу з можливістю голосування

Часто можна зустріти сайти, де рейтинг не просто показаний, а можна, клікнувши по ньому, поставити свою оцінку. Зазвичай при наведенні курсору миші на подібний блок, оцінка, обрана тобою, як-то відрізняється від інших позицій рейтингу. У нашому прикладі будуть все ті ж зірки, додасться ще третя - яскраво жовта, для підсвічування обраної оцінки.

Для цього використовуємо наступний HTML код

stars.png в даному прикладі виглядає так:

Демонстрація. Принади даного методу:

  • підсвічування зазначеної оцінки відбувається без застосування скриптів (все працює за рахунок псевдокласу hover)
  • для програміста теж все прозоро - щоб вивести потрібний рейтинг на сайт, потрібно всього лише задати потрібну ширину першого елемента списку (з класом current)
  • код в цілому можна назвати семантично
  • для IE6 доведеться додати скрипт емуляції hover, тому що цей браузер hover розуміє тільки для посилань
  • багато коду

Скрипт використовує jQuery