MaiNick Web » jQuery http://www.mainickweb.com Web 2.0, Ajax, JavaScript, PHP, xHTML e Css Thu, 15 Jul 2010 06:00:25 +0000 http://wordpress.org/?v=abc en hourly 1 NyroModal: finestre modali con jQuery http://www.mainickweb.com/nyromodal-finestre-modali-con-jquery/ http://www.mainickweb.com/nyromodal-finestre-modali-con-jquery/#comments Thu, 08 Jul 2010 06:00:34 +0000 MaiNick http://www.mainickweb.com/?p=469 nyroModal.jpg

Se state cercando uno script lightbox che è in grado di gestire gli iFrame, contenuti provenienti dal server tramite chiamate Ajax, contenuti HTML in linea, immagini, video e altro ancora, NyroModal è un ottimo plugin jQuery che permette tutto ciò.

Negli ultimi giorni mi sono trovato nella posizione di aver bisogno di un semplice, funzionale, plugin lightbox per jQuery facile da usare, una valida alternativa a Facebox. Dopo qualche ricerca, ho trovato diversi plugin sviluppati per questo scopo, e tutti hanno i loro pro e contro. Molti dei plugin supportano solo immagini, non utili alla mia richiesta di inserire contenuti in linea, video Flash e contenuto proveniente da chiamate Ajax.

Finalmente ho trovato e provato NyroModal e sono rimasto molto impressionato. Semplice da utilizzare, fondamentalmente tutto quello che dovremo fare è includere i file CSS e JavaScript appropriati, quindi applicare una classe di nyroModal agli elementi che si desidera aprire nel lightbox.

NyroModal è altamente personalizzabile, è possibile cambiare il suo aspetto grafico utilizzando i CSS, modificare le animazioni utilizzando le funzioni jQuery e personalizzare la sua funzionalità attraverso varie funzioni e proprietà.

Per impostazione predefinita, qualsiasi finestra modale (con eccezione dei file SWF) si ridimensiona automaticamente in base alla dimensione corrente della finestra del browser. Se l’utente ridimensiona il suo browser, anche la finestra modale si ridimensiona fino alla dimensione massima del contenuto.

NyroModal permette di impostare una galleria di contenuti con estrema facilità, semplicemente assegnando un identico valore all’attributo rel da attribuire a ciascuna voce della galleria: è anche possibile implementare gallerie multiple sulla stessa pagina utilizzando diversi attributi rel a cui applicare diverse impostazioni del plugin.

Un’altra funzionalità supportata, quella di effettuare l’upload di file tramite Ajax e gestire le informazioni del file ricevute, semplicemente associando la classe nyroModal al tag form del modulo.

Caratteristiche

  • Chiamate Ajax
  • Chiamata Ajax con targeting del contenuto
  • Immagine singola
  • Galleria immagini con freccie di navigazione
  • Galleria con ogni tipo di contenuto
  • Form
  • Form in iFrame
  • Form con targeting del contenuto
  • Form con upload di file
  • Dom Element
  • IFrame
  • Gestione degli errori
  • Finestra modale ridimensionata in base alle dimensioni della finestra del browser
  • Bottone ESC da tastiera per chiudere il lightbox
  • Animazioni personalizzabili
  • Aspetto personalizzabile
  • Titolo alla finestra modale
  • Standard W3C HTML valido (transitional)

NyroModal è disponibile per il download sotto licenza MIT. Potete trovare ulteriori informazioni, demo e download sul sito web del progetto NyroModal.

Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/nyromodal-finestre-modali-con-jquery/feed/ 0 jTwitter: semplice plugin jQuery per le Twitter API http://www.mainickweb.com/jtwitter-semplice-plugin-jquery-per-le-twitter-api/ http://www.mainickweb.com/jtwitter-semplice-plugin-jquery-per-le-twitter-api/#comments Mon, 05 Jul 2010 07:00:41 +0000 MaiNick http://www.mainickweb.com/?p=459 twitter-mainick.jpg

jTwitter è un semplice plugin jQuery che ci fornisce un facile accesso alle Twitter API per prelevare informazioni su uno specifico utente di twitter tramite il suo nome utente.

Il risultato della consultazione delle Twitter API è un oggetto JSON costituito dai dettagli dell’utente, quali nome completo, URL homepage, conteggi vari come seguaci, amici, favoriti, numero stati (tweets), localizzazione, etc.

Utilizzo

Per prima cosa nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e poi scrivere il seguente script JavaScript per utilizzare le funzionalità del plugin:

