Joomla123.lt

Trijų išsiplečiančių stulpelių šablonas

Trečiadienis, 22 Gruodis 2010 23:52 Parašė di3sel Peržiūrų: 1080

Trijų stulpelių išdėstymas, turbūt, vienas dažniausiai naudojamų svetainės išdėstymo būdų Joomla šablonuose. Šiame straipsnyje pasistengsiu paaiškinti, kaip sukurti trijų savaime išsiplečiančių stulpelių Joomla šabloną.

Jei kada nors kūrėte Joomla šabloną, tikriausiai teko susidurti su uždaviniu, kai tam tikruose puslapiuose vienas ar kitas stulpelis yra nepublikuojamas, savaime suprantama tuomet norisi, kad puslapio turinio stulpelis išsiplėstų ir užpildytų tuščią vietą. Yra daugybė būdų, kaip taip padaryti, bet asmeniškai man labiausiai patinka šis...

Žemiau pateiktame pavyzdyje pateikiu tik tą kodo dalį, kuri atvaizduoja anksčiau minėtus tris stulpelius:

1
2
3
4
5
6
7
8

...
<div id="wrapper">
	<div id="left"><jdoc:include type="modules" name="left" /></div>
	<div id="main"><jdoc:include type="component" /></div>
	<div id="right"><jdoc:include type="modules" name="right" /></div>
	<div class="clr"></div>
</div>
...

1
2
3
4
5
6
7

...
#wrapper {width: 990px; margin: 0 auto; background: #fff;}
#left {float: left; width: 200px; margin-right: 10px; background: #ccc;}
#main {width: 570px; background: #ccc;}
#right {float: right; width: 200px; background: #ccc;}
.clr {clear: both;}
...

Tokiu atveju gausite paprasta trijų stulpelių išdėstymą, kur kairysis ir dešinysis stulpelis yra 200px pločio, abu atskirti nuo viduriniojo stulpelio 10px tarpais. Vizualiai toks išdėstymas atrodytų maždaug taip:

Tačiau kas nutiks jei viename iš puslapių dešinėje pozicijoje išjungsime visus modulius? Dešinėje puslapio pusėje liks 200px tarpas, o puslapio HTML kode vistiek bus rodoma #right CSS klasė. Gausime maždaug tokį vaizdą:

Savaime suprantama, toks variantas yra nepriimtinas ir to mes negalime sau leisti. Štai kaip galime tai ištaisyti:

Papildykime index.php failo kodą taip, jog pozicijoje išjungus visus modulius nebūtų atvaizduojama jos CSS klasė. Tuomet kodas atrodys taip:

1
2
3
4
5
6
7
8
9
10
11
12

...
<div id="wrapper">
	<?php if ($this->countModules( 'left' )) : ?>
		<div id="left"><jdoc:include type="modules" name="left" /></div>	<!-- Ši kodo dalis rodoma tik tada, kai left pozicijoje publikuojames bent vienas modulis -->
	<?php endif; ?>
	<div id="main"><jdoc:include type="component" /></div>
	<?php if ($this->countModules( 'right' )) : ?>
		<div id="right"><jdoc:include type="modules" name="right" /></div> <!-- Ši kodo dalis rodoma tik tada, kai right pozicijoje publikuojames bent vienas modulis -->
	<?php endif; ?>
	<div class="clr"></div>
</div>
...

Viena problema išspręsta, tačiau pagrindinis stulpelis vis dar 570px pločio. Centrinės puslapio dalies pločiui apskaičiuoti šablono kataloge sukurkime dar vieną failą, pavadinkime jį pvz. vars.php. Žemiau pateikiu vars.php failo turinio pavyzdį:

1
2
3
4
5
6
7
8
9

<?php
	$mainWidth = 900; // Pagrindinio stulpelio plotis, kai kairėje ir dešinėje pozicijose nepublikuojami jokie moduliai
	if ($this->countModules( 'left' )):	// Jei kairėje pozicijoje publikuojamas bent vienas modulis...
		$mainWidth = $mainWidth - 200 - 10; // Iš pagrindinio stulpelio pločio atimame kairiojo stulpelio ir tarpo plotį.
	endif;
	if ($this->countModules( 'right' )):	// Tą patį darome, jei dešinėje pozicijoje publikuojamas bent vienas modulis
		$mainWidth = $mainWidth - 200 - 10;
	endif;
?>

Jau beveik baigėme, telieka atlikti kelis pakeitimus:

Šablono index.php failo viršuje nurodome, kad kraunant šabloną būtų įtraukiamas ir vars.php failas:

1
2
3
4
5

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );  //Standartinė index.php failo pradžia
include_once (dirname(__FILE__).DS.'/vars.php');	//Ši eilutė nurodo kraunant šabloną paleisti vars.php failą
...
?>

Taip pat tame pačiame index.php faile reikia pakoreguoti #main css klasę, taip, kad stulpelio plotis būtų kaip vars.php faile.
Tam šią eilutę:

1

<div id="main"><jdoc:include type="component" /></div>

pakeičiame į:

1

<div id="main" style="width=px"><jdoc:include type="component" /></div>

Kaip jau turbūt supratote, stulpelio plotį nurodome tiesiogiai index.php faile, todėl CSS faile jo bereikia. Pašaliname klasės #main plotį faile layout.css:

1
2
3
4
5
6
7

..
#wrapper {width: 990px; margin: 0 auto; background: #fff;}
#left {float: left; width: 200px; margin-right: 10px; background: #ccc;}
#main {background: #ccc;}
#right {float: right; width: 200px; background: #ccc;}
.clr {clear: both;}
..

Štai ir viskas. Dabar pagrindinis puslapio stulpelis automatiškai užpildys tuštumą.

Šiame straipsnyje pateikiama tik pati įdėja ir pavyzdys kaip ją įgyvendinti į pagalbą pasitelkiant šiek tiek PHP kodo. Visa kita - Jūsų vaizduotės reikalas :)

Sėkmes eksperimentuojant, kaip visada laukiu papildymų, pataisymų ir pastabų komentaruose.