Psicomante Blog

<em>Howto|Tutorial: Floating Blocks in Drupal con jquery</em>

Ho avuto un'idea ieri sera, far svolazzare in mezzo alla pagina dei blocchi caricati dinamicamente, all'interno di una qualsiasi installazione di Drupal. E così ho fatto :)
Nulla di così difficile, o per soli esperti. L'operazione è banale, e anche piuttosto incompleta.

Eccovi l'anteprima:

<a href="/files/images/float_block.jpg" class="thickbox" rel="gallery-plants"><img src="/files/images/float_block.preview.jpg" title="Floating blocks in Drupal" alt="Floating blocks in Drupal" /></a>

<strong>Requisiti:</strong>
<ol><li>Drupal,e un tema in PHPTemplate (ovvio)</li>
<li>La libreria <a href="http://www.consulenza-web.com/jquery_plugins/xwin.html">xWin per jQuery</a></li>
<li>10 minuti di tempo</li>
</ol>

Inserire nel tema le due librerie fondamentali, più il CSS, nella cartella xwin. Creare nel template una sezione chiamata, ad esempio, "floating", ed inserire nel page.tpl.php il riferimento alla sezione più una "id".

Ecco il codice:

Aggiungere gli script e il css nell'head.
<code>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/xwin/jQueryxWin.js"></script>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/xwin/jquery.xwin.js"></script>
<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/xwin/script.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="<?php print base_path() . path_to_theme() ?>/xwin/xwin.css" />
</code>

Codice dello script da inserire nella pagina, io l'ho inserito in script.js
<code>
$(document).ready(function() {
$("#floating1").xWin({
show: "si",
top: 20,
left: 50,
width: 200
});
$("#floating2").xWin({
show: "si",
top: 20,
left: 500,
width: 200
});
});
</code>

Le due sezioni nel page.tpl.php

<code>
<div class="xWin" id="floating1"><?php print $floating1 ?></div>
<div class="xWin" id="floating2"><?php print $floating2 ?></div>
</code>

Le sezioni nel template.php

<code>
function garland2_regions() {
return array(
'left' => t('left sidebar'),
'right' => t('right sidebar'),
'floating' => t('floating1'),
'floating2' => t('floating2')
);
}
</code>

<strong>KNOWN BUGS</strong>
E' incompatibile, con quasi tutti i moduli che interagiscono con il DOM, io ho provato JsTools e DHTML_menu

<strong>TODO</strong>
Ricordarsi la posizione, le dimensioni e non far ricaricare con effetto comparsa ogni volta i blocchi. Insomma è solo una tech demo per vedere le potenzialità di Drupal :P