$jTwitter('nome_utente_twitter', num_tweet, function(tweets){
  // funzione richiamata per l'utilizzo delle info ricevute
});

E’ possibile specificare il nome utente twitter di cui si richiedano le informazioni e gli ultimi stati, e opzionalmente il numero di ultimi tweets postati dall’utente, se non specificato verranno prelevati gli ultimi 5 stati. Infine la funzione in cui gestire e manipolare le informazioni ricevute sotto forma di oggeto JSON

Ecco un mio piccolo esempio:

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.jtwitter.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      // Ottiene gli ultimi 10 stati dal mio account
      $.jTwitter('mainick', 10, function(tweets){
        $('#stati').empty();
        $.each(data, function(i, tweet){
          $('#stati').append(
            '<div class="stato">'
            +' <div class="msg">'
            +    tweet.text
            +' </div>'
            +'</div>'
          );
        });
      });
    });
  </script>
</head>
<body>
  <h1>Tweet by MaiNick</h1>
  <div id="posts">Attendere...</div>
</body>
</html>
Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/jtwitter-semplice-plugin-jquery-per-le-twitter-api/feed/ 0 Rubrica contatti in stile iPhone con jQuery e CSS http://www.mainickweb.com/rubrica-contatti-in-stile-iphone-con-jquery-e-css/ http://www.mainickweb.com/rubrica-contatti-in-stile-iphone-con-jquery-e-css/#comments Wed, 02 Jun 2010 07:00:58 +0000 MaiNick http://www.mainickweb.com/?p=448 slidernav.jpg

SliderNav è un plugin per jQuery che permette di scorrere una lista dinamica mediante una barra di navigazione verticale, costituita da indici. L’autore prende ispirazione dalla rabrica telefonica dell’iPhone, infatti è realizzato principalmente per un elenco alfabetico, ad esempio una rubrica di contatti, ma può essere utilizzato per qualsiasi cosa.

Il plugin aggiunge automaticamente la barra di navigazione e imposta l’altezza per la lista in base a quanto è alta la barra. E’ possibile scorrere il contenuto della lista utilizzando la rotellina del mouse.

Utilizzo

SliderNav è semplice da far funzionare, ma prima nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e il foglio di stile CSS associato:

<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="slidernav.js"></script>

Aggiungiamo il codice HTML che crea la nostra lista di contatti utilizzando la struttura seguente:

<div id="slider">
  <div class="slider-content">
    <ul>
      <li id="a"><a name="a" class="title">A</a>
        <ul>
          <li><a href="/">Adam</a></li>
          <li><a href="/">Alex</a></li>
          <li><a href="/">Ali</a></li>
          <li><a href="/">Apple</a></li>
          <li><a href="/">Arthur</a></li>
          <li><a href="/">Ashley</a></li>
        </ul>
      </li>
      <li id="b"><a name="b" class="title">B</a>
        <ul>
          <li><a href="/">Barry</a></li>
          <li><a href="/">Becky</a></li>
          <li><a href="/">Biff</a></li>
          <li><a href="/">Billy</a></li>
          <li><a href="/">Bozarking</a></li>
          <li><a href="/">Bryan</a></li>
        </ul>
      </li>
      etc...
    </ul>
  </div>
</div>

Una volta impostato l’intera lista, è semplicemente una questione di chiamare la funzione sliderNav sull’elemento che abbiamo appena creato:

<script type="text/javascript">
$(document).ready(function(){
  $('#slider').sliderNav();
});
</script>

il codice sopra è da scrivere nell’intestazione head della nostra pagina HTML, dopo aver richiamato il plugin.

Opzioni

E’ possibile inizializzare il plugin modificando le impostazioni predefinite in base alle proprie esigenze:

  • height: impostare questo valore in pixel se si vuole evitare il rilevamento automatico basato sull’altezza della barra di navigazione verticale.
  • items: per default il plugin genera la navigazione in ordine alfabetico utilizzando tutte le 26 lettere dell’alfabeto inglese, ma è possibile inizializzarlo utilizzando delle voci personalizzate.
  • arrows: il plugin visualizza delle frecce di scorrimento sulla lista, utili per gli utenti che non dispongono di un mouse con rotellina; i valori possibili di tipo booleano sono true (visualizza) o false (nasconde).

Ecco il codice per inizializzare il plugin, da sostituire a quello semplice:

