|
Меняется содержимое страницы в зависимости от буквы
|
|
| Chara | Отредактировал Chara - Вторник, 11 Мая 2010, 08:42 Дата: 11 Мая 2010, 08:41 | Сообщение # 1 | ● ● ● ● ● 18 сообщений Статус: Offline | Есть буквенное меню:
Code <div class="index"> <div> <ul> <li><a href="#">а</a></a></li> <li><a href="#">б</a></li> <li><a href="#">в</a></li> <li><a href="#">г</a></li> <li class="active"><a href="#">д</a></li> <li><a href="#">е</a></li> ........ </ul> </div> можно ли как-нибудь сделать, чтобы содержимое страницы менялось в зависимости от того, на какую букву нажмет пользователь? Нужно чтобы менялись информеры ( $MYINF_7$, $MYINF_8$ и т.д.). Это возможно? помогите пожалуйста  | | |
|
| MegaFill | Дата: 11 Мая 2010, 08:44 | Сообщение # 2 |  ● ● ● ● ● 1588 сообщений Статус: Offline | юзай теги. | | |
|
| Chara | Дата: 11 Мая 2010, 09:01 | Сообщение # 3 | ● ● ● ● ● 18 сообщений Статус: Offline | А если без тегов  | | |
|
| MegaFill | Дата: 11 Мая 2010, 09:10 | Сообщение # 4 | ● ● ● ● ● 1588 сообщений Статус: Offline | А создать 33 категории и распихать по ним все посты разве легче?) | | |
|
| Task | Дата: 11 Мая 2010, 09:34 | Сообщение # 5 | ● ● ● ● ● 703 сообщения Статус: Offline | Туда где хотите видеть блок:
Code <div id="alpbet"></div><br /> <div id="alpbetArea"></div> <script type="text/javascript"> ltr='абвгдеёжзийклмнопрстуфхцчшщъыьэюя'.split(''); for(i=0;i<ltr.length;i++){ document.getElementById('alpbet').innerHTML+='<a href="javascript:\/\/" onclick="document.getElementById(\'alpbetArea\').innerHTML=\'inf'+i+'\';">'+ltr[i]+'</a>'; } </script> | | |
|
| Chara | Дата: 11 Мая 2010, 10:50 | Сообщение # 6 | ● ● ● ● ● 18 сообщений Статус: Offline | MegaFill, это давнооо уже сделано, до тегов).
Сейчас надо оформить приличнее. 
Task, спасибо вам огромное за желание помчь, только.простите  а как это связать с материалами (каталог файлов), которые расположены в категориях (абвгдеёж и т.д.), помогите пожалуйста.
Т.е. предполагается сверху весь алфавит, при нажатии на буковку - появляется список материалов на эту буковку. | | |
|
| Task | Дата: 11 Мая 2010, 10:56 | Сообщение # 7 | ● ● ● ● ● 703 сообщения Статус: Offline | Chara, это должно быть обязательно в информерах? | | |
|
| Chara | Дата: 11 Мая 2010, 11:22 | Сообщение # 8 | ● ● ● ● ● 18 сообщений Статус: Offline | Task, да нет, не обязательно, главное, чтобы было | | |
|
| Task | Отредактировал Task - Вторник, 11 Мая 2010, 12:28 Дата: 11 Мая 2010, 11:56 | Сообщение # 9 | ● ● ● ● ● 703 сообщения Статус: Offline | В то место где Вы хотите видеть блок:
Code <div id="alpbet"></div><br /> <div id="alpbetArea"></div> <script type="text/javascript"> ltr='абвгдеёжзийклмнопрстуфхцчшщъыьэюя'.split(''); for(i=0;i<ltr.length;i++){ document.getElementById('alpbet').innerHTML+='<a href="javascript:\/\/" onclick="$(\'#alpbetArea\').text(\'Загрузка...\');$(\'#alpbetArea\').load(\'/names.html #links'+i+'\');">'+ltr[i]+'</a>'; } </script> В корень сайта загружаем файл names.html, со следующим содержимым:
Code <html> <head> <title>NAMES [LIST]</title> </head> <body> <!--Тут все начинается на букву "А".--> <div id="links0"> <a href="#">Ya nachinaus na "A".</a><br /> <a href="#">I ya na "A".</a><br /> <a href="#">A yo toze "A".</a><br /> <a href="#">Moya ssilka na "A".</a><br /> <a href="#">Esche odna "A".</a> </div> <!--Тут все начинается на букву "Б".--> <div id="links1"> <a href="#">Ya nachinaus na "B".</a><br /> <a href="#">I ya na "B".</a><br /> <a href="#">A yo toze "B".</a><br /> <a href="#">Moya ssilka na "B".</a><br /> <a href="#">Esche odna "B".</a> </div> <!--Тут все начинается на букву "В".--> <div id="links2"> <a href="#">Ya nachinaus na "V".</a><br /> <a href="#">I ya na "V".</a><br /> <a href="#">A yo toze "V".</a><br /> <a href="#">Moya ssilka na "V".</a><br /> <a href="#">Esche odna "V".</a> </div> <body> </html>
Чтобы создать блок с новой буквой, создайте блок (в файле names.html):
Code <div id="links[ТУТ_НОМЕР]">[ТУТ_СОДЕРЖИМОЕ]</div>
Вместо [ТУТ_НОМЕР] ставим номер соответствующий букве по алфавиту (отсчет с нуля). Вместо [ТУТ_СОДЕРЖИМОЕ], ставим содержимое которое хотите видеть при нажатии на букву.
Пример | | |
|
| Chara | Дата: 11 Мая 2010, 16:55 | Сообщение # 10 | ● ● ● ● ● 18 сообщений Статус: Offline | Task, о, это выход, да, огромное вам спасибо!
А не подскажете еще, можно ли в вашем коде задать дизайн этого алфавита? В каком месте это можно сделать? | | |
|
| Infamous | Дата: 11 Мая 2010, 16:59 | Сообщение # 11 |  ● ● ● ● ● 1670 сообщений Статус: Offline | Chara, document.getElementById('alpbet').innerHTML+='<a style="" href="javascript:\/\/" onclick="$(\'#alpbetArea\').text(\'Загрузка...\');$(\'#alpbetArea\').load(\'/names.html #links'+i+'\');">'+ltr[i]+'</a>';} | | |
|
| cucYa | Дата: 11 Мая 2010, 17:03 | Сообщение # 12 |  ● ● ● ● ● Совращенный мальчик.7317 сообщений Статус: Offline | | | |
|
| B-Rozzy | Отредактировал B-Rozzy - Вторник, 11 Мая 2010, 19:50 Дата: 11 Мая 2010, 19:56 | Сообщение # 13 |  ● ● ● ● ● 259 сообщений Статус: Offline | а можно еще проще: Code <div class="index"> <div> <ul> <li><a onclick="menu('a')">а</a></a></li> <li><a onclick="menu('b')">б</a></li> <li class="active"><a onclick="menu('d')" active="true">д</a></li> </ul> </div> <div id="links"> <div id="links-a" alpbet="1">[ТУТ_СОДЕРЖИМОЕ 1 ]</div> <div id="links-b" alpbet="1">[ТУТ_СОДЕРЖИМОЕ 2 ]</div> <div id="links-d" alpbet="1">[ТУТ_СОДЕРЖИМОЕ 3 ]</div> </div> <script> function menu(i){ if($('a-'+i+'').attr('active')!='true') {$('#links div[alpbet="1"]').fadeOut(0500);$('#links-'+i+'').fadeIn(0500)} } </script>
не проверялДобавлено (11 Май 2010, 19:56)
---------------------------------------------
можно без эффекта:
Code <script>
function menu(i){
if($('a-'+i+'').attr('active')!='true')
{$('#links div[alpbet="1"]').fadeOut(0000);$('#links-'+i+'').fadeIn(0000)}
}
</script> | | |
|
| Task | Дата: 11 Мая 2010, 20:09 | Сообщение # 14 | ● ● ● ● ● 703 сообщения Статус: Offline | B-Rozzy, вы знакомы с русским алфавитом? Там 33 буквы. Нужно 33 блока и в каждом блоке куча информации. Плюс ваши эффекты повесят сайт.Добавлено (11 Май 2010, 20:09)
---------------------------------------------
Валидатор за это будет кричать благим матом. | | |
|
| Chara | Дата: 11 Мая 2010, 21:23 | Сообщение # 15 | ● ● ● ● ● 18 сообщений Статус: Offline | Task, и что делать | | |
|
| Task | Дата: 11 Мая 2010, 21:42 | Сообщение # 16 | ● ● ● ● ● 703 сообщения Статус: Offline |
То есть? У вас же все работало? | | |
|
| Chara | Дата: 11 Мая 2010, 22:03 | Сообщение # 17 | ● ● ● ● ● 18 сообщений Статус: Offline | Task, да, работает, спасибо, но я не могу сделать дизайн в css для этого меню стили Code
/*********** index ****************/
.index {
border:1px solid #ccbfa0;
margin:0 0 10px 0;
padding:0 0 5px 0;
width:100%;
overflow:hidden;
position:relative;
}
.index div {
position:relative;
left:50%;
float:left;
text-align:center;
}
.index div ul {
position:relative;
left:-50%;
float:left;
}
.index li {
list-style:none;
display:inline;
float:left;
text-align:center;
color:#ae1e00;
text-transform:uppercase;
width:19px;
margin:0 2px;
}
.index li a{
background:url(../index_li_bg.jpg) top left no-repeat;
padding:10px 0;
text-align:center;
display:block;
color:#ae1e00;
text-decoration:none;
}
.index li a:hover{
background:url(../index_li_active.jpg) top left no-repeat;
color:#ffffff;
text-decoration:none;
} код самого меню в первом моем сообщении. как связать этот дизайн с тем, что вы сделали? | | |
|
| Task | Дата: 11 Мая 2010, 22:34 | Сообщение # 18 | ● ● ● ● ● 703 сообщения Статус: Offline | Code #alpbet{
border:1px solid #ccbfa0;
margin:0 0 10px 0;
padding:0 0 5px 0;
width:100%;
overflow:hidden;
position:relative;
}
#alpbet a, #alpbet a:active, #alpbet a:visited{
float:left;
text-align:center;
text-transform:uppercase;
width:19px;
margin:0 2px;
background:url(../index_li_bg.jpg) top left no-repeat;
padding:10px 0;
display:block;
color:#ae1e00;
text-decoration:none;
}
#alpbet a:hover{
background:url(../index_li_active.jpg) top left no-repeat;
color:#ffffff;
text-decoration:none;
} | | |
|
| B-Rozzy | Дата: 12 Мая 2010, 15:43 | Сообщение # 19 | ● ● ● ● ● 259 сообщений Статус: Offline | B-Rozzy, вы знакомы с русским алфавитом? Там 33 буквы. Нужно 33 блока и в каждом блоке куча информации. Плюс ваши эффекты повесят сайт.
представьте себе знаком.пусть подгружает информацию.почему-то у меня ничего не виснет из-за эффектов,ага.
Валидатор за это будет кричать благим матом.
пфф...можно даже стиль прописывать и потом стилями же и пользоваться...то есть:
Code <div id="links-a" alpbet="1"> и $('#links div[alpbet="1"]').fadeOut(0500);$('#links-'+i+'').fadeIn(0500) Code <div id="links-a" style="border:1px solid #000"> и $('#links div[style="border:1px solid #000"]').fadeOut(0500);$('#links-'+i+'').fadeIn(0500) | | |
|
| Task | Дата: 12 Мая 2010, 15:56 | Сообщение # 20 | ● ● ● ● ● 703 сообщения Статус: Offline |
Чего?  | | |
|
