OL, LI: content, counter. IE & Opera
10th October 2003 - 00:54
Mozilla побороть не смог, но вечер провёл занимательно. Спасибо. :)
CSS
/* Задаём систему нумерации списков для Mozilla,
IE (если *.htc вдруг не сработает);
скрываем маркёры от Opera */
ol {list-style-type: decimal;} /* IE */
html>body ol {list-style-type: none;} /* Opera */
html[xmlns] ol {list-style-type: decimal;} /* Mozilla */
/* Вешаем behavior */
ol {behavior: url("li.htc");}
/* Остальное для Opera */
ol {counter-reset: ol;}
ol ol {counter-reset: olol;}
ol ol ol {counter-reset: ololol;}
ol li:before {
content: counter(ol) ". ";
counter-increment: ol;
}
ol ol li:before {
content: counter(ol) "." counter(olol) ". ";
counter-increment: olol;
}
ol ol ol li:before {
content: counter(ol) "." counter(olol) "." counter(ololol) ". ";
counter-increment: ololol;
}
/* и т.д. Хотя есть подозрение, что в следующих
версиях Opera баги пофиксят */Содержимое li.htc:
HTC
<public:attach event="oncontentready" onevent="LetsDoIt();" />
<script language="JavaScript" type="text/javascript"><!--
function LetsDoIt() {
element.style.listStyleType = 'none';
oM = element.childNodes.length;
for ( i = 0; i < oM; i++ ) {
oLI = element.childNodes[i];
oLI.innerHTML = (i+1) + '. ' + oLI.innerHTML;
oLI.innerHTML = oLI.innerHTML.replace(/(([1-999]\. )([1-999]\. )*)/, "$1$2");
oLI.innerHTML = oLI.innerHTML.replace(/[1-999]\. /, '');
oLI.innerHTML = oLI.innerHTML.replace(/<LI>((([1-999]\. )?)*)/g, "<LI>$1" + (i+1) + '. ');
}
}
--></script>Может быть и не самый удачный код, но вполне рабочий (download). «Доработка напильником» производится в зависимости от конкретных условий.
PS. Тестировал мало (организм требует сна).
Update: теперь и в Mozilla.
Categories: CSS, dHtml, Web-билдинг | comments: (5)
Комментарии
1. kukutz 10th October 2003 - 18:09
Во-первых, большое спасибо.
Во-вторых, КАК вам удалось сделать, чтобы оно работало в IE5.0, если «One of the most exciting new features introduced in Microsoft® Internet Explorer 5.5 is Dynamic HTML (DHTML) behaviors.»?
Mash:
Пожалуйста.
Видимо я просто не так понял ( MSDN: Introduction to DHTML Behaviors ). Ну… бывает. :)
2. alshur 10th October 2003 - 19:43
2 mash: супер-супер!
2 kukutz: всё-таки, они появились именно в ie 5.0
Mash:
Спасибо на добром слове. :)
3. kukutz 10th October 2003 - 20:00
http://ar.sky.ru/olcount/li.html
как странно…
с локального диска это всегда работает правильно.
а из сети в IE5 замена происходит очень медленно и в половине случаев неправильно.
Mash:
Может быть там проблемы с кэшированием *.htc? Я имею ввиду проблемы IE5, а не серверных headers. Когда тестировал, то заметил, что локально он тоже тормозит.
Интересно, а если добавить в HTML такой скрипт (без всяких HTC), то будет ли эта страница лучше работать в IE5?
4. RusPutin 3rd November 2003 - 21:28
А если внутри <ol> есть <ul>? Там счетчик все равно показывается, так как порядок ol ul li подпадает под ol li. Такая трабла. Фиксится?
Mash:
Трабла фиксится.
Причём можно сделать так, что нумерация следующего <ol>, дочернего по отношению к такому <ul>, не будет нарушена. Т.е. можно чередовать <ul>/<ol> и «ничего за это не будет». Изврат полный.
Наброски у меня где-то были. Если интересно, то могу поискать.
5. RusPutin 4th November 2003 - 08:45
Интересною Причем очень. Если найдешь, вышли на мыло: rusputin@fromru.com
Mash:
ok