Фильтр по:
  

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Как сделать так, чтобы... » Как сделать подсветку таблицы в uCoz? (Как сделать подсветку таблицы в uCoz?)
Как сделать подсветку таблицы в uCoz?
Дата: Пятница, 25.06.2010, 02:22 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


krash (Дата: Вторник, 22-Июн-2010, 10:25:00 | Сообщение # 167)

Вот ещё вопрос - а возможно ли сделать подсветку таблицы в uCoz? И как это сделать?

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

 
Дата: Пятница, 25.06.2010, 02:27 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


krash,
Quote (krash)
Подскажите пожалуйста как)

Quote (krash)
Вот ещё вопрос - а возможно ли сделать подсветку таблицы в uCoz? И как это сделать?

Quote (YuriT)
Но есть ньюанс: в IE (по крайней мере до IE6) этот псевдокласс работал только в применении к ссылке, т.е. к элементу A.

... Несомненно, через CSS - наиболее «грамотный» способ, но в ранних версиях ИЕ, и некоторых других браузерах - не работает, по этому, можно сделать «комбинированно» (вот такое слово - по другому - не придумал ... эх, и где «моя родная русский язык» ...)
Варинтов, как минимум, несколько.http://likbezz.ucoz.ru/_fr/0/myHover_v3.html

Вот первый:

Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr>
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr>
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>

В CSS:

Quote (CSS)
<style type="text/css">
.myHoverTb tr:hover td{background-color:#CCC;} /* Для нормальных браузеров */
.myhover td{background-color:#CCC;} /* Для ИЕ и прочих */
</style>

JavaScript:

Quote (JavaScript)
<script type="text/javascript" defer="defer">
$(document).ready(function(){
$(".myHoverTb tr").hover(
function(){$(this).addClass('myhover');},
function(){$(this).removeClass('myhover');
});
});
</script>

----- // ----

Вариант два:
CSS - тот же. HTML:

Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr onmouseover="this.className='myhover'" onmouseout="this.className=''">
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>

----- // -----

Вариант нумер три:
CSS - можно не трогать, меняем только HTML:

Quote (HTML)
<table class="myHoverTb" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr onmouseover="this.style.backgroundColor='#CCC'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 1-1</td>
<td>Ячейка 1-2</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#F0F'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 2-1</td>
<td>Ячейка 2-2</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#FF0'" onmouseout="this.style.backgroundColor='#FFF'">
<td>Ячейка 3-1</td>
<td>Ячейка 3-2</td>
</tr>
</table>

Поддерживаемые браузеры
Internet Explorer 5.5, 6.0, 7.0, 8.0
Opera 7.0, 8.0, 9.2, 9.5
Safari 1.3, 2.0, 3.1
Firefox 1.5, 2.0, 3.0

Примеры:
Вариант с JS+JQ+CSS
Вариант с JS+CSS
Вариант с JS
Вариант с JS + «tr class="odd"»

Flesh

Прикрепления: myHover_v1.html (1.8 Kb) · myHover_v2.html (2.1 Kb) · myHover_v3.html (2.2 Kb) · myHover_v4.html (2.6 Kb)

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Как сделать так, чтобы... » Как сделать подсветку таблицы в uCoz? (Как сделать подсветку таблицы в uCoz?)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия