PDA

Zobacz pełną wersję : Wysuwany moduł - Joomla 2.5 i mootools



Jdwind
24-06-2012, 16:54
Ponieważ niedawno ktoś pytał o wysuwany moduł, poniżej przedstawiam prosty sposób na implementację takiego w Joomla 2.5.

1. Zapisujemy kod mootools w pliku np. moja2.js *:

window.addEvent('domready', function(){

// First list, using CSS styles in the JavaScript
var list = $$('#moje #slider');

list.set('morph', {
duration: 200
});

list.addEvents({

mouseenter: function(){
// this refers to the element in an event
this.morph({
'margin-left': 200
});
},

mouseleave: function(){
// this refers to the element in an event
this.morph({
'margin-left': 0
});
}

});

// Morphing the list with CSS selectors
$$('#moje #slider').each(function(el){
el.set('morph', {
duration: 300
}).addEvents({
// Using Function:pass, which is a shorter alternative for
// function(){
// el.morph('.hover');
// }
mouseenter: el.morph.pass('.hover', el),
mouseleave: el.morph.pass('.default', el)
});
});

});
i umieszczamy plik w katalogu javascript naszej templatki (w moim przypadku beez5).
2. umieszczamy deklarację skryptu w kodzie pliku index.php naszej templatki:

<?php if ($this->countModules('position-17')): ?>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/moja2.js"></script>
<?php endif; ?>

3. tworzymy pozycję modułu (ważne są nazwy id div'ów):


<?php if ($this->countModules('position-17')): ?>
<div id="moje">
<div id="slider">
<jdoc:include type="modules" name="position-17" />
</div>
</div>
<?php endif; ?>
- jeżeli nie mamy pozycji 'position-17' to w pliku templateDetails w sekcji position ją dodajemy: <position>position-17</position>.

4. Dodajemy style CSS do pliku ze stylami naszej templatki:


#moje {
margin: 0 0 0 -200px;
width: 250px;
padding: 0;
position: fixed;
left: 0;
top: 50px;
}

#slider {
display: block;
margin: 0;
padding: 0px;
width: auto;
color: #888;
}

/* The styles for the second list defined in the CSS */
.hover {
margin-left: 200px
}

.default {
margin-left: 0;
}
uwaga!
możemy operować szerokością i wartością marginesu, który ma chować i wysuwać div, można to dostosować do swoich potrzeb a zmian dokonać w funkcji

this.morph({
'margin-left': 200
}); oraz w pliku CSS.

5. Na koniec wchodzimy w moduły -> nowy własny kod HTML, wybieramy pozycję position-17 a zawartość wpisujemy wg uznania, może to być tekst, obrazek...

-----
* - kod funkcji pochodzi ze strony demo mootools - http://mootools.net/demos/?demo=Fx.Morph

---------- Post dodany o 15:33 ---------- Poprzedni post był o 14:07 ----------

Obydwa opisane przypadki w działaniu można zobaczyć (przez jakiś czas będzie dostępne) TUTAJ (http://www.test2.wtzprzymops.com/). Co do wysuwanego modułu - można spróbować wsadzić w tą (tę?) pozycję jakiś inny moduł, ale to już każdy może sam spróbować dostosować pod siebie.

---------- Post dodany o 15:54 ---------- Poprzedni post był o 15:33 ----------

EDIT:
właśnie sprawdziłem (na serwerze lokalnym) z modułami logowanie i menu witryny - można spokojnie te moduły umieścić w sliderze, trzeba jedynie w stylach CSS ustawić kolor tła i szerokość (np. 250px w podanym przykładzie). Działa bez problemów.