Ciao a tutti avrei bisogno di un pò di aiuto per quanto riguarda l'uso di JQuery, ora vi spiego. Vorrei inserire degli effetti all'interno di alcuni singoli nodi senza però che questi effetti prendano l'intero sito, ogni nodo deve avere un suo comportamento per essere più chiaro. Il mio problema è che non ho mai lavorato con jQuery e non so da dove cominciare, qualcuno saprebbe aiutarmi e suggerirmi come utilizzare al meglio all'interno di drupal queste librerie?
Grazie a tutti.
MyTechnica.
Uso di jQuery
Gio, 01/07/2010 - 12:45
#1
Uso di jQuery
Un pò basiliare, ma Pakt Drupal 6 JavaScript and jQuery potrebbe rispondere alle tue esigenze. In English unfortunately.
Più imparo, più dubito.
Ciao Jhl.verona,
volevo farti una domanda, ho problemi nel richiamare le funzioni Jquery nell' Head... quello che faccio io è richiamare le funzioni come si richiamano per un semplice sito sviluppato in Xhtml.
<link href="js_fix.css" rel="stylesheet" type="text/css" /><link href="shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/tools.scrollable-1.0.4.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-it.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-base.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-img.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-html.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-iframe.js"></script>
<script src="jquery.accordion-1.2.2.source.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Ma penso che sia sbagliato, sapresti suggerirmi uno script corretto per effetuare questi richiami?
Grazie.
Prima di tutto Drupal già usa jQuery, quindi la sua inclusione è automatico:
<script type="text/javascript" src="/misc/jquery.js?i"></script>Secondo, prova a guardare qualche modulo che fa l'interfaccia fra Drupal ed una libreria JavaScript ben noto: http://drupal.org/project/shadowbox, http://drupal.org/project/jquery_ui
Può sembrare un pò ridicolo, ma ti posso assicurare che è la via meno doloroso (ho le ciccatrice) ed in più puoi usarlo come modello - il sorgente è libero - per altri librerie che non hanno moduli Drupal.
Più imparo, più dubito.
Ciao Jhl.verona e scusa il disturbo.
nella page.tpl.php ho una struttura di questo genere:
<?php// $Id: page.tpl.php,v 1.28.2.1 2009/04/30 00:13:31 goba Exp $
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
<script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>
<script type="text/javascript" src="/misc/jquery.js"></script>
<script type="text/javascript" src="/misc/jquery.form.js"></script>
<link href="js_fix.css" rel="stylesheet" type="text/css" />
<link href="shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/tools.scrollable-1.0.4.js"></script>
<script type="text/javascript" src="js/shadowbox.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-it.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-base.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-img.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-html.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox-iframe.js"></script>
<script src="jquery.accordion-1.2.2.source.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function () {
$('ul').accordion();
});
// ]]>
</script>
<script type="text/javascript">
Shadowbox.init({
counterType:'skip'
//continuous:true,
//slideshowDelay:10
});
$(document).ready(function(){
$("div.scrollable").scrollable({
size:1,
items:'.scroll_box',
navi:'#nav_right',
prevPage:'#prevPage',
nextPage:'#nextPage'
});
});
</script>
<script type="text/javascript" language="JavaScript">
<!--
function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute('hsrc')) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute('hsrc');
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute('hsrc'))
}
imgarr[i].onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;
//-->
</script>
</head>
<body>
<div id="container">
<div id="top">
<div class="logo">
<?php if ($logo) { ?><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
</div>
<div class="top-menu">
<ul>
<li><a href="http://www.drupal.anteadev.com">Home</a></li>
<li class="acceso"><a href="http://www.drupal.anteadev.com/node/02">Chi Siamo</a></li>
<li><a href="http://www.drupal.anteadev.com/node/08">L'Azienda</a></li>
<li><a href="http://www.drupal.anteadev.com/node/11">Catalogo</a></li>
<li><a href="http://www.drupal.anteadev.com/node/10">Contatti</a></li>
</ul>
</div>
</div>
<div id="flash"></div>
<div class="box">
<div class="box-a">
<h1><a href="http://www.drupal.anteadev.com/node/14">Imprese di pulizie</a></h1>
<div class="imma"></div>
<p><a href="http://www.drupal.anteadev.com/node/14">Periodicamente tutte le novità nella sua casella di posta</a></p>
</div>
<div class="box-a">
<h1><a href="http://www.drupal.anteadev.com/node/15">Lavanderie</a></h1>
<div class="imma2"></div>
<p><a href="http://www.drupal.anteadev.com/node/15">Periodicamente tutte le novità nella sua casella di posta</a></p>
</div>
<div class="box-a">
<h1><a href="http://www.drupal.anteadev.com/node/16">Agro Alimentare</a></h1>
<div class="imma3"></div>
<p><a href="http://www.drupal.anteadev.com/node/16">Periodicamente tutte le novità nella sua casella di posta</a></p>
</div>
<div class="box-a">
<h1><a href="http://www.drupal.anteadev.com/node/17">Ristorazione</a></h1>
<div class="imma4"></div>
<p><a href="http://www.drupal.anteadev.com/node/17">Periodicamente tutte le novità nella sua casella di posta</a></p>
</div>
<div class="box-a">
<h1><a href="http://www.drupal.anteadev.com/node/18">Ospitalità</a></h1>
<div class="imma5"></div>
<p><a href="http://www.drupal.anteadev.com/node/18">Periodicamente tutte le novità nella sua casella di posta</a></p>
</div>
<div class="box-a">
<h1><a href="http://www.drupal.anteadev.com/node/19">Autolavaggi</a></h1>
<div class="imma6"></div>
<p><a href="http://www.drupal.anteadev.com/node/19">Periodicamente tutte le novità nella sua casella di posta</a></p>
</div>
</div>
<div class="bread">
<?php print $breadcrumb ?>
</div>
<div class="column-left">
<?php print $left ?>
</div>
<div class="column-ab">
<div class="box-c">
<h1 class="title"><?php print $title ?></h1>
<div class="tabs"><?php print $tabs ?></div>
<?php if ($show_messages) { print $messages; } ?>
<?php print $help ?>
<?php print $content; ?>
</div>
</div>
<div id="footer">LIBER CHIMICA s.n.c. | P.iva 01391490669 | 67063 - ORICOLA (AQ) | Tel. 0863.992040 | Fax 0863.992033</div>
</div>
</body>
</html>
Mentre nel nodo ho inserito:
<div class="col-right"><div class="scrollable">
<div class="scroll_box">
<div class="cont_box-h">
<div class="box-e"><a href="images/10.jpg" rel="shadowbox[a]" title="img01"><img src="images/09.jpg" alt="img" /></a>
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica »</span> <img src="images/pdf.png" alt="pdf" /> </a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <a href="images/09.jpg" rel="shadowbox[a]" title="img01"><img src="images/09.jpg" alt="img" /></a>
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"><a href="images/10.jpg" rel="shadowbox[a]" title="img01"><img src="images/09.jpg" alt="img" /></a>
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza »</span> <img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"><a href="images/09.jpg" rel="shadowbox[a]" title="img01"><img src="images/09.jpg" alt="img" /></a>
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica »</span> <img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"><a href="images/10.jpg" rel="shadowbox[a]" title="img01"><img src="images/09.jpg" alt="img" /></a>
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica »</span> <img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza »</span> <img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
</div>
<div class="cont_box-h">
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
</div>
<div class="cont_box-h">
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
<div class="box-e"> <img src="images/09.jpg" alt="img" />
<div class="tit">
<h1>Ausop</h1>
<h2>Detergente Annoniacale</h2>
</div>
<p>Detergente neutro, per la manutenzione giornaliera di tutti i pavimenti e le superfici lavabili. Contiene un’essenza deodorante che
eliminai cattivi odori e lasci...</p>
<div class="box-e-e">
<p>Confezioni: cartone 4x5kg - tanica 10kg</p>
<div class="box-e-a"> <a href="#"><span>Scheda Tecnica » </span><img src="images/pdf.png" alt="pdf" /></a></div>
<div class="box-e-a"><a href="#"><span>Scheda di Sicurezza » </span><img src="images/doc.png" alt="file" /></a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="navigazione">
<div id="nav_right"><a>1</a> <a>2</a> <a> 3 </a> <a>4</a> <a >5</a> <a>6</a> </div>
</div>
</div>
Non so che pesci prendere sapresti dirmi dove sbaglio?
Scusami ma è la prima volta che mi trovo ad usare jquery e le difficolta non sono poche.
Grazie per la disponibilità.
MyTechnica.
Non so esattamente dove iniziare...
Mi sembra che ti sei dipinto in un angolo, e sei molto lontano dalle porte e finistre.
1. Come già detto non è buon idea 'schiaffare'
<script>dentro un template.2. I percorsi sono probabilmente sbagliati, non hai un indirizzo
jsnel root di Drupal3. Ma perchè scrivere quel header ('Imprese di pulizie' ecc) nel template? Usa un blocco
4. I could go on...
So che sei nuovo, ma devi dedicare un pò di tempo ad imparare le regole di Drupal. Leggi "Using Drupal" per esempio.
Altrimenti puoi sempre chiedere ad uno di noi una mano (pagante) 'professionale' per metterti sulla buona strada. Oricola (AQ) è un pò lontano, ma c'è sempre Skype e quant'altro ;-)
Più imparo, più dubito.