<script type="text/javascript">
$(document).ready(function(){
  $('#slider').sliderNav({
    items: ['voce1','voce2','voce3'],
    height: '200',
    arrows: false
  });
});
</script>

Conclusioni

SliderNav, come ci consiglia lo stesso autore, può tornare utile principalmente quando vogliamo mostrare molte informazioni in un piccolo box organizzate con un ordine alfabetico (o per data).
Sulla pagina dedicata al plugin SliderNav è possibile scaricare il codice, visualizzare la demo e ottenere ulteriori aggiornamenti.

Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/rubrica-contatti-in-stile-iphone-con-jquery-e-css/feed/ 0 Cloud Zoom: image zoomer con jQuery http://www.mainickweb.com/cloud-zoom-image-zoomer-con-jquery/ http://www.mainickweb.com/cloud-zoom-image-zoomer-con-jquery/#comments Mon, 31 May 2010 05:00:40 +0000 MaiNick http://www.mainickweb.com/?p=437 cloud-zoom.jpg

Cloud Zoom è un plugin jQuery, di peso leggero, che permette di creare un effetto zoom sulle immagini nelle vostre pagine web. E’ altamente personalizzabile con diverse caratteristiche come l’effetto tinta, zoom interno o un sottile effetto di focus, e soprattutto è cross-browser, funziona in tutti i browser web più importanti tra cui il caro vecchio IE6.

Cloud Zoom è molto semplice da implementare, il sito del progetto non manca di una ricca documentazione. Si può facilmente personalizzare l’aspetto con una gallery, lente o finestra di zoom usando i CSS.
Offre diverse opzioni di configurazione che consentono di personalizzare il suo comportamento, tra cui: altezza, larghezza e posizione della finestra di zoom, tinta da applicare sulla parte di immagine non zoommata, opacità, dimensione porzione della parte da zoommare, abilitare o disabilitare i titoli.

Caratteristiche

Riassumento, le caratteristiche che rendono questo plugin davvero ottimo sono:

  • Facile integrazione con HTML
  • Peso leggero (nella versione compressa solo 6Kb)
  • Movimento nello zoom precisi e morbidi
  • Modalità gallery
  • Effetti tinta, zoom interno o soft-focus
  • Completamente accessibile senza JavaScript, CSS o browser testuali

Cloud Zoom è disponibile per il download sotto licenza MIT, per ulteriori informazioni, demo e download fare riferimento al sito del progetto di Cloud Zoom.

Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/cloud-zoom-image-zoomer-con-jquery/feed/ 0 Duplicare campi di un modulo con jQuery http://www.mainickweb.com/duplicare-campi-di-un-modulo-con-jquery/ http://www.mainickweb.com/duplicare-campi-di-un-modulo-con-jquery/#comments Tue, 27 Apr 2010 07:00:40 +0000 MaiNick http://www.mainickweb.com/?p=409 multi-recapiti.jpg

Avendo bisogno di implementare una rubrica in un progetto ho avuto l’esigenza di memorizzare per ciascun contatto un numero non precisato di recapiti.

Per la duplicazione del campo recapito ho utilizzato il plugin jquery relCopy che copia un qualsiasi elemento, e suoi figli, dal DOM.
Opzioni del plugin sono:

  • excludeSelector (string): selettore jQuery utilizzato per escludere un elemento ed i suoi figli.
  • limit (integer): numero di copie permesse [Default 0: illimitato].
  • append (string): HTML da allegare alla fine di ogni copia.
  • copyClass (string): una classe da associare a ciascuna copia [Default 'copy'].
  • clearInputs (boolean): opzione per cancellare i valori dei campi input e textarea clonati [Default true].

Per utilizzarlo basta chiamare $('selettore').relCopy({opzioni}) su un qualsiasi elemento del DOM con un selettore di tipo jQuery definito nell’attributo rel dell’elemento.

Documento HTML

Il modulo visualizzato contiene i campi descrittivi del contatto più la possibilità di associarvi quanti recapiti vogliamo:

<p class="clone"><input type="text" name="recapiti[]" class='input'/></p>
<p><a href="#" class="add" rel=".clone">Aggiungi recapito</a></p>
<p><input type="submit" value="Salva" /></p>

Dopo i campi predefiniti per descrivere un contatto abbiamo un paragrafo con un campo di tipo testo. Il paragrafo ha la classe clone la stessa utilizzata nell’attributo rel del link posto sotto, il quale ha la funzione di clonarlo.

