Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.69/16: Рейтинг темы: голосов - 16, средняя оценка - 4.69
G-Cat
16 / 16 / 1
Регистрация: 15.03.2009
Сообщений: 94
1

Вставка элементов меню (содержащих javascript) через javascript

13.12.2010, 16:49. Просмотров 3025. Ответов 17
Метки нет (Все метки)

Пишу курсовой проект по JavaScript в ходе которого потребовалось создать небольшой локальный сайт, страничек довольно много и я решил, при помощи javascript, отделить меню и всё оформление в отдельный файл и просто подключать его к каждой странице (так покомпактнее, как мне кажется, выглядит всё, да и изменять проще).

Собственно вот часть когда, по которой мне необходима Ваша помощь, дорогие формучане:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
  <head>
    <title>Справочное руководство по СУБД "MS ACCESS"</title>
 
    <meta http-equiv="Content-Language" content="ru">
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8">
 
    <link rel="stylesheet" type="text/css"  href="css/main.css">
    <link rel="stylesheet" type="text/css"  href="css/headline.css"> 
    <link rel="stylesheet" type="text/css"  href="css/menu_bar.css">
    <link rel="stylesheet" type="text/css"  href="css/content.css">  
    
    <script type="text/javascript" src="javascript/menu.js">
    </script>
  </head>
 
  <body>
  <div align="center">
    <!--шапка сайта-->
    ...
    
    <!--меню сайта-->
    <script type="text/javascript" src="javascript/appearance/menu_bar.js">
    </script>
    
    <!--меню сайта-->
    ...
  </body>
</html>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
document.write("    <div class=\"menu\">");
document.write(" ");
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          Оглавление");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"010100.html\"><div class=\"subitem\" title=\"Базы и Банки данных в вычислительных системах\">Базы и Банки данных</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#12\"><div class=\"subitem\" title=\"Знакомство с языком SQL\">SQL</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#13\"><div class=\"subitem\" title=\"Основы работы в СУБД MS Access\">MS Access</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write(" ");   
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          Тесты");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"#21\"><div class=\"subitem\" title=\"Первая глава учебника\">на знание Теории</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write("        
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          О проекте");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"#31\"><div class=\"subitem\" title=\"Первая глава учебника\">Разработчики</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#32\"><div class=\"subitem\" title=\"Первая глава учебника\">Автор методички</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#33\"><div class=\"subitem\" title=\"Вторая глава учебника\">Контакты</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write(" ");
document.write("      <div class=\"footer_menu\"></div>");
document.write("    </div>");


Собственно проблема в том что данный элемент (menu_bar) не отображается. Я понимаю что реализовано у меня всё это довольно топорно, поэтому и пишу Вам.
Подскажите, пожалуйста, как можно:

1) заставить этот код работать
2) реализовать проще выпадающие списки меню (желательно многоуровневые)
3) есть ли другие механизмы вставки повторяющихся элементов страницы (SSI не предлагать)?

Заране благодарю за игнор\ответ\...мат в ответ.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.12.2010, 16:49
Ответы с готовыми решениями:

Вставка гиперссылки через JavaScript
Здравствуйте. Помогите мне разобраться с парочкой нюансов на JS, а именно:...

Скрытие элементов через javascript
Чем больше раз нажать кнопку Hide, тем больше в alert() будет переходов на...

Вставка двух форм с JavaScript
Пытался вставить две формы на одну страницу: &lt;form id=&quot;send&quot; method=&quot;POST&quot;&gt;...

вставка html средствами javascript
доброго времени суток. опишу суть проблемы: есть &lt;div id=&quot;my_div&quot;...

JavaScript середина страницы, вставка
Совсем не силен на javaScript, вот можно ли такое сделать? После загрузки...

17
Сергей Ка
55 / 55 / 8
Регистрация: 12.12.2010
Сообщений: 204
13.12.2010, 17:29 2
ошибки при выполнении javascript есть?
0
Артем Д.
45 / 45 / 10
Регистрация: 08.12.2010
Сообщений: 104
13.12.2010, 17:34 3
Цитата Сообщение от G-Cat Посмотреть сообщение
Пишу курсовой проект по JavaScript в ходе которого потребовалось создать небольшой локальный сайт, страничек довольно много и я решил, при помощи javascript, отделить меню и всё оформление в отдельный файл и просто подключать его к каждой странице (так покомпактнее, как мне кажется, выглядит всё, да и изменять проще).

Собственно вот часть когда, по которой мне необходима Ваша помощь, дорогие формучане:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
  <head>
    <title>Справочное руководство по СУБД "MS ACCESS"</title>
 
    <meta http-equiv="Content-Language" content="ru">
    <meta http-equiv="Content-Language" content="text/html; charset=utf-8">
 
    <link rel="stylesheet" type="text/css"  href="css/main.css">
    <link rel="stylesheet" type="text/css"  href="css/headline.css"> 
    <link rel="stylesheet" type="text/css"  href="css/menu_bar.css">
    <link rel="stylesheet" type="text/css"  href="css/content.css">  
    
    <script type="text/javascript" src="javascript/menu.js">
    </script>
  </head>
 
  <body>
  <div align="center">
    <!--шапка сайта-->
    ...
    
    <!--меню сайта-->
    <script type="text/javascript" src="javascript/appearance/menu_bar.js">
    </script>
    
    <!--меню сайта-->
    ...
  </body>
