PDA

Zobacz pełną wersję : kody wywołujące z joomli



moje
30-10-2008, 18:35
Witam, nie wiem czy dobrze zamieszczam, ale poszukuje kodów wywołujących menu joomli - mam rozsuwane menu i chciałem je wykorzystać jako moduł, żebym nie musiał wpisywać zmian ręcznie.
Przy zrobieniu z tego modułu miałaby mi ktoś pomóc, a przynajmniej sprawdzić, po jego wykonaniu.
Moduł byłby potem dostępny za free.

zwiastun
30-10-2008, 19:38
Jeśli znasz angielski - na joomla.org jest tutorial nt. szablonow w 1.5 a tam rozdział o tym, jak do menu w Joomla! można wykorzystać dowolne menu CSS

moje
30-10-2008, 19:45
Tylko, że to moje menu jest oparte na listach definicyjnych i jest wspomagane JS'em.

zwiastun
30-10-2008, 21:10
Nie wiem, co to są listy definicyjne - DL DT DD ???? - jeśli tak to co? (pominąwszy wybór rodzaju listy). Zajrzał?

Poniżej robocze tłumaczenie :

Menu w szablonie
W rozdziale 5, „Tworzenie menu i nawigacji” widzieliśmy, że podczas dodawania modułu menu można określić kilka ustawień, w tym wybrać jeden z kilku stylów – właściwy dla Joomla 1.5 – lista oraz w trybie zgodności z Joomla 1.0: pionowo w tabeli, poziomo w tabeli, poziomo lub pionowo.

Podobnie, korzystając z CSS raczej niż z tabel rezultatem jest zredukowany kod i łatwiejsze oznaczanie. Jeśli dla wszystkich menu ustawimy styl lista, będziemy mieć jedynie 12 tabel (później zobaczymy, jak usunąć pozostałe, korzystając z podmiany szablonów). Pamiętaj, styl Lista jest nowym stylem w Joomla 1.5, podobny do niego w Joomla 1.0 Lista – poziomo lub pionowo – w 1.5 działa tylko w trybie zgodności (oba zdeprecjonowane).



Listy są lepszym rozwiązaniem niż tabele, ponieważ zarówno w przypadku przeglądarek tekstowych, jak i czytników ekranu, urządzeń nieobsługujących CSS oraz botów przeszukujących i indeksujących Internet, dostęp do treści jest łatwiejszy i szybszy.
Inną zaletą stosowania CSS dla menu jest duża ilość dostępnego na witrynach projektantów kodu, który można wykorzystać.

Na stronach http://css.maxdesign.com.au/ znajdziesz 30 menu, wszystkie używające tego samego podstawowego kodu. Nazwane są Listamatic. Istnieje pewna różnica w kodzie, tak że musimy nieco zmienić, żeby dostosować to menu do Joomla.
Listy używają następującego kodu:


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href=" #" id="current">Item one</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Item two</a></li>
<li><a xhref="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Item three</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Item four</a></li>
<li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Item five</a></li>
</ul>
</div>

Menu objęte jest elementem <div> nazwanym navcontainer i utworzone jest z listy z identyfikatorem navlist. Aby osiągnąć ten efekt w Joomla, możemy skorzystać z przyrostków stylu modułów. Jak pamiętasz zapewne, ramka typu XHTML daje nam w rezultacie następujący kod wynikowy:


<div class="moduletable">
<h3>modChrome_xhtml</h3>
modChrome_xhtml
</div>

Jeśli dodamy przyrostek klasy, otrzymamy:


<div class="moduletablesuffix">
<h3>modChrome_xhtml</h3>
modChrome_xhtml
</div>

Tym sposobem, jeśli skorzystamy z menu Listmatic, wystarczy że zastąpimy klasę navcontainer klasą moduletablesuffix.
UWAGA
Przyrostki klasy CSS w modułach w pewnym zakresie zacierają podział między projektowaniem witryny a administrowaniem. Jednym z celów rozwoju Joomla! jest wyraźnie rozdzielić te role. Prawdopodobne jest więc, że w następnych wersjach przyrostki klas zostaną zaniechane.
Zastosowanie przyrostka klasy jest użyteczne (przydatne, wygodne). Umożliwia np. uzyskiwanie różnych wariantów kolorystycznych tylko prostą zmianą przyrostka klasy modułu.
Minimum do zapamiętania
Najlepiej zawsze stosować styl listy niepunktowanej albo lista – pionowo lub poziomo jako kod wyjściowy menu. Można wówczas skorzystać z wielu zasobów CSS dostępnych w Sieci.
Dla naszej witryny użyjemy projektu List 10 opracowanego przez Marka Newhouse. Oto nasz CSS:


.moduletablemenu {
color:#333;
margin-bottom:1em;
padding:0;
}
.moduletablemenu h3 {
background:#666;
color:#fff;
text-align:center;
font-size:1.1em;
border-bottom:1px solid #fff;
margin:0;
padding:0.25em 0;
}
.moduletablemenu ul {
list-style:none;
margin:0;
padding:0;
}
.moduletablemenu li {
border-bottom:1px solid #ccc;
margin:0;
}
.moduletablemenu li a {
display:block;
border-left:10px solid #333;
border-right:10px solid #9D9D9D;
background-color:#666;
color:#fff;
text-decoration:none;
padding:3px 5px 3px 0.5em;
}
html>body .moduletablemenu li a {
width:auto;
}
.moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited {
border-left:10px solid #1c64d1;
border-right:10px solid #5ba3e0;
background-color:#2586d7;
color:#fff;
}

W parametrach modułu wyświetlającego menu musimy dodać przyrostek modułu: menu (bez znaku podkreślenia czy myślnika w tym przypadku) do modułów menu, w których chcemy zastosować opracowany sposób prezentacji menu. Wynik zaprezentowany jest na ilustracji 9.7
[2008-10-26 21:12:16] Stefan Wajda napisał(a): Do każdego modułu menu, które chcemy wyświetlać w ten sposób, musimy dodać przyrostek klasy modułu menu: .


WSKAZÓWKA
Gdy tworzysz konkretne menu, skorzystaj z przydatnej wskazówki: stwórz domyślną instalację Joomla!, podejrzyj źródło, odszukaj kod generowany przez główne menu (mainmenu), skopiuj go i wklej do edytora HTML (jak Dreamweaver). Następnie zastąp wszystkie odnośniki (adresy) kzyżykiem # (hasz), a następnie dodawaj reguły CSS, aż osiągniesz oczekiwany efekt. Kod pozwalający wystylizować menu jest poniżej:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!-- .astyle { } -->
</style>
</head>
<body>
<div class="moduletable">
<h3>Menu witryny</h3>
<ul class="mainmenu">
<li id="current" class="item1 active"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Home</a></li>
<li class="item2"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Joomla! Overview</a></li>
<li class="item3"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">What's New in 1.5?</a></li>
<li class="item4"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Joomla! License</a></li>
<li class="item5"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">More about Joomla!</a></li>
<li class="item6"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">FAQ</a></li>
<li class="item7"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">The News</a></li>
<li class="item8"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Web Links</a></li>
<li class="item9"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">News Feeds</a></li>
</ul>
</div>
</body>
</html>

CSS został włączony do dokumentu, aby uprościć edycję kodu.