Accordion 2.0, ora con Scriptacolous e Prototype

Per i fanatici degli effetti Javascript, Accordion 2.0 è una di quelle librerie che non puo mancare nel loro personale repository, cito integralmente come da sito ufficiale:

Finally a lightweight accordion that is built with scriptaculous and works properly in every browser.

Ora, giustamente ci viene da chiederci, ma come perchè fare un’altro script Accordion quando gia esistono questi ?

La risposta secondo l’autore è molto semplice, perchè “stranamente” nessuna aveva ancora pensato di crearne uno che usasse come framework di appoggio, scriptacolous e ovviamente la sua controparte prototype.

Il mio giudizio:

Ottima libreria, veloce e stabile, supporta bene sia gli accordion orizzontali che verticali, non c’è bisogno di definire nessun blocco di codice JS per lavorarci, in quanto lavora direttamente seguendo le regole del markup xhtml (la classe accordion_toggle).

Sto gia preparando un Plugin per Symfony, appena posso lo pubblicherò qui sul blog.

Wordpress Plugin: Wp-image-dropshadow (ombre sulle immagini)

Ho appena creato un prototipo di un plugin, al momento sono solo poche righe di codice (giusto delle inclusioni), che permette di aggiungere dinamicamente con css e Javascript le ombre sulle immagini (come questa che vedi nel post).

Non so se gia esiste un plugin che faccia questo lavoro, ma non l’ho trovato (non è che ci abbia perso molto tempo), quindi non ho perso tempo e ne ho creato uno.

Non ho avuto tempo di creare una piccola interfaccia di amministrazione, ma nei prossimi giorni lo farò senz’altro, per adesso il funzionamento è molto semplice, basta copiarlo nella dir dei plugin ed attivarlo.

Poi, bisogno modificare il file js/shadyhotness.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Behaviour.register({
 
  '.PostContent img' : function(element) {
 
    var wrap1 = document.createElement("div");
 
    wrap1.className = "wrap1";
 
    wrap1.setAttribute("class", "wrap1");
 
    var wrap2 = document.createElement("div");
 
    wrap2.className = "wrap2";
 
    wrap2.setAttribute("class", "wrap2");
 
    var wrap3 = document.createElement("div");
 
    wrap3.className = "wrap3";
 
    wrap3.setAttribute("class", "wrap3");    var outerNode = element.parentNode;
 
    outerNode.insertBefore(wrap1, element);
 
    wrap1.appendChild(wrap2);
 
    wrap2.appendChild(wrap3);
 
    outerNode.removeChild(element);
 
    wrap3.appendChild(element);
 
  }
 
});

La riga incriminata è la 2, esattamente “.Postcontent img”, cioè tutte le immagini che sono dentro la classe .PostContent (che rispecchia il mio CSS), quindi cambiare “.Postcontent” con la tua classe CSS che racchiude i post.

Vi prometto che farò un interfaccina di amministrazione al più presto.

Il codice è stato preso da: http://sporkmonger.com/2006/01/15/the-shady-hotness

Il plugin utilizza lo script Behaviour.js. dove potete trovare tutta la documentazione.

Potete scaricare il plugin qui: wp-image-dropshadow.tar.gz

Attendo vostri feedback

[Symfony]: YUI Tooltip helper

Avevo bisogno di una libreria solida che mi permettesse di avere dei tooltip e anche altri effetti javascript, era da tempo che volevo provare la YUI (Yahoo User Interface), una libreria immensa di codice, molto documentata e facile da utilizzare, cosi non ho perso tempo e ho creato subito un piccolo Helper per Symfony (si adoro questo framework ogni giorno di più)

Questo è il codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

 
_addYahooResources();
 
function tooltip($element_id, $text, $delay = 250, $options = array())
{
 
	$options['context'] = $element_id;
	$options['text'] = $text;
	$options['delay'] = $delay;
 
	$code = 'myTooltip = new YAHOO.widget.Tooltip("myTooltip",'._my_options_for_javascript($options).');';
 
	return javascript_tag($code);
}
 
function _addYahooResources()
{
	$response = sfContext::getInstance()->getResponse();
 
	/* Stylesheet */
        $response->addStylesheet('http://yui.yahooapis.com/2.3.0/build/container/assets/container.css');
 
	/* Javascript */
	$response->addJavascript('http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js');
	$response->addJavascript('http://yui.yahooapis.com/2.3.0/build/animation/animation-min.js');
	$response->addJavascript('http://yui.yahooapis.com/2.3.0/build/container/container-min.js');
 
}
 
 function _my_options_for_javascript($options)
  {
    $opts = array();
    foreach ($options as $key => $value)
    {
      $value = '"'.$value.'"';
      $opts[] = "$key:$value";
    }
    sort($opts);
 
    return '{'.join(', ', $opts).'}';
  }

L’utilizzo è molto semplice, basta copiare questo helper in app/{APPLICAZIONE}/lib/helper/chiamalocomevuoiHelper.php

E poi chiamare la funzione quando ne avete bisogno nei template, in questo modo:

1

< ?php echo tooltip('id_elemento','testo'); ?>

L’helper supporta anche tutti i parametri della libreria originale, basta passarli in un array come terzo parametro.

Symfony si preoccuperà di caricare la libreria automaticamente, non vi resta che utilizzarla.

Per la documentazione del codice YUI Tooltip fate riferimento a questo sito:

http://developer.yahoo.com/yui/container/tooltip/ (documentazione ufficiale)

Per ora è tutto, ci sentiamo al prossimo helper

I miei delicious dal 15 Agosto al 17 Agosto

Bookmark da Agosto 15th a Agosto 17th:

• 21 temi per wordpress -
• 10 temi per wordpress -
• temi per wordpress -
• Free Software Sticker Book -
• Code Snippets - find durable events between two dates -

Next Page →

Cerca