</html>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
document.write("    <div class=\"menu\">");
document.write(" ");
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          Оглавление");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"010100.html\"><div class=\"subitem\" title=\"Базы и Банки данных в вычислительных системах\">Базы и Банки данных</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#12\"><div class=\"subitem\" title=\"Знакомство с языком SQL\">SQL</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#13\"><div class=\"subitem\" title=\"Основы работы в СУБД MS Access\">MS Access</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write(" ");   
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          Тесты");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"#21\"><div class=\"subitem\" title=\"Первая глава учебника\">на знание Теории</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write("        
document.write("        <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">");
document.write("          О проекте");
document.write("          <div class=\"list_items\">");
document.write("            <div class=\"kont\">");
document.write("              <a class=\"nav_menu\" href=\"#31\"><div class=\"subitem\" title=\"Первая глава учебника\">Разработчики</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#32\"><div class=\"subitem\" title=\"Первая глава учебника\">Автор методички</div></a>");
document.write("              <a class=\"nav_menu\" href=\"#33\"><div class=\"subitem\" title=\"Вторая глава учебника\">Контакты</div></a>");
document.write("            </div>");
document.write("          </div>");
document.write("        </div>");
document.write(" ");
document.write("      <div class=\"footer_menu\"></div>");
document.write("    </div>");


Собственно проблема в том что данный элемент (menu_bar) не отображается. Я понимаю что реализовано у меня всё это довольно топорно, поэтому и пишу Вам.
Подскажите, пожалуйста, как можно:

1) заставить этот код работать
2) реализовать проще выпадающие списки меню (желательно многоуровневые)
3) есть ли другие механизмы вставки повторяющихся элементов страницы (SSI не предлагать)?

Заране благодарю за игнор\ответ\...мат в ответ.
Смотри 21-ую строку...
1
Crudelis
Шаровик затейник
683 / 432 / 78
Регистрация: 06.05.2010
Сообщений: 1,109
13.12.2010, 17:44 4
зачем так много документ врайтов, если можно всё запихачить в один и как писали выше, сторка 21, но ошибка в 22й строке, кавычка со скобкой открыта а закрытия нет, пример как пихать все в один врайт:
Javascript
1
2
3
document.write("    <div class=\"menu\">"+
                      "<div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">"+
                      "Оглавление");
либо так :
Javascript
1
2
3
document.write("    <div class=\"menu\">
                      <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">
                      Оглавление");
1
Артем Д.
45 / 45 / 10
Регистрация: 08.12.2010
Сообщений: 104
13.12.2010, 17:47 5
Цитата Сообщение от Crudelis Посмотреть сообщение
зачем так много документ врайтов, если можно всё запихачить в один и как писали выше, сторка 21, но ошибка в 22й строке, кавычка со скобкой открыта а закрытия нет, пример как пихать все в один врайт:
Javascript
1
2
3
document.write("    <div class=\"menu\">"+
                      "<div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">"+
                      "Оглавление");
либо так :
Javascript
1
2
3
document.write("    <div class=\"menu\">
                      <div class=\"item\" onMouseOver=\"overItem(this);\" onMouseOut=\"outItem(this);\">
                      Оглавление");
А, ну да, в 22, там просто не понятно немного со строками. =)
И кстати, document.write должен быть в одну строку.
0
G-Cat
16 / 16 / 1
Регистрация: 15.03.2009
Сообщений: 94
13.12.2010, 17:55  [ТС] 6
во я лох!
спасибо огромное за подсказку насчёт 21 строки! чёт совсем глаз замылился, незаметил...

да, я сейчас наверное под один document.write(); всё и переделаю.

вот вопрос ещё, я когда юзаю:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Final//EN">
у меня этот элемент (menu_bar) становится на всю ширину страницы, хотя в свойствах чётко прописан width=800 в CSS у класса menu (этот класс имеет главный div, в котором все остальные элементы menu_bar). Почему так?
0
Артем Д.
45 / 45 / 10
Регистрация: 08.12.2010
Сообщений: 104
13.12.2010, 18:09 7
Цитата Сообщение от G-Cat Посмотреть сообщение
во я лох!
спасибо огромное за подсказку насчёт 21 строки! чёт совсем глаз замылился, незаметил...

да, я сейчас наверное под один document.write(); всё и переделаю.

вот вопрос ещё, я когда юзаю:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Final//EN">
у меня этот элемент (menu_bar) становится на всю ширину страницы, хотя в свойствах чётко прописан width=800 в CSS у класса menu (этот класс имеет главный div, в котором все остальные элементы menu_bar). Почему так?
Насчет "под один document.write(); всё и переделаю." - нельзя document.write(); разбивать на несколько строк. Один document.write(); - одна строка. Иначе не будет работать, на сколько я помню.
А на счет ширины страницы - надо смотреть саму страницу, есть ссылка?
0
G-Cat
16 / 16 / 1
Регистрация: 15.03.2009
Сообщений: 94
13.12.2010, 18:23  [ТС] 8
да, вот:
http://dl.dropbox.com/u/10635403/web-design/index.html
0
Crudelis
Шаровик затейник
683 / 432 / 78
Регистрация: 06.05.2010
Сообщений: 1,109
13.12.2010, 18:23 9
попробуйте юзануть это
HTML5
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
Артем Д.
45 / 45 / 10
Регистрация: 08.12.2010
Сообщений: 104
13.12.2010, 18:32 10
Цитата Сообщение от G-Cat Посмотреть сообщение
В стилях у .menu {} пропиши width: ... и будет тебе счастье =)
0
G-Cat
16 / 16 / 1
Регистрация: 15.03.2009
Сообщений: 94
13.12.2010, 19:15  [ТС] 11
2 Crudelis:
это то понятно, я не пойму почему именно при строгом html мой код не работает

