29 июля 2011 в 13:49
пытаюсь прикрутить Tabs, но вместо отображения вкладок просто список появляется.
скачал, подключил
stylesheets[all][] = css/jquery-ui-1.8.14.custom.css
stylesheets[all][] = css/jquery.ui.tabs.css
scripts[] = js/ui/jquery-ui-1.8.14.custom.min.js
scripts[] = js/ui/jquery.ui.tabs.js
создаю ноду, формат full html
(function ($) {
$( "#tabs" ).tabs();
}(jQuery));
</script>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
</div>
</div>
</div>
Комментарии
А может так ?
$(function() {
$( "#tabs" ).tabs();
});
</script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
Так тоже пытался, результат тот же.
Да и 2 ui скрипта(jquery.ui.tabs.js и jquery-ui-1.8.14.custom.min.js) не надо .
Заходишь на http://jqueryui.com/download и качаешь ядро(core ) и табсы (Widgets-Tabs) и подключаешь один скрипт.
Оба скрипта могут конфликтовать.
Скачайте jQueryUI 1.7 (Legacy)
реализация закладок (вертикальных и горизонтальных) есть в core для field group материала - можно подсмотреть там.
jquery-ui-1.8.14 требует jQuery 1.3.2+!
А в Drupal 6.22 в ядре jQuery 1.2.6 !!
Дело в том, что только знакомлюсь с jQuery, поэтому хотелось бы реализовать именно на нём
Т.е. не могли бы уточнить, я так понимаю нужно оставить только общий скрипт (jquery-ui-1.8.14.custom.min.js)?
всем двойка. http://dansilvercentral.com/jquery-ui-tabs-drupal-7-tutorial
В названии темы я указал Drupal 7
нужно установить модуль jQuery Update ,чтобы обновить jquery в ядре ,а затем подключить jquery-ui-1.8.14.custom.min.js либо jquery-ui-1.7.3.custom.min.js (jquery.ui.tabs.js уже должен содержаться в них)
чем 1.8.7 не устраивает?
http://jqueryui.com/download - последний стабильный релиз 1.8.14.
и?
И надо установить версию 1.9m5 ?
зачем вообще что-то устанавливать если всё есть в ядре?
Скачал jQueryUI 1.7 (Legacy), установил jQuery Update
подключил в theme.info
stylesheets[all][] = /jquery/css/ui-lightness/jquery-ui-1.7.3.custom.css
scripts[] = /jquery/js/jquery-ui-1.7.3.custom.min.js
Результат тот же.
Я на семерку не переходил - поэтому не знаю.
Одного меня смутил Full HTML?
зачем тогда советовать?
голову ещё нужно подключить
все кроме Андеда про отсутствие $ помнят?
отсутствие где?
Дык там на нем и сделано, в core включена jquery UI в которой это реализовано.
Найди десять отличий:
$('.footer').append(Drupal.theme('powered', 'black', 135, 42));
}(jQuery));
Теперь расскажу что и как получилось, наверно, пригодится.
Скачал jQueryUI 1.7 (Legacy)
Файлы *.css (jquery-ui-1.7.3.custom.css) копируем в /misc/ui/
папку images копируем в /misc/ui/images/
Файлы *.js (jquery-ui-1.7.3.custom.min.js) копируем в mics/ui/
Создаём ноду, выбираем PHP-фильтр.
Подключаем jQuery
drupal_add_library('system', 'ui.tabs');
drupal_add_js('jQuery(document).ready(function(){jQuery("#tabs").tabs();});', 'inline');
?>
Tabs
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1"><img src="http://dansilvercentral.com/sites/default/files/Koala%20-%20Copy.jpg#ove... style="float: right;"/>
Hello World 1!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme
</div>
tabs-2"><img src="http://dansilvercentral.com/sites/default/files/Tulips%20-%20Copy.jpg#ov... style="float: right;"/><div id="
Hello World 2!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme
</div>
<div id="tabs-3"><img src="http://dansilvercentral.com/sites/default/files/Penguins%20-%20Copy.jpg#... style="float: right;"/>
Hello World 3!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tellus sem, lacinia id accumsan pellentesque, tincidunt sed elit. Nullam sodales scelerisque tincidunt. Donec at purus et ligula tristique consectetur. Sed ut arcu fermentum quam aliquet ultrices id eu felis. Vestibulum in ferme
</div>
</div>
Более подробно тут
Да простят меня за копипаст
Посвечусь
у меня тоже используется jquery из последних версий и jquery-ui на момент прикручивания последний, и как это сделать я написал здесь
Подружить последний jquery ui и drupal , без конфликтов с уже имеющимся в друпале jquery, работает и в админке и для анонимусов без патчей ядра если так можно выразится.
jquery_update при этом стоит, но для модулей которые не требует распоследних модулей jquery или jquery-ui
юзайте на здоровье тот jquery который нужно, правда тут drupal 7, но думается мне грабли похожие.
Подключаю Datepicker по аналогии как в данном примере http://dansilvercentral.com/jquery-ui-tabs-drupal-7-tutorial.
В ноде прописано:
<?phpdrupal_add_library('system', 'ui.datepicker');
drupal_add_js('jQuery(document).ready(function() {
$( "#datepicker" ).datepicker();
});');
?>
<input id="datepicker" type="date" />?>
Но календарь не выводится. Кто подключал datepicker? Как его правильно вывести.
Пробовала файлы http://jqueryui.com/download подключать в html.tpl.php, но календарь работает не всегда корректно.
date