Abbiamo indicato recapiti[] nell’attributo name del campo del recapito in modo da ottenere un array di tutti i recapiti inseriti nell’array globale $_POST: non mettendo le parentesi quadrate il modulo invierebbe il valore dell’ultimo recapito aggiunto.

Script jQuery

Per prima cosa bisogna includere la libreria jQuery (dai server di Google) poi il plugin relCopy ed infine il nostro file di script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="relCopy.jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

Ecco il codice del nostro file di script:

$(document).ready(function(){
  // link inserito alla fine dell'elemento clonato che permette di eliminarlo
  var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';

  // chiamata permette di clonare il paragrafo con all'interno il campo di testo del recapito
  $('a.add').relCopy({ append: removeLink });
});

Tramite la chiamata $('a.add').relCopy({ append: removeLink}); associamo al collegamento la funzione di clonare il recapito. Nell’opzione append utilizzata del plugin abbiamo definito un link che tramite un metodo jQuery permette di eliminare il corrispondente elemento clonato.

Salva contatto in PHP

Il codice che segue scandisce l’array $_POST['recapiti'] per estrarre i singoli valori inseriti:

<?php
if($_POST['recapiti']){
  $array_recapiti = $_POST['recapiti'];
  foreach ($array_recapiti as $recapito) {
    if (strlen($recapito)>0) {
      //operazioni sul singolo recapito
      echo $recapito."<br />";
    }
  }
}
?>

Demo Download

Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/duplicare-campi-di-un-modulo-con-jquery/feed/ 1 Menu verticale jQuery con effetto fisarmonica http://www.mainickweb.com/menu-verticale-jquery-con-effetto-fisarmonica/ http://www.mainickweb.com/menu-verticale-jquery-con-effetto-fisarmonica/#comments Tue, 20 Apr 2010 07:00:33 +0000 MaiNick http://www.mainickweb.com/?p=372 menu-verticale.jpg

In questo tutoriale faremo un semplice menu verticale con jQuery ma che cattura l’attenzione del navigatore con l’aiuto di CSS e del plugin Easing per l’effetto a fisarmonica.

Documento HTML

Come potete vedere in seguito dalla demo, il menu è diviso in quattro voci, ciascuna definita da un elemento LI posizionati all’interno dell’elenco principale UL: 

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title"><a href="#">Categoria Firefox</a></li>
    <li class="sub-menu">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Ogni voce del menu contiene un altro elenco UL, formato dalla voce del menu principale (li.title) e da un altro elenco UL che rappresenta il sotto menu (li.sub-menu).
All’interno dell’elemento li.title abbiamo un ancora a cui poi associamo un gestore di eventi jQuery che fa aprire il sotto menu corrispondente: il menu a discesa è nascosto di default tramite la proprietà css display: none.

Foglio di stile CSS

Con uno stile accattivante, anche la più semplice idea può fare una grande differenza nell’attenzione del visitatore.
E’ importante fare particolare attenzione che il codice CSS sia valido e che funzioni bene in tutti i browser: 

li.menu {
	/* Voci dell'elenco principale */
	width: 100%;
	padding: 5px 0;
}

li.title a {
	/* Voce del menu principale */
	display: block;
	position: relative;
	width: 200px;
	height: 34px;
	padding: 10px 20px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #cc0000;
	color: #ffffff;
	font-family: BPreplay,Arial,Helvetica,sans-serif;
	font-size: 21px;
	overflow: hidden;
}

li.title a:hover {
	background-color: #f40000;
	text-decoration: none;
}

li.title a span {
	/* Questo span agisce come parte finale della sezione title */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 44px;
}

.sub-menu {
	/* Sotto menu */
	display: none;
	width: 100%;
	padding-top: 5px;
}

.sub-menu li {
	/* Voci del sotto menu */
	margin: 5px 0;
	padding: 4px 18px;
	border: 1px solid #40392c;
	background-color: #2F2F2F;
	color: #cccccc;
}

Effetti con jQuery

In primo luogo abbiamo bisogno di includere alcuni script nel documento HTML (questo codice va messo all’interno della sezione HEAD):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script.js"></script>

Per prima cosa bisogna includere la libreria jQuery (in questo caso dai server di Google), poi il plugin Easing e infine il nostro file di script.

Come potete notare dalla demo, l’effetto che si ha nell’aprire un sotto menu è simile ad un rimbalzo. Questo risultato è ottenuto con l’aiuto del plugin Easing per jQuery: esso prevede una serie di effetti interessanti.