2 Артем Д.:
и так стоит
0
Артем Д.
45 / 45 / 10
Регистрация: 08.12.2010
Сообщений: 104
13.12.2010, 19:21 12
Цитата Сообщение от G-Cat Посмотреть сообщение
2 Crudelis:
это то понятно, я не пойму почему именно при строгом html мой код не работает

2 Артем Д.:
и так стоит
я сейчас смотрю, нету там в .menu{width:..;}
Вот как у тебя:
CSS
1
2
3
4
5
6
7
.menu {
    background-color: #FFA500;
    color: #8B0000;
    font-family: serif;
    font-size: 90%;
    font-style: normal;
}
Где там width: ... ; ? =)
Добавь: width: 800px;
0
G-Cat
16 / 16 / 1
Регистрация: 15.03.2009
Сообщений: 94
13.12.2010, 19:46  [ТС] 13
2 Артем Д.:
вот класс menu:

CSS
1
2
3
4
5
6
7
8
.menu {
  width: 800;
  background-color: #FFA500;
    color: #8B0000;
    font-style: normal;
    font-family: serif;
    font-size: 90%;
}
всё там стоит, это единственный такой класс и я ничего не добавлял...
Артём, ты через что просматриваешь код?
0
Артем Д.
45 / 45 / 10
Регистрация: 08.12.2010
Сообщений: 104
13.12.2010, 19:49 14
Цитата Сообщение от G-Cat Посмотреть сообщение
2 Артем Д.:
вот класс menu:

CSS
1
2
3
4
5
6
7
8
.menu {
  width: 800;
  background-color: #FFA500;
    color: #8B0000;
    font-style: normal;
    font-family: serif;
    font-size: 90%;
}
всё там стоит, это единственный такой класс и я ничего не добавлял...
Артём, ты через что просматриваешь код?
Эх.. измени width: 800; на width: 800px; и всетаки будет тебе счастье. =)
1
G-Cat
16 / 16 / 1
Регистрация: 15.03.2009
Сообщений: 94
13.12.2010, 20:06  [ТС] 15
Спасибо Артём, я уж даже сам заметил)

Добавлено через 7 минут
У меня ещё вопрос:

Вот я ставлю опять строгий html и выдвигающийся список подменю неплотно подходит к menu_bar. Как можно это исправить?
0
Артем Д.
45 / 45 / 10
Регистрация: 08.12.2010
Сообщений: 104
13.12.2010, 20:35 16
Цитата Сообщение от G-Cat Посмотреть сообщение
Спасибо Артём, я уж даже сам заметил)

Добавлено через 7 минут
У меня ещё вопрос:

Вот я ставлю опять строгий html и выдвигающийся список подменю неплотно подходит к menu_bar. Как можно это исправить?
div.list_items {
...
top: 21px; - измени на это
...
}
1
G-Cat
16 / 16 / 1
Регистрация: 15.03.2009
Сообщений: 94
13.12.2010, 20:44  [ТС] 17
Ещё раз спасибо огромное, Артём!
Выручил прям, благодарю.
0
Артем Д.
45 / 45 / 10
Регистрация: 08.12.2010
Сообщений: 104
13.12.2010, 20:53 18
Цитата Сообщение от G-Cat Посмотреть сообщение
Ещё раз спасибо огромное, Артём!
Выручил прям, благодарю.
Ага, обращайся еще, если что =)
0
13.12.2010, 20:53
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.12.2010, 20:53

JavaScript!? Работа со строками, вставка подстроки в строку, prototype!?
функция по идее должна вставлять подстроку в строку напр в. каждый 5-ый элемент...

Выполнение Javascript файла в котором присутствуют javascript теги
text1.js &lt;link...

Плавающее меню на JavaScript
Ребята, мне необходимо сделать плавающее меню для сайта (курсача), пробовал...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
18
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru