Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Построение вёрстки меню, прошу написать скрипт 
V
    Опции темы
ОнКофе
Дата 14.3.2006, 11:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет



Код

function MenuItem (title, link, submenu, submenulink,)    
{    
this.Title = title;    
this.Link = link;    
this.SubMenu = submenu;    
this.SubMenuLink = submenulink    
}    
new MainMenuItem("пункт 1", "index1.htm"    
, {    
"подменю 1.1" : "new1.htm",    
"подменю 1.2" : "new2.htm"    
}),    
new MainMenuItem("пункт 2", "index2.htm"    
, {    
"подменю 2.1" : "new3.htm",    
"подменю 2.2" : "new4.htm"    
});    


и нужно вставить эти названия и сами ссылки в таблицу
Код

<table>    
<tr>    
<td><a href="index1.htm">пункт1</a></td>    
</tr>    
<tr>    
<td><a href="new1.htm">подменю 1.1</a></td>    
<td><a href="new2.htm">подменю 1.2</a></td>    
</tr>    
</table>    
<table>    
<tr>    
<td><a href="index2.htm">пункт 2</a></td>    
</tr>    
<tr>    
<td><a href="new3.htm">подменю 2.1</a></td>    
<td><a href="new4.htm">подменю 2.2</a></td>    
</tr>    
</table>    


ПРИМЕЧАНИЕ: нужна такая функция-конструктор, которая будет заполнять эту таблицу автоматически... то есть, чтобы я в любой момент мог добавить в массив новую ссылку, и таблица сама перестраивалась бы.

Если кто-нибудь знает - помогите! ЗАРАНЕЕ БЛАГОДАРЕН!


M
Aliance
Зачем плодить темы? Пользуйся кнопкой “код” правильно!


Это сообщение отредактировал(а) Aliance - 14.3.2006, 13:13
PM MAIL WWW   Вверх
Sardar
Дата 14.3.2006, 12:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



А своих попыток не было? smile
При нулевом коде обычно обращаються в раздел "работа".

Наверное в конце недели поставлю сюда одну интересную менюшку с подробным, написал на днях для нашего форума, там будет и построение вёрстки.

Совет: убирай таблицы, делай меню на списке (UL), задавай стили, будет гораздо проще работать smile
Название давай осмысленное, просто "JS" рискует упасть в мусор не прочитанным.



--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Ciber SLasH
Дата 14.3.2006, 14:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Объясняю алгоритм:
1) обходишь в цикле все свойства объекта:
Код

for (var i in Obj) {
    
}

где i — будет текущим свойством объекта при каждой итерации; Obj — твой объект с менюхами
2) в цикле делаешь проверку текущего свойства на то, содержит ли он в себе другой объект, т.е. подменю:
Код

if (i instanceof Object) {
    
}

3) если проверка дала положительный результат, то проходишь по всем свойствам этого подобъекта:
Код

if (i instanceof Object) {
    for (var i in ) {
        
    }
}

ну и при каждом проходе соответственно строишь необходимую разметку. Просто заведи переменную и прибавляй постепенно к ней разметку, а после — присоединяешь эту разметку к необходимому элементу.
PM   Вверх
Ciber SLasH
Дата 14.3.2006, 15:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Стоп, тут вообще-то не так, даже меню с помощью этого конструктора неправильно создаётся. Тут нужно подругому.
PM   Вверх
ОнКофе
Дата 14.3.2006, 15:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет



Цитата(Ciber SLasH @ 14.3.2006, 15:08)
Стоп, тут вообще-то не так, даже меню с помощью этого конструктора неправильно создаётся. Тут нужно подругому.

Вы можете написать готовый результат? Я думаю, что это будет многим интересно!
PM MAIL WWW   Вверх
Ciber SLasH
Дата 14.3.2006, 15:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Да ничего тут интересного вообще нет, даже с таблицами подход не очень рулит. Вот что я намудрил:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<script type='text/javascript'>
/*** Конструктор элементов меню ***/
function MainMenuItem (title, link, submenu, submenulink) {
this.Title = title;
this.Link = link;
this.SubMenu = submenu;
this.SubMenuLink = submenulink;
}

/*** Создание разметки для меню ***/
function buildMenu(obj) {
/*
Пример начального состояния content в run-time:
content = 
    <table>
    <tr><td><a href='index1.htm'>пункт 1</a></td></tr>
*/
var content = "<table>\n<tr><td><a href='"+
    obj.Link+"'>"+obj.Title+"</a></td></tr>\n";
    // Пробегаем по всем элементам массива "подменю ссылок", т.е. то, что идёт 4-м параметром ф. MainMenuItem
    for (var i = 0; i < obj.SubMenuLink.length; i++) {
        // Дополняем content
        content += "<tr><td><a href='"+obj.SubMenuLink[i]+"'>"+obj.SubMenu[i]+"</a></td></tr>\n";
    }
    content += "</table>";
return content;        // собрали всё разметку для олного элемента массива myMenu
}

onload = function () {
var menu = document.getElementById("menu");
    // Пробегаем по всему массиву myMenu и создаём разметку для каждого его елемента
    for (var i = 0; i < myMenu.length; i++) {
        menu.innerHTML += buildMenu(myMenu[i]);
    }
}