Ecco il codice del nostro file di script:

$(document).ready(function(){

  /* Cambiare l'effetto da utilizzare */
  $.easing.def = "easeOutBounce";

  /* Associare una funzione all'evento click sul link */
  $('li.title a').click(function(e){

    /* Finding the drop down list that corresponds to the current section: */
    var subMenu = $(this).parent().next();

    /* Trovare il sotto menu che corrisponde alla voce cliccata */
    $('.sub-menu').not(subMenu).slideUp('slow');
    subMenu.stop(false,true).slideToggle('slow');

    /* Prevenire l'evento predefinito (che sarebbe di seguire il collegamento) */
    e.preventDefault();
  })

});

Per prima cosa bisogna impostare l’effetto da utilizzare (easeOutBounce), e quindi associare una funzione da compiere per l’evento click sul link in li.title: si ottiene il corrispondente sotto menu (linea ) e lo si mostra (linea ), nascondendo tutti gli altri (linea ).

Il metodo slideToggle di jQuery controlla se l’elemento è già visibile sulla pagina, e decide se mostrarlo o nasconderlo: in questo modo, quando si fa click su una sezione del menu già aperta, essa viene semplicemente chiusa.
Dopo questo, usiamo e.preventDefault() per impedire al browser di seguire il collegamento (il comportamento normale per avere cliccato su un link).

Demo Download

Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/menu-verticale-jquery-con-effetto-fisarmonica/feed/ 13 Creare un menu a lista in ordine alfabetico con jQuery http://www.mainickweb.com/creare-un-menu-a-lista-in-ordine-alfabetico-con-jquery/ http://www.mainickweb.com/creare-un-menu-a-lista-in-ordine-alfabetico-con-jquery/#comments Mon, 08 Feb 2010 07:00:07 +0000 MaiNick http://www.mainickweb.com/?p=352 Menu a lista in ordine alfabetico con jQuery

ListMenu è un plugin jQuery che permette di convertire facilmente una lunga lista di elementi, difficile da navigare, in un sistema compatto di menu a liste visualizzate in ordine alfabetico, in modo che si presenti graficamente più pulita e di rapido accesso agli elementi.

jQuery ListMenu l’ho trovato molto utile per la presentazione di lunghe liste di contatti, prodotti, liste di cose, etc. Il risultato è un insieme di menu di liste su cui risulta facile spostarsi con il mouse su una lettera e un elenco a colonne di tutte le voci che iniziano con quella lettera appaiono in un sottomenu. Spostarsi tra le lettere è molto veloce e le colonne nei sottomenu sono ben bilanciate.

Se il tag utilizzato per rappresentare la lista è OL, la numerazione inizia da 1 in ogni sottomenu e si svolge tra le colonne, dall’alto verso il basso, da sinistra verso destra, mantenendo una sequenza logica.
Gli elementi della lista che iniziano con caratteri numerici vengono inclusi nella voce di menu opzionale [0-9]; mentre gli elementi che iniziano con caratteri di punteggiatura o non rappresentati nell’alfabeto visualizzato vengono raccolti nella voce di menu [...], sempre opzionale.
Le voci di menu che non contengono elementi appaiono disabilitate.

Utilizzo

Nell’intestazione (<head>…</head>) della nostra pagina html, dopo aver richiamato la libreria jQuery, includiamo il plugin ListMenu e il codice javascript che crea il menu di liste:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.listmenu-1.1.js"></script>
<script type="text/javascript">
  $(function(){
    $('#lista').listmenu();
  });
</script>

Aggiungiamo il codice HTML che crea la nostra lista di elementi con l’attributo id con valore lista indicato sopra nel selettore jQuery:

<ul id="lista">
  <li><a href="#">2 elemento</></li>
  <li><a href="#">A elemento</></li>
  <li><a href="#">A elemento</></li>
  <li><a href="#">B elemento</></li>
  <li><a href="#">C elemento</></li>
  <li><a href="#">E elemento</></li>
  <li><a href="#">F elemento</></li>
  <li><a href="#">L elemento</></li>
  <li><a href="#">Z elemento</></li>
  etc...
</ul>

E’ possibile utilizzare qualsiasi selettore jQuery con .listmenu(). Ad esempio, se nella stessa pagina sono presenti più liste e si desidera attivare su tutte le stesse opzioni di ListMenu e tutte hanno associata la stessa classe lista, si potrebbe realizzare semplicemente in questo modo:

