04.08.2012, 18:39
|
|
Аспирант
|
|
Регистрация: 26.07.2012
Сообщений: 35
|
|
Сообщение от Deff
|
madd1,
Гы - а ежели есть пустые ячейки то для старых ие - один фиг такое нужно прокручивать - там пустые ячейки частенько не кликаются
|
В 8 и 9 всё ок, ниже уже нет смысла поддерживать, им предложу мобильную версию.
На самом деле, было достаточно добавить вот такой вот span в самый последний <td> и проблема решилась для всех:
|
Цитата:
|
|
<span style="margin-left:-1px;"> </span>
|
Последний раз редактировалось madd1, 04.08.2012 в 19:34.
|
|
04.08.2012, 22:01
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
|
А почему не использовать обычный colspan и не извращаться со склеиванием ячеек?)
Кстати, Deff, давно хотел спроcить: зафига вы используете !important где ни попадя? Это в конечном итоге может хорошенько запутать.
__________________
29375, 35
Последний раз редактировалось Aetae, 04.08.2012 в 22:06.
|
|
04.08.2012, 22:17
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Aetae,
Для border-collapse:collapse!important; привычка - использую всегда !important; если нужно слепить навечно, в ие есть траблы (отмена сего не волевого свойства) при добавке юзерами своих пользовательских сss тегов - экспериметаторов дофига - потом пол-дня ищешь
Ps: !important; Естественно ставицо в 99% cлучаев на ID
Последний раз редактировалось Deff, 04.08.2012 в 22:33.
|
|
04.08.2012, 23:15
|
|
Аспирант
|
|
Регистрация: 26.07.2012
Сообщений: 35
|
|
|
Сообщение от Aetae
|
|
А почему не использовать обычный colspan и не извращаться со склеиванием ячеек?
|
Потому что эти ячейки входят в состав кнопок, но при этом являются отдельными столбцами таблицы (для динамических отступов).
В итоге, вот моя полная реализация, теперь работает во всех нужных мне браузерах без багов, может и лучше всё это можно было реализовать, но пока, мне нравится:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.table {
display: table;
width: 40%;
background: #afa;
float: left;
}
.table2 {
display: table;
width: 60%;
background: #faa;
float: left;
}
.table2>ul,
.table>ul {
display: table-row;
}
.table2>ul>li,
.table>ul>li {
display: table-cell;
white-space: nowrap;
cursor: pointer;
}
.table2>ul>.spacer,
.table>ul>.spacer {
width: 15%;
border-left: 1px solid red;
}
.table2>ul>.spacer2,
.table>ul>.spacer2 {
width: 15%;
}
.clS {
margin-left: -1px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#nav1>li').mouseover(function() {
if ($.browser.msie && $.browser.version < 9) return;
if ($(this).hasClass("spacer")) $(this).next("li").css("opacity", 0.7);
else if ($(this).hasClass("spacer2")) $(this).prev("li").css("opacity", 0.7);
else $(this).css("opacity", 0.7);
});
$('#nav1>li').mouseout(function(e) {
if ($.browser.msie && $.browser.version < 9) return;
if ($(this).hasClass("spacer")) $(this).next("li").css("opacity", 1);
else if ($(this).hasClass("spacer2")) $(this).prev("li").css("opacity", 1);
else $(this).css("opacity", 1);
});
$('#nav1>li').click(function(e) {
var thid = e.target.id;
if (thid[0] == 'c' && thid[1] == '1') {
alert('[table1] Clicked №'+thid[2]);
}
else if (thid[0] == 'c' && thid[1] == '2') {
alert('[table2] Clicked №'+thid[2]);
}
else {
if ($(this).hasClass("spacer")) $(this).next("li").click();
else $(this).prev("li").click();
}
});
});
</script>
</head>
<body>
<div class="table">
<ul id="nav1">
<li class="spacer"></li>
<li id="c11">Ячейка 1</li>
<li class="spacer2"></li>
<li class="spacer"></li>
<li id="c12">Ячейка 2</li>
<li class="spacer2"></li>
<li class="spacer"></li>
<li id="c13">Ячейка 3</li>
<li class="spacer2"><span class="clS"> </span></li>
</ul>
</div>
<div class="table2">
<ul id="nav1">
<li class="spacer"></li>
<li id="c21">Ячейка 1</li>
<li class="spacer2"></li>
<li class="spacer"></li>
<li id="c22">Ячейка 2</li>
<li class="spacer2"></li>
<li class="spacer"></li>
<li id="c23">Ячейка 3</li>
<li class="spacer2"><span class="clS"> </span></li>
</ul>
</div>
</body>
</html>
|
|
04.08.2012, 23:17
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
madd1,
а где кнопочка "запустить" ?
|
|
04.08.2012, 23:19
|
|
Аспирант
|
|
Регистрация: 26.07.2012
Сообщений: 35
|
|
|
Сообщение от devote
|
madd1,
а где кнопочка "запустить" ?
|
Поправил. |
|
04.08.2012, 23:23
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
madd1,
+
Вот эту фигню вынести в отдельную функцию с передачей двух параметров this и цифру opacity (хотя имхо терпит
if ($.browser.msie && $.browser.version < 9) return;
056 if ($(this).hasClass("spacer")) $(this).next("li").css("opacity", 1);
057 else if ($(this).hasClass("spacer2")) $(this).prev("li").css("opacity", 1);
058 else $(this).css("opacity", 1);
Последний раз редактировалось Deff, 04.08.2012 в 23:27.
|
|
04.08.2012, 23:31
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
|
Таблица с помощью li. Это уже маразм, имхо.)
__________________
29375, 35
|
|
04.08.2012, 23:44
|
|
Аспирант
|
|
Регистрация: 26.07.2012
Сообщений: 35
|
|
|
Сообщение от Aetae
|
|
Таблица с помощью li. Это уже маразм, имхо.)
|
Может Вы и правы, однако одну строчку я бы не стал называть таблицей, это, скорее, список, поэтому ul li как-то (имхо) больше подходят чисто семантически, а вот свойства табличек пришлось забрать  (Да, я знаю, что эти свойства не поддерживаются IE6-7, но IE6-7 не поддерживаются мной, так что не проиграл  ). |
|
05.08.2012, 12:22
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
Требует доработки, использовать не рекомендуется
<style>
td {
border: solid 1px;
width: 200px;
cursor: pointer;
}
table {
border: solid 1px;
}
</style>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script>
window.onload =function () {
var table = document.getElementById('table');
table.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.parentNode.tagName == 'TR') {
alert(target.innerHTML);
} else if (target.tagName == 'TABLE') {
var x = e.clientX;
var y = e.clientY;
while (target.parentNode.tagName != 'TR') {
x++;
y++;
target = document.elementFromPoint(x, y);
if (target.parentNode.tagName == 'TR') {
alert(target.innerHTML);
break;
} else if (target.tagName != 'TABLE') {
alert('ha');
break;
}
}
}
}
}
</script>
|
|
|
|
