есть такая структура таблицы меню:
<table id="table_id">
<tbody>
<tr>
<td class=""> // здесь при наведении класс="hover", при активном клике на ссылке класс = "active" и при неактивном состоянии класс = "" (пусто)
<ol>
<li class="x1"><h1><a href="">Some text of header №1</a></h1>
<ul>
<li><a href="">Some text1</a></li>
<li><a href="">Some text2</a></li>
</ul>
</li>
<li class="x1"><h1><a href="">Some text of header №2</a></h1>
<ul>
<li><a href="">Some text1</a></li>
<li><a href="">Some text2</a></li>
</ul>
</li>
</ol>
</td>
<td class=""> // здесь при наведении класс="hover", при активном клике на ссылке класс = "active" и при неактивном состоянии класс = "" (пусто)
<ol>
<li class="x1"><h1><a href="">Some text of header №1</a></h1>
<ul>
<li><a href="">Some text1</a></li>
<li><a href="">Some text2</a></li>
</ul>
</li>
<li class="x1"><h1><a href="">Some text of header №2</a></h1>
<ul>
<li><a href="">Some text1</a></li>
<li><a href="">Some text2</a></li>
</ul>
</li>
</ol>
</td>
</tr>
</tbody>
</table>
вопрос в том - как изменять класс вкладки меню (<td class="">)
мое решение:
<script type="text/javascript">
$(function() {
$('table#table_id tr td ol li, ul li').live('click', function(event) {
//event.preventDefault(); // если включить, то не работают ссылки разделов, хотя класс td меняется.
var cell = $(this).parents('td:first')[0].cellIndex;
if ( isLocalStorageAvailable() ) {
localStorage.setItem('saved_value', cell);
} else {
$.cookie('the_cookie_value', cell, { expires: 1 });
}
});
var cellIndex;
if ( isLocalStorageAvailable() ) {
cellIndex = localStorage.getItem('saved_value');
} else {
cellIndex = $.cookie('the_cookie_value');
}
$('table#table_id tr td').eq(cellIndex).removeClass('hover').addClass("active");
});
</script>
проблема в том, что мне кажется, что данное решение:
1. нерационально,
2. при включеном event.preventDefault(); перестают работать ссылки разделов, например Some text1 и так далее
Задача: при наведении на вкладку меню (<td class="">) добавлять класс="hover", при активном клике на ссылке раздела меню менять класс = "hover" на класс = "active", при неактивном состоянии оставлять класс = "" (пусто) - пустым.
PS. огромная просьба на технические ошибки не обращать внимание, коды абсолютно рабочие, возможны просто описки при наборе в этом посте. необходим совет как сделать данное решение более простым.
спасибо за помощь.
Спустя 1 день, 2 минуты, 29 секунд (28.06.2012 - 12:01) skolozhabskiy написал(а):
добрый день,
может есть у кого-нибудь идеи как оптимизировать алгоритм?
спасибо
может есть у кого-нибудь идеи как оптимизировать алгоритм?
спасибо
Спустя 46 минут, 28 секунд (28.06.2012 - 12:48) sergeiss написал(а):
| Цитата (skolozhabskiy @ 27.06.2012 - 12:59) |
| необходим совет как сделать данное решение более простым. |
Используй CSS, это будет проще.
Спустя 42 минуты, 24 секунды (28.06.2012 - 13:30) skolozhabskiy написал(а):
sergeiss
спасибо за ответ,
с удовольствием, но при клике на ссылку происходит почти незаметное обновление страницы, поэтому использовать чистый css не представляется возможным или есть какой-то иной ход решения проблемы. при этом класс td просто очищается и все.
просьба не направлять диалог на изменение задачи. она такая как есть и нужно найти простое и оптимальное решение в данном конкретном случае.
спасибо за любые идеи и практические советы.
спасибо за ответ,
с удовольствием, но при клике на ссылку происходит почти незаметное обновление страницы, поэтому использовать чистый css не представляется возможным или есть какой-то иной ход решения проблемы. при этом класс td просто очищается и все.
просьба не направлять диалог на изменение задачи. она такая как есть и нужно найти простое и оптимальное решение в данном конкретном случае.
спасибо за любые идеи и практические советы.
Спустя 41 минута, 51 секунда (28.06.2012 - 14:12) sergeiss написал(а):
skolozhabskiy - если бы ты делал на "чистом" JS, то я бы попробовал помочь. Но ты используешь, как я понимаю, какой-то фреймворк. Так что ужО извиняй 
| Цитата (skolozhabskiy @ 28.06.2012 - 14:30) |
| но при клике на ссылку происходит почти незаметное обновление страницы, поэтому использовать чистый css не представляется возможным |
А вот тут можно подробнее немного - что именно происходит, что за обновление страницы (почему?) и почему CSS тут не работает? Это не для "увода" на изменение задачи, а для моего понимания.
Спустя 3 часа, 2 минуты, 52 секунды (28.06.2012 - 17:15) skolozhabskiy написал(а):
1. я использую самый распространенный jquery. а основная моя задача максимально уйти и от java и от jquery. пока мне в этой задаче этого полностью не удается.
2. почему перезагрузка? потому что при клике посылаю GET с url опять таки, чтобы избежать использования и java и jquery.
но в данном случае я допускаю использование и и java и jquery. тем более что пример приведенный мною написан на jquery (модифицированном java)
украшать проект с java и jquery я буду в самый последний момент, а сейчас хочу максимально его сделать работающим, преимущественно, на чистом css, как вы и пишете.
теперь есть идеи?
спасибо
2. почему перезагрузка? потому что при клике посылаю GET с url опять таки, чтобы избежать использования и java и jquery.
но в данном случае я допускаю использование и и java и jquery. тем более что пример приведенный мною написан на jquery (модифицированном java)
украшать проект с java и jquery я буду в самый последний момент, а сейчас хочу максимально его сделать работающим, преимущественно, на чистом css, как вы и пишете.
теперь есть идеи?
спасибо
Спустя 3 часа, 36 минут, 6 секунд (28.06.2012 - 20:51) sergeiss написал(а):
| Цитата (skolozhabskiy @ 28.06.2012 - 18:15) |
| теперь есть идеи? спасибо |
Во-первых, не java, а javascript. Это существенно. Потому что это разные языки, разные возможности.
А во-вторых... Запиши этот код в отдельный файл, протестируй...
Свернутый текст
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<style>
.own_table
{
background-color:#66FFCC
}
.own_table tr:hover
{
background-color:#FF6666
}
.own_table tr
{
text-align:center
}
.own_table td:hover
{
background-color:#33CC66;
}
.own_table td:active
{
background-color:#CCFF00
}
</style>
<table width="100%" class="own_table">
<tr>
<td width="25%">1</td>
<td width="25%">2</td>
<td width="25%">3</td>
<td width="25%">4</td>
</tr>
<tr>
<td width="25%">5</td>
<td width="25%">6</td>
<td width="25%">7</td>
<td width="25%">8</td>
</tr>
<tr>
<td width="25%">9</td>
<td width="25%">10</td>
<td width="25%">11</td>
<td width="25%">12</td>
</tr>
</table>
</body>
</html>
Поводи мышкой, покликай на ячейки.
Спустя 48 минут, 34 секунды (28.06.2012 - 21:39) skolozhabskiy написал(а):
спасибо за ответ.
по порядку:
1. после клика должен меняться цвет выделяемой ячейки. в вашем коде он меняется только при наведении. это существенно.
2. в ячейках отсутствуют активные элементы типа типа <li><a></a></li>, а так же запросы, например, GET переданные как параметры в url. это тоже существенно. именно клик по гиперссылкам и вызывает обновление страницы, а после этого любые приданные элементу css сбрасываются!
3. извините, я просто сократил javascript и ни в коем случае не хотел нанести вам при этом оскорбление. можете считать это простым слоганом.
у вас есть еще идеи?
спасибо за помощь
по порядку:
1. после клика должен меняться цвет выделяемой ячейки. в вашем коде он меняется только при наведении. это существенно.
2. в ячейках отсутствуют активные элементы типа типа <li><a></a></li>, а так же запросы, например, GET переданные как параметры в url. это тоже существенно. именно клик по гиперссылкам и вызывает обновление страницы, а после этого любые приданные элементу css сбрасываются!
3. извините, я просто сократил javascript и ни в коем случае не хотел нанести вам при этом оскорбление. можете считать это простым слоганом.
у вас есть еще идеи?
спасибо за помощь
Спустя 7 минут, 34 секунды (28.06.2012 - 21:47) sergeiss написал(а):
После клика - это после перезагрузки страницы? Тогда при формировании страницы указывай определенный - другой - класс. Или выставляй определенные стили... Как хочешь, так и делай.
Спустя 17 минут, 12 секунд (28.06.2012 - 22:04) skolozhabskiy написал(а):
вот я и задавал вопрос как после клика и перезагрузки задать класс для выбранного ранее элемента таблицы - <td> или заголовка меню. пока мне этого не удается сделать простым методом css, а jquery выходит как-то не очень красиво.
спасибо
спасибо
Спустя 42 минуты, 39 секунд (28.06.2012 - 22:47) bodja написал(а):
skolozhabskiy
1 Сохраниь какое либо значение после перезагрузки вы можете или в куках или в window.name
2 Можете методом перебора всех например td повесить на них события onMouseOver и onClick ,ну и рулить там через className ,но тогда прийдется подучить замыкания.
3 ИМХО я бы менял стили ,а не класс,если изменений там немного.
1 Сохраниь какое либо значение после перезагрузки вы можете или в куках или в window.name
2 Можете методом перебора всех например td повесить на них события onMouseOver и onClick ,ну и рулить там через className ,но тогда прийдется подучить замыкания.
3 ИМХО я бы менял стили ,а не класс,если изменений там немного.
Спустя 7 минут, 41 секунда (28.06.2012 - 22:54) skolozhabskiy написал(а):
спасибо за ответ,
1. если внимательно смотрели мой код, то видели, что подобное я уже проделываю с localStorage.
2. если "td повесить на них события onMouseOver и onClick ,ну и рулить там через className" это будет только усложнением задачи.
3. смысл просто изменении background, но я не понял вашего совета.
есть еще идеи?
спасибо
1. если внимательно смотрели мой код, то видели, что подобное я уже проделываю с localStorage.
2. если "td повесить на них события onMouseOver и onClick ,ну и рулить там через className" это будет только усложнением задачи.
3. смысл просто изменении background, но я не понял вашего совета.
есть еще идеи?
спасибо