<script type="text/javascript">
  $(function(){
    //imposta le stesse opzioni per tutte le liste con classe lista
    $('.lista').listmenu();
  });
</script>

Opzioni

E’ possibile inizializzare il plugin modificando le impostazioni predefinite in base alle proprie esigenze:

  • includeNums [default: true]: true mostra nella barra la voce di menu [0-9].
  • includeOther [default: false]: true mostra nella barra la voce di menu [...].
  • flagDisabled [default: true]: true applica la classe per mostrare disattivate quelle lettere che non hanno elementi nell’elenco.
  • noMatchText [default: 'No entries matching']: questo è il testo che appare al posto dell’elenco, se non sono presenti voci corrispondenti ad una lettera; impostare un proprio testo per sostituire quello predefinito.
  • showCounts [default: true]: true visualizza il numero di elementi quando ci spostiamo con il mouse su una lettera.
  • menuWidth [default: null]: il plugin calcola una larghezza per il menu a discesa utilizzando la larghezza degli elementi visualizzati; specificare con un valore numerico se si vuole forzare la larghezza del menu.
  • cols [default: {count: 4, gutter: 40}]: per impostazione predefinita l’elenco di oggetti per ogni lettera di navigazione sono convertiti in 4 colonne (‘count’) con uno spazio di 40px (‘gutter’) tra di loro.
  • onClick [default: null]: forniture una propria funzione per gestire i clic sugli elementi dei menu a discesa.

jQuery ListMenu plugin è sviluppato da iHwy, i quali dedicano una pagina al progetto ListMenu dove poter scaricare il plugin, visualizzare le demo e ottenere ulteriori informazioni, aggiornamenti e assistenza.

Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/creare-un-menu-a-lista-in-ordine-alfabetico-con-jquery/feed/ 0 Ricerca in modo interattiva con jQuery http://www.mainickweb.com/ricerca-in-modo-interattiva-con-jquery/ http://www.mainickweb.com/ricerca-in-modo-interattiva-con-jquery/#comments Wed, 03 Feb 2010 07:00:07 +0000 MaiNick http://www.mainickweb.com/?p=343
Tra i tantissimi plugin sviluppati per jQuery da me utilizzati, QuickSearch è quello che ho scoperto di recente, ma rapidamente aggiunto nella mia lista di preferiti.
QuickSearch agisce visualizzando un campo di ricerca posto sopra o sotto determinati elementi – tabelle, elenchi e paragrafi – e permette di filtrare il contenuto in tempo reale man mano che vengono digitati i caratteri nel campo di ricerca.

Ho trovato molto utile QuickSearch nei miei progetti utilizzandolo per effettuare ricerche veloci su tabelle.
Dovete realmente provare per apprezzare la semplicità e velocità nella ricerca.

Utilizzo

Ecco un esempio semplice per vedere il plugin in azione. La tabella che utilizzeremo nell’esempio dell’articolo è la stessa utilizzata dal creatore sulla pagina di presentazione del plugin. 





Email
Id
Phone
Total
Ip
Url






devo@flexomat.com
66672
941-964-8535
$2482.79
172.78.200.124
http://gmail.com




henry@mountdev.net
35889
941-964-9543
$2776.09
119.232.182.142
http://www.gmail.com




christian@reno.gov
60021
941-964-5617
$2743.41
167.209.64.181
http://www.dotnet.ca




muffins@donuts.com
17927
941-964-9511
$2998.18
210.214.231.182
http://google.se




muffins@reno.gov
76375
941-964-2757
$1836.09
220.222.93.171
http://www.samba.org




mendez@gmail.com
45834
941-964-2575
$2805.46
228.170.245.253
http://flexomat.com




dev@gmail.com
20022
941-964-4967
$3296.54
175.248.70.240
http://www.flexomat.com




foo@polyester.se
55977
941-964-745
$2953.73
222.114.227.156
http://www.donuts.com




adam@aftonbladet.se
38867
941-964-6302
$1949.27
116.241.143.196
http://flexomat.com




devo@donuts.com
51426
941-964-1234
$1067.00
88.96.149.82
http://www.polyester.se




henry@samba.org
40859
941-964-4856
$3401.19
68.152.250.74
http://www.flexomat.com




found@dotnet.ca
23986
941-964-2686
$1393.52
98.102.181.138
http://lostnfound.org




carl@fish.org
73392
941-964-5792
$3876.04
246.234.182.243
http://www.google.se




found@mountdev.net
03519
941-964-1599
$1176.48
104.212.122.177
http://donuts.com

