1 мая 2011 в 17:28
Добрый вечер, уважаемые пользователи Drupal.ru! Хочу задать вопрос касательно встраивания JQuery на свой сайт, а точнее попросить помощи с исправлением ошибок.
Прочитал данный пост и решил использовать JQuery для создания своего меню. Автор дал ссылку на страницу с примерами (я использую пример №4).
Я создал блок и вставил код (в режиме PHP):
<?php
drupal_add_js('sites/all/themes/photofolio/jquery-1.4.2.min.js', 'file');
drupal_add_js('sites/all/themes/photofolio/menu.js', 'file');
?><div class="vertical-menu"><ul class="menu collapsible">
<li class="expand">
<a href="#" class="">Weblog Tools</a>
<ul class="acitem" style="display: none;">
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li>
<a href="#" class="active">Programming Languages</a>
<ul class="acitem" style="display: block;">
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li><a href="http://www.i-marco.nl/weblog/">Marco's blog (no submenu)</a></li>
<li>
<a href="#">Cool Stuff</a>
<ul class="acitem" style="display: none;">
<li><a href="http://bookalicio.us/">Bookalicious</a></li>
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>
<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li>
<a href="#">Search Engines</a>
<ul class="acitem" style="display: none;">
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul></div>?>Добавил все записи в CSS:
.vertical-menu ul.menu, .vertical-menu ul.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
.vertical-menu ul.menu li {
margin-top: 1px;
}
.vertical-menu ul.menu li a, .vertical-menu ul.menu ul.menu li a {
background: none repeat scroll 0 0 #333333;
color: #FFFFFF;
padding: 0.5em;
}
.vertical-menu ul.menu a {
display: block;
text-decoration: none;
}
.vertical-menu ul.menu li {
margin-top: 1px;
}
.vertical-menu ul.menu li ul li a, .vertical-menu ul.menu ul.menu li ul li a {
background: none repeat scroll 0 0 #CCCCCC;
color: #000000;
padding-left: 20px;
}
.vertical-menu ul.menu li a{
width: auto !important;
}
vertical-menu ul.menu, vertical-menu ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
}
vertical-menu ul.menu a {
display: block;
text-decoration: none;
}
vertical-menu ul.menu li {
margin-top: 1px;
}
vertical-menu ul.menu li a, vertical-menu ul.menu ul.menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}
vertical-menu ul.menu li a:hover, vertical-menu ul.menu ul.menu li a:hover {
background: #000;
}
vertical-menu ul.menu li ul li a, vertical-menu ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
vertical-menu ul.menu li ul li a:hover, vertical-menu ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
vertical-menu ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
vertical-menu ul.menu ul.menu {
border-left: 5px #f00 solid;
}
vertical-menu ul.menu a.active, vertical-menu ul.menu ul.menu li a.active, vertical-menu ul.menu a.active:hover, vertical-menu ul.menu ul.menu li a.active:hover {
text-decoration: underline;
background: #c00;
}
vertical-menu div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
vertical-menu ul.menu div.panel a, vertical-menu ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
vertical-menu ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }
.indent6 { padding-left: 6em; }
.indent7 { padding-left: 7em; }
.indent8 { padding-left: 8em; }
.indent9 { padding-left: 9em; }
.indent10 { padding-left: 10em; }
/*the end of vertical menu*/
Ничего не выходит. Уже чистил кэш. Firebug указывает следующую ошибку:
http://www.imagepost.ru/images/z/yd/zydpczzjdpwrisgilvfwhsemcyajln.PNG
Адрес сайта: _http://tourcap.ru
С PHP и JQuery ещё не работал, объясните, пожалуйста, попонятнее.
Комментарии
Тогда рекомендую поискать к.-либо готовый модуль меню типа "аккардеон":
http://drupal.org/project/accordion_menu
Спасибо, что отозвались!
Да, но мне нужен именно этот скрипт. Он работает именно так, как нужно мне. К тому же предложенный модуль не совместим с Drupal 7...
Прикрепил JQuery к самому стилю. Ошибка в Firebug исчезла. Но скрипт по-прежнему не хочет работать.
В таком случае вам надо действовать так:
1. создать в друпале меню
2. Меню выводить блоком в нужном регионе
3. Для этого меню и этого блока сделать шаблон вывода, в котором происать нужную структуру тегов
4. К этому хозяйству подвязать css- и js-файлы.
И потом, зачем вы ципляете jquery-1.4.2.min.js ? Когда в друпале уже и так есть jQuery, который автоматом ципляется при каждо вызове drupal_add_js. Т.о. достаточно выполнить:
<?php
drupal_add_js('sites/all/themes/photofolio/menu.js', 'file');
?>
и будет подцеплен не только menu.js, но и jQuery. Из-за этого, кстати, может и не работает, т.к. один файл jQuery перекрывает другой.
Первый и второй пункты понятны, но вот третий и четвёртый...
А каким образом? Ммм...может об этом где-то написано...Я думал, что если при создании нового собственного блока поставить режим PHP-code и вставить туда HTML + PHP, который будет вызывать нужный мне скрипт. то есть так:
<?phpdrupal_add_js('sites/all/themes/photofolio/menu.js', 'file');
?><div class="vertical-menu"><ul class="menu collapsible">
<li class="expand">
<a href="#" class="">Weblog Tools</a>
<ul class="acitem" style="display: none;">
<li><a href="#">PivotX</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">Textpattern</a></li>
<li><a href="#">Typo</a></li>
</ul>
</li>
<li>
<a href="#" class="active">Programming Languages</a>
<ul class="acitem" style="display: block;">
<li><a href="#">PHP</a></li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">PERL</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">C#</a></li>
</ul>
</li>
<li><a href="http://www.i-marco.nl/weblog/">Marco's blog (no submenu)</a></li>
<li>
<a href="#">Cool Stuff</a>
<ul class="acitem" style="display: none;">
<li><a href="#">Bookalicious</a></li>
<li><a href="#">Apple</a></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">XBOX360</a></li>
<li><a href="#">Nintendo</a></li>
</ul>
</li>
<li>
<a href="#">Search Engines</a>
<ul class="acitem" style="display: none;">
<li><a href="#">Yahoo!</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">Ask.com</a></li>
<li><a href="#">Live Search</a></li>
</ul>
</li>
</ul></div>?>
Далее я прописываю нужный мне стиль в CSS-файлах и всё тип-топ.
Скрипт уже виден через Firebug в , но толку? Я не понимаю сам алгоритм вызыва какой-либо функции для дальнейшего её выполнения...
Я понимаю, что у вас совершенно нет времени и желания возиться с моими проблемами, но, возможно, у вас найдётся для меня ссылка.
В седьмом Друпале нужно использовать не $(), a jQuery()
Спасибо, но не помогает. Все $ заменил на jQuery в скрипте. Может я что-то не так или криво делаю?
не знал, что есть такой модуль. написал за час своих 2 модуля для гор. и верт. меню, которые прикручены к меню друпала и темизируются css. ссылку на пример могу в личку скинуть, правда для 6-ки
Так для семёрки нужно
Зачем мне модуль для шестёрки.
ну там только menu_tree_output переделан, несложно думаю и для 7-ки приспособить
я просто иконки еще хочу прилепить, почти доделал, ну и настроек там побольше? вроде
а если вам меню не надо управлять, а просто руками вставить, то можете оттуда взЯть - http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu... он для вордпресса правда