Howto|Tutorial: Floating Blocks in Drupal con jquery
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:
Requisiti:
- Drupal,e un tema in PHPTemplate (ovvio)
- La libreria xWin per jQuery
- 10 minuti di tempo
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.
<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" />
Codice dello script da inserire nella pagina, io l'ho inserito in script.js
$(document).ready(function() {
$("#floating1").xWin({
show: "si",
top: 20,
left: 50,
width: 200
});
$("#floating2").xWin({
show: "si",
top: 20,
left: 500,
width: 200
});
});
Le due sezioni nel page.tpl.php
<div class="xWin" id="floating1"><?php print $floating1 ?></div>
<div class="xWin" id="floating2"><?php print $floating2 ?></div>
Le sezioni nel template.php
function garland2_regions() {
return array(
'left' => t('left sidebar'),
'right' => t('right sidebar'),
'floating' => t('floating1'),
'floating2' => t('floating2')
);
}
KNOWN BUGS
E' incompatibile, con quasi tutti i moduli che interagiscono con il DOM, io ho provato JsTools e DHTML_menu
TODO
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 
Bookmark/Search this post with:
psicomantegmailcom
psicomantekatapekkianet
psicomantesugmaildotcom
psicomante
Fico! Lo voglio *_*
Fico! Lo voglio *_*
Mi piacerebbe creare un
Mi piacerebbe creare un blocco fluttuante ma non riesco seguendo il tuo post... potresti spiegare meglio il procedimento ?
Grazie
Vincenzo
Ciao Vincenzo. Si forse è
Ciao Vincenzo. Si forse è un pò troppo tecnico il post. Se puoi dirmi in dettaglio cosa non ti funziona, ti posso aiutare in modo mirato.
EDIT: C'era un errore nel codice javascript, ho corretto. Prova a controllare se era per quel motivo che non ti funzionava.
Post new comment