Nell’intestazione della nostra pagina richiamiamo la libreria jQuery, il file di QuickSearch e il codice javascript per inizializzare il plugin:

Come potete vedere abbiamo provveduto ad intercettare l’elemento tabella tramite il suo id, dopo di che specifichiamo le opzioni di inizializzazione.

Opzioni

Le opzioni specificate sopra nel codice javascript di inizializzazione sono alcune delle tante che possiamo utilizzare, di seguente elencate e descritte:

  • position: posizione del modulo di ricerca (before, after, prepend [default], append).
  • attached: elemento collegato al modulo di ricerca (default: body).
  • formId: attributo id del modulo di ricerca (default: quicksearch).
  • labelText: testo dell’etichetta del campo di ricerca (default: Quick Search).
  • labelClass: attributo class dell’etichetta del campo di ricerca (default: qs_label).
  • inputText: valore del campo input di ricerca.
  • inputClass: attributo class del campo input di ricerca (default: qs_input).
  • loaderId: attributo id dell’elemento di caricamento risultati (default: loader).
  • loaderClass: attributo class dell’elemento di caricamento risultati (default: loader).
  • loaderImg: visualizza un’immagine insieme al testo di caricamento.
  • loaderText: testo di caricamento (default: Loading …).
  • stripeRowClass: aggiunge una classe per ogni elemento in base all’array dato (array di stringhe di classi).
  • delay: ritardo in millisecondi dopo l’ultimo carattere digitato (default: 500).
  • onBefore: esegue una funzione prima di effettuare la ricerca (prende: function() { }).
  • onAfter: esegue una funzione dopo di effettuare la ricerca (prende: function() { }).

Nota: Quando QuickSearch è collegata a una tabella, evitate l’uso di prepend o append.

Sviluppato da Rik Lomas potete trovare ulteriori informazioni sulla pagina dedicata a QuickSearch plugin jQuery, come il file javascript del plugin e le demo implementati sugli altri elementi specificati all’inizio dell’articolo.

Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/ricerca-in-modo-interattiva-con-jquery/feed/ 0 Colonne adattabili a layout liquido con CSS e jQuery http://www.mainickweb.com/colonne-adattabili-a-layout-liquido-con-css-e-jquery/ http://www.mainickweb.com/colonne-adattabili-a-layout-liquido-con-css-e-jquery/#comments Fri, 18 Dec 2009 12:00:31 +0000 MaiNick http://www.mainickweb.com/?p=334 smart-columns.jpg

Twittando mi sono ritrovato a leggere un post che analizzava il problema di avere un layout costituito da colonne “liquid” adattabile alle dimensioni della finestra del browser.

In un layout fisso imposteremo una dimensione fissa per ogni colonna, occuperemo tutta la larghezza della pagina; ma ad un certo limite, l’ultima colonna non sarà in grado di adattarsi allo spazio rimanente, andando a capo lascierà un margine di spazio vuoto.

fixedsample.gif

Invece, in un layout liquido le colonne riempiranno perfettamente l’intero spazio della pagina in qualsiasi caso, ma ci troveremo ad avere un numero predefinito di colonne su singola riga.

liquidsample.gif

La soluzione trovata dall’autore è stata quella di unire insieme le caratteristiche dei due loyout tramite l’utilizzo di CSS e jQuery.

Abbiamo un codice html di base per l’esempio:

<ul class="column">
  <!--Voce elenco colonna-->
  <li>
    <div class="block">
      <!--Contenuto colonna-->
    </div>
  </li>
  <!--Inserire altre colonne-->
</ul>

Codice CSS del foglio di stile collegato all’esempio:

ul.column {
  width: 100%; /*layout liquido*/
  margin: 10px 0;
  padding: 0;
  list-style: none;
}
ul.column li {
  float: left;
  display: inline;
  width: 200px; /*larghezza predefinita per ogni colonna*/
  margin: 5px 0;
  padding: 0;
}
.block {
  height: 355px;
  margin-right: 10px; /*margine tra ogni colonna*/
  padding: 20px;
  background: #e3e1d5;
  font-size: 1em;
}
.block img {
  /*Dimensioni flessibili per l'immagine interna alla colonna*/
  display: block;
  width: 89%;  /*1% in meno per prevenire un bug in IE6*/
  margin: 0 auto;
  padding: 5%;
  background-color: #fff;
  -ms-interpolation-mode: bicubic; /*prevents image pixelation for IE 6/7 */
}

