Одной из больших ловушек использования методов на стороне клиента, таких как JavaScript, для отображения контента по требованию является предварительное условие, чтобы все содержалось в переменных. Это делает добавление и обновление контента очень громоздким.
Примером может служить ввод сообщений для отображения в скроллере JavaScript — обычно это не очень интересно:
<script type="text/javascript">
var message=new Array();
message[0]="<b><a href='http://www.javascriptkit.com'>Click here</a> for JavaScript Kit!</b>";
message[1]="<a href='http://www.google.com'>Google it</a>";
"
"
</script>В этом руководстве мы рассмотрим использование DHTML, чтобы помочь преодолеть это ограничение, чтобы обычный HTML-контент на вашей странице мог отображаться динамически, как того требует ваш скрипт, без необходимости вносить какие-либо изменения в сам контент.
Общая идея
Вот основная идея — все современные браузеры (IE4 + / NS6 +) поддерживают отображение атрибутов CSS: нет, что полностью скрывает любой контент, к которому он применяется. Используя этот полезный атрибут CSS, мы можем выбрать содержимое страницы, которое мы хотим скрыть, а затем использовать сценарии, чтобы динамически оживить их в соответствии с программой нашего сценария. Ключ должен был бы разработать надежный способ «пометить» это содержимое на странице, чтобы наш скрипт мог легко идентифицировать, собрать и затем манипулировать ими.
Давайте превратим теорию в действие, шаг за шагом.
Скрыть содержимое HTML с помощью CSS
Чтобы извлечь обычный HTML-код с нашей страницы и показать его на основе более избирательного процесса — нашего сценария — во-первых, нам нужно скрыть содержимое от просмотра. Как уже упоминалось, атрибут CSS display: никто не справится с задачей, но есть и проблема совместимости с NS4. Видите ли, NS4 отправляет всех носителей этого атрибута в одну сторону в Черную Дыру. Чтобы обеспечить обратную совместимость нашего контента, самое простое решение — динамически записывать таблицу стилей:
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">');
document.write('.dyncontent{display:none;}');
document.write('</style>');
}
</script>
<p class="dyncontent">This content is hidden from view initially</p>
<p class="dyncontent">This content is hidden from view initially as well</p>
<p >This content is not hidden from view.</p>
Обратите внимание, что мы использовали атрибут «class» CSS, чтобы идентифицировать выбранный контент и применить к нему стилизацию. Это позволяет использовать более общий подход к тегированию контента, чем использование атрибута ID. В устаревших браузерах, таких как NS4, контент вообще не будет скрыт, поэтому эти пользователи могут по крайней мере прочитать вашу страницу.
Теперь, когда мы спрятали контент, нам нужен способ использовать DHTML для создания собственной коллекции из этих скрытых элементов контента. Небо — это предел того, что мы можем сделать с такой коллекцией; например, мы можем выбрать отображение элементов контента по одному в скроллере.
Создание пользовательских коллекций из элементов класса на странице
До сих пор мы скрывали определенный контент на нашей странице, динамически генерируя соответствующую таблицу стилей и применяя ее к контенту через атрибут «class» CSS:
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">');
document.write('.dyncontent{display:none;}');
document.write('</style>');
}
</script>
<p class="dyncontent">This content is hidden from view initially</p>
<p class="dyncontent">This content is hidden from view initially as well</p>
<p >This content is not hidden from view.</p>
Возникает реальный вопрос: как нам получить это содержимое в нашем сценарии? Поклоняясь DOM (Document Object Model) современных браузеров, конечно!
DOM позволяет нам теоретически оценивать любой элемент на странице и манипулировать им. Теперь вы можете быть знакомы с такими методами, как document.getElementByIddocument.getElementsByTagName Однако в настоящее время нет метода предварительной сборки для извлечения элемента по ClassName (начиная с IE6 / NS7), как мы выбрали для идентификации нашего контента выше. Однако еще не все потеряно. Мы все еще можем сделать это окольным путем:
<script type="text/javascript">
function getElementbyClass(classname){
var inc=0;
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
customcollection[inc++]=alltags[i];
}
}
getElementbyClass("dyncontent");
</script>
Ключом здесь является строка:
var alltags=document.all? document.all: document.getElementsByTagName("*");
Мы полагаемся на document.getElementsByTagName("*") Обратите внимание, что document.alldocument.getElementByIddocument.all
Это большое препятствие. С нашей собственной коллекцией то, что вы делаете с обычным содержимым HTML-страницы, становится вопросом для воображения. Давайте теперь создадим слайд-шоу из этого!
Пример: Rich HTML Slideshow
Готовы ли вы использовать то, что мы обсуждали до сих пор, чтобы создать что-то полезное? Как насчет слайд-шоу DHTML, которое вращает и отображает обычный HTML-контент на вашей странице?
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">n');
document.write('.dyncontent{display: none; width: 250px; height: 60px;}n');
document.write('</style>');
}
var curcontentindex=0;
var messages=new Array();
function getElementByClass(classname){
var inc=0;
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i];
}
}
function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0;
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1;
messages[prevcontentindex].style.display="none"; //hide previous message
messages[curcontentindex].style.display="block"; //show current message
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", 2000);
}
}
</script>
Dynamic Content:
<div class="dyncontent" style="display: block">First scroller content (visible)</div>
<div class="dyncontent">Second scroller content</div>
<div class="dyncontent">Third scroller content</div>
The rest of your page.
Скрипт ProHTML Scroller от Dynamic Drive использует эту технику для создания скроллера, который вращает обычные блоки HTML на странице. Наслаждайтесь!