var myMenu = [
    new MainMenuItem("пункт 1", "index1.htm", ["подменю 1.1", "подменю 1.2"], ["new1.htm", "new2.htm"]),
    new MainMenuItem("пункт 2", "index2.htm", ["подменю 2.1", "подменю 2.2"], ["new3.htm", "new4.htm"]),
    new MainMenuItem("пункт 3", "index3.htm", ["подменю 3.1", "подменю 3.2"], ["new5.htm", "new6.htm"])
];
</script>
<style type='text/css'>
table, td {border: 1px solid black}
#menu {margin: 10px}
</style>
</head>

<body>
<div id='menu'></div>
</body>
</html>


Это сообщение отредактировал(а) Ciber SLasH - 14.3.2006, 16:30
PM   Вверх
Sardar
Дата 14.3.2006, 15:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



ОнКофе, делаешь древовидное меню?
Тогда забей на таблицы, пользуй списками (да и вообще в любом меню списками), структура уже есть, перебирать обьекты умеем (смотри пост Ciber SLasH'a), а вёрстку создаём путём:
Код

//все действия по созданию узла и набору его повторяем для каждого меню/субменю,
//лучше вызывать функцию рекурсивно

  var uzel = document.createElement("ul"); //создали узел (меню)
  //набиваем опциями, есессно в цикле, тут для примера
  var opcija = document.createElement("li");
  opcija.appendChild(document.createTextNode("Опция 1"));
  //допустим в submenu лежит ранее созданный узел, на практике лучше вузвать функцию
  //рекурсивно на структуре подменю
  opcija.appendChild(submenu);

  //в итоге имеем узел (меню в смысле) со всеми подузлами,
  //добавим его в документ
  document.body.appendChild(uzel); //за место body любая нода

Так в идеале строиться вёрстка, для древовидных структур всё предельно просто если функция вызывает себя рекурсивно.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Ciber SLasH
Дата 14.3.2006, 15:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Отредактировал свой предыдущий пост, а вообще почитай эту статью: http://webmascon.com/topics/coding/42a.asp
PM   Вверх
ОнКофе
Дата 14.3.2006, 16:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет



Ciber SLasH,

http://webmascon.com/forum/viewtopic.php?t...bfd5847e217135f

Я там принимал обсуждение (он_кофе)... полностью понял конструкцию меню построенного на списках с использованием списков, но к сожалению мне нужно пользоваться таблицами... такие условия... поэтому я и просил о помощи... Сейчас посмотрю как ты передела! ОЧЕНЬ благодарен
Добавлено @ 16:09
Ciber SLasH,
а вот посмотри, я попробовал вставить
var c = new MainMenuItem("пункт 3", "index3.htm", ["подменю 3.1", "подменю 3.2"], ["new5.htm", "new6.htm"]);

но 3 пункт меню у меня не показывает как быть? А все понял.. нашел причину....
Вот сюда добавим + buildMenu(с) и получим...
<input type="button" onClick='document.getElementById("menu").innerHTML = buildMenu(a) + buildMenu(b) + buildMenu(с)' value="Создать меню">

Тогда такой вот вопрос, а как сделать, чтобы меню сразу отображалось, ну чтобы не нужно было нажимать на кнопку... и при этом не сувать вызов функции в <body> ??? Есть ИДЕИ?


Думаю что если ты еще добавишь описание всего того что ты написал, то это очень многим пригодится. Сейчас я уже не за свои интересы говорю!

Это сообщение отредактировал(а) ОнКофе - 14.3.2006, 16:16
PM MAIL WWW   Вверх
Ciber SLasH
Дата 14.3.2006, 16:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Отредактировал свой пост с кодом.
PM   Вверх
ОнКофе
Дата 14.3.2006, 16:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет



Ciber SLasH,

Великолепно!!! Я ПРОСТО В ВОСТОРГЕ !!!
Такой вопрос.... а это все как-нить можно на asp перенести? будет в asp работать? А у тебя есть ася?

PM MAIL WWW   Вверх
12345c
Дата 14.3.2006, 16:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Есть многочисленные примеры меню на сайтах со скриптами - http://script.woweb.ru/index.htm/c/65 и подобные, разделы "Навигация".


PM WWW   Вверх
Ciber SLasH
Дата 14.3.2006, 16:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Цитата(ОнКофе @ 14.3.2006, 16:37 Найти цитируемый пост)
будет в asp работать?

Понятия не имею, я с ASP-ом не знаком.
PM   Вверх
ОнКофе
Дата 14.3.2006, 16:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет



Цитата(Ciber SLasH @ 14.3.2006, 16:42)
Понятия не имею, я с ASP-ом не знаком.

не против если я с твоим скриптом убегу в раздел asp ? ГЫ!
Добавлено @ 16:53
Ciber SLasH,
еще наткнулся на непонятное.... а как сделать пункт меню например второй, чтобы у него не было подпунктов???
PM MAIL WWW   Вверх
Ciber SLasH
Дата 14.3.2006, 16:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67



Да пожалуйста, хотя стоит заглянуть по ссылке, которую дал 12345c
PM   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0678 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.