diamo dimensione 100% al layout per coprire l’intero spazio della pagina, mentre una dimensione fissa predefinita per le colonne in modo da risolvere il secondo dei due problemi descritti: in caso di colonne liquidi avremo un numero predefinito su singola riga.

Ecco lo script jQuery che risolve il primo dei problemi:

//Funzione che calcola la dimensione da applicare alle colonne
function smartColumns() {
  //Resetto dimensione colonne all'intera pagina 100%
  $('ul.column').css({ 'width' : "100%"});
  var colWrap = $('ul.column').width(); //larghezza riga
  //Numero di colonne di 200px che vanno bene nell'attuale larghezza della pagina
  var colNum = Math.floor(colWrap / 200);
  //Dividendo la larghezza della pagina per il numero di colonne che possono andare bene,
  //otteniamo come numero intero la larghezza perfetta da assegnare a ciascuna colonna
  var colFixed = Math.floor(colWrap / colNum);
  $('ul.column').css({ 'width' : colWrap}); //Risolve bug in qualche browser
  $("ul.column li").css({ 'width' : colFixed}); //Imposto la nuova larghezza alle colonne
}
smartColumns(); //Esegue la funzione quando si carica la pagina la prima volta
$(window).resize(function () {
  //Ogni volta che la finestra è ridimensionata si esegue la funzione
  smartColumns();
});

Come realizza il tutto è descritto nei commenti dello script; potete visualizzare la demo e avere ulteriori informazioni visitando la pagina dell’autore.

Condividi: Diggita del.icio.us Digg Facebook Twitter FriendFeed StumbleUpon Tumblr Google Bookmarks email RSS

]]> http://www.mainickweb.com/colonne-adattabili-a-layout-liquido-con-css-e-jquery/feed/ 0 Effetto newsticker con jQuery http://www.mainickweb.com/effetto-newsticker-con-jquery/ http://www.mainickweb.com/effetto-newsticker-con-jquery/#comments Thu, 17 Dec 2009 09:29:39 +0000 MaiNick http://www.mainickweb.com/?p=320 Con questo piccolo articolo voglio illustrare un modo per visualizzare le notizie recenti con liScroll, un plugin per jQuery che trasforma qualsiasi elenco non ordinato ul in un news ticker a scorrimento.

Con il termine “newsticker” si vuole intendere un box in cui si possono leggere le ultime notizie con effetto scorrimento tipico dei siti di informazione giornalistica

Utilizzo

Tutto ciò che serve per costruire il vostro box news ticker è una lista non ordinata che come attributo ha un id univoco:

<ul id="newsticker01">
  <li><span>16/12/2009</span><a href="http://www.mainickweb.com/crea-tooltip-su-link-e-immagini-in-modo-semplice-con-jquery/">Crea tooltip su link e immagini in modo semplice con jQuery</a></li>
  <li><span>15/12/2009</span><a href="http://www.mainickweb.com/jquery-captify-plugin-aggiungere-didascalie-alle-immagini/">jQuery Captify Plugin: Aggiungere didascalie alle immagini</a></li>
  <li><span>07/12/2009</span><a href="http://www.mainickweb.com/effetto-growl-con-jquery/">Effetto Growl con jQuery</a></li>
  <li><span>07/12/2009</span><a href="http://www.mainickweb.com/sfondo-a-tutto-schermo-con-jquery/">Sfondo a tutto schermo con jQuery</a></li>
  <li><span>09/10/2009</span><a href="http://www.mainickweb.com/crea-una-classifica-mp3-musicale-con-jquery/">Crea una classifica mp3 musicale con jQuery</a></li>
</ul>





Per realizzare l’effetto bisogna collegare alla vostra pagina web, come sempre, la libreria jQuery, il plugin liScroll e il seguente semplice codice javascript:


$(function(){
  $('ul#newsticker01').liScroll();
});





Opzioni


L’unica opzione personalizzabile di questo plugin jQuery è la velocità:


$(function(){
    $('ul#newsticker01').liScroll({travelocity: 0.15});
});



modificando il valore del parametro travelocity.


Sul pagina dedicata a liScroll plugin jQuery sono disponibili demo e script.




Condividi:


	Diggita
	del.icio.us
	Digg
	Facebook
	Twitter
	FriendFeed
	StumbleUpon
	Tumblr
	Google Bookmarks
	email
	RSS




]]>
			http://www.mainickweb.com/effetto-newsticker-con-jquery/feed/
		0