7 декабря 2010 в 20:03
Здравствуйте!
Только вы мне можете помочь!
Уже сутки почти не вылажу отсюда, весь форум перерыл, посему прошу вас объяснить на Человечьем языке, а не ссылками типа "Читай здесь"((
Итак по порядку...
1. Уже заново переустановил Друпал, установил jquery_ui-6.x-1.4.tar.gz и jquery.ui-1.6.zip
2. jquery_ui-6.x-1.4.tar.gz установил в папку home/mant/public_html/syte.my/sites/all/modules/jquery_ui
3. jquery.ui-1.6.zip установил в папку home/mant/public_html/syte.my/sites/all/modules/jquery_ui/jquery.ui
4. Создать материал=>Страница
5. Формат ввода: PHP code
6. В ноду, в содержимое ввожу:
drupal_add_js (
'$(document).ready(function(){$("#accordion").accordion({ event: "mouseover" });}); ',
'inline');
drupal_add_js('modules/jquery_ui/jquery.ui/ui/ui.accordion.js');
drupal_add_js('modules/jquery_ui/jquery.ui/ui/ui.core.js');
?>
<div id="accordion">
<h3><a href="#">Accordion Header 1</a></h3>
<div>
Accordion Content 1
</div>
<h3><a href="#">Accordion Header 2</a></h3>
<div>
Accordion Content 2
</div>
<h3><a href="#">Accordion Header 3</a></h3>
<div>
Accordion Content 3
</div>
</div>
Как я понимаю, нужно внести какието изменения в page.tpl.php или в node.tpl.php
Что я не правильно делаю? Объясните пожалуйста.
Комментарии
по моему не отработало drupal_add_js
посмотрите сорц прогружаемой страницы, и убедитесь что подгружаемые библиотеки подгрузились нормально
ели есть сомнения что не работает сам скрипт - пропишине в page.tpl.php подключение либ + определение области действия.
а не проще было бы создать сск поле и настроить аккордеон под него?
такого стиля нужно избегать. имхо
пути надо указывать с sites
Да, нет просто на примере этого аккордиона, я хочу разобраться как именно работает JQuery, в дальнейшем хочу научиться подсоединять другие элементы к нему.
Исправил, все равно не работает пока.
Скрипты точно подвязались?
Лучше пропишите скрипты через html/page.tpl или через info-файл темы
прочитать readme.txt и подключить jQuery_update
не надо подключать
jquery_ui_add(array('ui.accordion'));
?>
<script type="text/javascript">
$(function() {
$("#accord").accordion();
});
</script>
p.s. пользуйтесь firebug
jquery_ui_add(array('ui.accordion'));
?>
<script type="text/javascript">
$(function() {
$("#accord").accordion();
});
</script>
А вот этот вот кусок откуда взять?
что именно?
подключение нужного плагина
использование этого плагина
В общем, что я сделал:
Вставил строки из /jquery.ui/demos/real-world/accordion-drawers/index.html В файл моей темы page.tpl.php
<!--
/*************************************/
/* Blueprint: reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* Remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/*************************************/
/* Demo Styles */
.capt,
.capb {
background: url(/sites/all/modules/jquery_ui/jquery.ui/demos/real-world/accordion-drawers/images/caps.gif) no-repeat;
height:4px;
width:100%;
/*position:absolute;*/
z-index:100;
margin:0px;
padding:0px;
}
.capt {
position:absolute;
background-position:0 -4px;
}
.capb {
margin-top:-19px;
}
#content {
float:left;
}
.drawers-wrapper {
position: relative;
width: 188px;
float:left;
margin:10px;
}
.drawers {
margin-bottom:15px;
color:#76797C;
font-size:11px;
line-height: 18px;
}
.drawer {
background:transparent url(/sites/all/modules/jquery_ui/jquery.ui/demos/real-world/accordion-drawers/images/sideboxlight_bg.gif) repeat-y scroll 0pt;
color:#76797C;
font-size:11px;
line-height:1.3em;
height: 1%; /* for IE6 & 7 */
}
.drawer-handle {
background:#939393 url(/sites/all/modules/jquery_ui/jquery.ui/demos/real-world/accordion-drawers/images/slider_handlebg.png) no-repeat scroll 0pt;
color:#333333;
cursor:default;
height:25px;
line-height:25px;
text-indent:15px;
font-size:12px;
width:100%;
}
.drawer-handle.open {
background-color:#72839D;
background-position:-188px 0pt;
color:#FFFFFF;
}
/* nasty, but it fixes the indent on the first one. */
h2.drawer-handle span {
}
.drawer ul {
padding: 0 12px;
padding-bottom:0pt;
}
/* for IE6 - to override the colour set by .drawer-handle.open (IE6 cannot handle class concatinations) */
* html .drawer ul {
background-color: #FFFFFF;
margin: 0 1px;
}
.drawer li {
border-bottom:1px solid #E5E5E5;
line-height:16px;
padding:6px 0pt;
}
.drawer-content ul {
padding-top: 7px;
}
.drawer-content li a {
display:block;
overflow:hidden;
}
.alldownloads li {
border:0pt none;
line-height:18px;
padding:0pt;
}
.drawers a {
color:#666666;
text-decoration:none;
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}
-->
</style>
и
<script type="text/javascript" src="/sites/all/modules/jquery_ui/jquery.ui/ui/ui.core.js"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_ui/jquery.ui/ui/ui.accordion.js"></script>
<script type="text/javascript" src="/sites/all/modules/jquery_ui/jquery.ui/ui/effects.core.js"></script>
<script type="text/javascript">
<!--
$(function () {
$('ul.drawers').accordion({
header: 'h2.drawer-handle',
selectedClass: 'open',
//animated: 'easeOutBounce',
//animated: 'bounceslide',
//animated: 'easeslide',
animated: function(options) {
return options.down ? "easeOutBounce" : "easeInOutCubic";
},
//duration: 500,
duration: function(options) {
return options.down ? 700 : 400;
},
event: 'mouseover'
});
});
//-->
</script>
Потом зашел в меню, создал там блок и вставил туда:
<div class="capt"></div>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">
<span>Downloads</span>
</h2>
<ul class="alldownloads">
<li id="sn-downloadsmacosx"><a href="/downloads/macosx/">All Categories</a></li>
<li id="sn-aperture"><a href="/downloads/macosx/aperture/">Aperture</a></li>
<li id="sn-apple"><a href="/downloads/macosx/apple/">Apple</a></li>
<li id="sn-audio"><a href="/downloads/macosx/audio/">Audio</a></li>
<li id="sn-automator"><a href="/downloads/macosx/automator/">Automator Actions</a></li>
<li id="sn-businessfinance"><a href="/downloads/macosx/business_finance/">Business & Finance</a></li>
<li id="sn-calendars"><a href="/downloads/macosx/calendars/">Calendars</a></li>
<li id="sn-developmenttools"><a href="/downloads/macosx/development_tools/">Development Tools</a></li>
<li id="sn-drivers"><a href="/downloads/macosx/drivers/">Drivers</a></li>
<li id="sn-emailchat"><a href="/downloads/macosx/email_chat/">Email & Chat</a></li>
<li id="sn-finalcutstudio"><a href="/downloads/macosx/finalcutstudio/">Final Cut Studio</a></li>
<li id="sn-games"><a href="/downloads/macosx/games/">Games</a></li>
<li id="sn-homelearning"><a href="/downloads/macosx/home_learning/">Home & Learning</a></li>
<li id="sn-iconsscreensavers"><a href="/downloads/macosx/icons_screensavers/">Icons, Screensavers, etc.</a></li>
<li id="sn-imaging3d"><a href="/downloads/macosx/imaging_3d/">Imaging & 3D</a></li>
<li id="sn-internetutilities"><a href="/downloads/macosx/internet_utilities/">Internet Utilities</a></li>
<li id="sn-ipoditunes"><a href="/downloads/macosx/ipod_itunes/">iPod + iTunes</a></li>
<li id="sn-mathscience"><a href="/downloads/macosx/math_science/">Math & Science</a></li>
<li id="sn-networkingsecurity"><a href="/downloads/macosx/networking_security/">Networking & Security</a></li>
<li id="sn-productivitytools"><a href="/downloads/macosx/productivity_tools/">Productivity Tools</a></li>
<li id="sn-spotlight"><a href="/downloads/macosx/spotlight/">Spotlight Plugins</a></li>
<li id="sn-systemdiskutilities"><a href="/downloads/macosx/system_disk_utilities/">System/Disk Utilities</a></li>
<li id="sn-unixopensource"><a href="/downloads/macosx/unix_open_source/">UNIX & Open Source</a></li>
<li id="sn-video"><a href="/downloads/macosx/video/">Video</a></li>
<li id="sn-dashboard"><a href="/downloads/dashboard/" class="bottom">Widgets</a></li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Top Downloads</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
<li><a title="MacPool" href="/downloads/macosx/games/simulation_and_sports/macpool.html">4. MacPool Realistic and easy to play computer simu…</a></li>
<li><a title="Guitar Hero III: Legends of Rock" href="/downloads/macosx/games/demos_updates/guitarheroiiilegendsofrock.html">5. Guitar Hero III: L…</a></li>
<li><a title="Messenger for Mac" href="/downloads/macosx/email_chat/messengerformac.html">6. Messenger for Mac</a></li>
<li><a title="Google Earth" href="/downloads/macosx/home_learning/googleearth.html">7. Google Earth</a></li>
<li><a title="Monopoly" href="/downloads/macosx/games/cards_puzzle/monopoly.html">8. Monopoly</a></li>
<li><a title="Litho System Icons" href="/downloads/macosx/icons_screensavers/lithosystemicons.html">9. Litho System Icons</a></li>
<li><a title="Battlefield 2142" href="/downloads/macosx/games/demos_updates/battlefield2142.html">10. Battlefield 2142</a></li>
<li><a title="More iChat Effects" href="/downloads/macosx/email_chat/moreichateffects.html">11. More iChat Effects</a></li>
<li><a title="Dragster" href="/downloads/macosx/internet_utilities/dragster.html">12. Dragster</a></li>
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
</ul>
</li>
<li class="drawer last">
<h2 class="drawer-handle">Top Apple Downloads</h2>
<ul>
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
<li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
<li><a title="Mac OS X 10.5.1 Update" href="/downloads/macosx/apple/macosx_updates/macosx1051update.html">4. Mac OS X 10.5.1 Up…</a></li>
<li><a title="Java for Mac OS X 10.4 Release 5" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release5.html">5. Java for Mac OS X …</a></li>
<li><a title="iPod Reset Utility 1.0.2 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodresetutility102forwindows.html">6. iPod Reset Utility…</a></li>
<li><a title="iPhoto 7.1.1" href="/downloads/macosx/apple/application_updates/iphoto711.html">7. iPhoto 7.1.1</a></li>
<li><a title="Bonjour for Windows" href="/downloads/macosx/apple/windows/bonjourforwindows.html">8. Bonjour for Windows</a></li>
<li><a title="Mac OS X 10.4.11 Combo Update (PPC)" href="/downloads/macosx/apple/macosx_updates/macosx10411comboupdateppc.html">9. Mac OS X 10.4.11 C…<br/>The 10.4.11 Update is recommended for al…</a></li>
<li><a title="Java for Mac OS X 10.4, Release 6" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release6.html">10. Java for Mac OS X …</a></li>
<li><a title="GarageBand 4.1.1" href="/downloads/macosx/apple/application_updates/garageband411.html">11. GarageBand 4.1.1</a></li>
<li><a title="iPod Updater 2006-06-28 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodupdater20060628forwindows.html">12. iPod Updater 2006-…</a></li>
<li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20…</a></li>
<li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20…</a></li>
</ul>
</li>
</ul>
<div class="capb"></div>
</div>
Блок выводится, но есть одно но:
На прикрепленном изображении я отметил, над каждым подпунктом(циферкой) меню появляется кружок
я выводил через div, не было его
предположу что list-style-type: ;
Имеете в виду
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: type;
}
Чет не помогло....
Все равно не помогло(((
Уже даже целиком выризал...
list-style: none;
}
Все равно весит этот кругляшок
firebug и смотри какие стили перекрывают твои
или подпиши к стилям !important
firebug пишет
ol, ul {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
Попробуйте так:
ul li {list-style: none;}ul, ul li {list-style: none !important}
так в любом браузере убъёт
Все равно таже картина....
Кажется что я что то ни так делаю...
Вот этот код я вставяю в page.tpl.php
<!--
/*************************************/
/* Blueprint: reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* Remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/*************************************/
/* Demo Styles */
.capt,
.capb {
background: url(/sites/all/modules/jquery_ui/jquery.ui/demos/real-world/accordion-drawers/images/caps.gif) no-repeat;
height:4px;
width:100%;
/*position:absolute;*/
z-index:100;
margin:0px;
padding:0px;
}
.capt {
position:absolute;
background-position:0 -4px;
}
.capb {
margin-top:-19px;
}
#content {
float:left;
}
.drawers-wrapper {
position: relative;
width: 188px;
float:left;
margin:10px;
}
.drawers {
margin-bottom:15px;
color:#76797C;
font-size:11px;
line-height: 18px;
}
.drawer {
background:transparent url(/sites/all/modules/jquery_ui/jquery.ui/demos/real-world/accordion-drawers/images/sideboxlight_bg.gif) repeat-y scroll 0pt;
color:#76797C;
font-size:11px;
line-height:1.3em;
height: 1%; /* for IE6 & 7 */
}
.drawer-handle {
background:#939393 url(/sites/all/modules/jquery_ui/jquery.ui/demos/real-world/accordion-drawers/images/slider_handlebg.png) no-repeat scroll 0pt;
color:#333333;
cursor:default;
height:25px;
line-height:25px;
text-indent:15px;
font-size:12px;
width:100%;
}
.drawer-handle.open {
background-color:#72839D;
background-position:-188px 0pt;
color:#FFFFFF;
}
/* nasty, but it fixes the indent on the first one. */
h2.drawer-handle span {
}
.drawer ul {
padding: 0 12px;
padding-bottom:0pt;
}
/* for IE6 - to override the colour set by .drawer-handle.open (IE6 cannot handle class concatinations) */
* html .drawer ul {
background-color: #FFFFFF;
margin: 0 1px;
}
.drawer li {
border-bottom:1px solid #E5E5E5;
line-height:16px;
padding:6px 0pt;
}
.drawer-content ul {
padding-top: 7px;
}
.drawer-content li a {
display:block;
overflow:hidden;
}
.alldownloads li {
border:0pt none;
line-height:18px;
padding:0pt;
}
.drawers a {
color:#666666;
text-decoration:none;
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}
-->
</style>
а сайт в сети? посмотреть бы
list-style-image кстати в стилях есть?
что за картинки?
Если я правильно понял, этот параметр есть в style.css моей темы?!
Это картинки оформления карусельки
в style.css прописано
ul li, ul.menu li, .item-list ul li, li.leaf {
padding: 0 0 .2em 1.5em;
list-style-type: none;
list-style-image: none;
background: transparent url(images/menu-leaf.gif) no-repeat 1px .35em; /* LTR */
}
локальный((
вам не кажется что вы взяли не слишком удачный пример для изучения?
используйте
очень простая конструкция, тренируйтесь на ней
Пытаюсь вот это вставать, в страницу, всеравно не работает:
jquery_ui_add(array('ui.accordion'));
?>
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
все элементы развернуты?
что firebug говорит?
background: transparent url(images/menu-leaf.gif) no-repeat 1px .35em; /* LTR */
menu-leaf.gif - это как раз буллет для списка, поставь background:none