invertita galleggianti con jQuery Massoneria

Ti piacerebbe un plugin piacevole per la posa di fuori con un altro per mano per dare breve. jQuery Massoneria .
Durante gli elementi float's disposti orizzontalmente e verticalmente poi, avete Masnory con la possibilità di fare esattamente il contrario. Solo in senso verticale, poi orizzontale.

Il plugin viene fornito senza ulteriori regolazioni o opzioni. Tutto ciò che serve è un po 'i CSS.

Ecco un semplice esempio in cui tutti gli elementi sono nel contenitore "avvolgere" un nuovo orientamento.

  1

  ) . masonry ( ) ; $ ('. Wrap'). Massoneria (); 

Una demo e maggiori informazioni e per scaricare i file che trovate sul sito ufficiale .

Forme con jQuery - una serie completa

Quanto è importante la Fomular problema e jQuery è in calo, volando sopra di noi durante le nostre statistiche del blog ancora e ancora. Molte delle ricerche su Google Parole chiave assumere le forme hanno a che fare con jQuery.
I lati che a volte hanno il maggior traffico in quella direzione.
Noi tutti vogliamo tenerne conto oggi e iniziare una lunga serie e dettagliate sulla intero soggetto di "forme e jQuery.
La serie sarà composta da più parti e ripartito come segue:

• Panoramica di recente-Validaton script forma.
• Panoramica delle funzioni chiave per le offerte di convalida jQuery.
• Tutorial "Creare il proprio script di convalida utilizzando jQuery.
• Panoramica di plugin jQuery in corso per elaborare i dati del modulo tramite la tecnologia AJAX.
• Tutorial "plugin jQuery proprio per elaborare i dati del modulo tramite la tecnologia AJAX compresi upload file".
• Panoramica delle principali funzioni jQuery è di modificare i moduli.
• Panoramica sulle "forme personalizzate". belle forme con jQuery.
• Panoramica sulle "tecniche di forma avanzata." Completamento automatico ", in luogo Editing, Selezione data, le descrizioni comandi evitare una doppia amico e qualche altre piccole cose.

Per concludere la serie, ci sarà il nostro plugin nuova forma di presentarvi al momento stiamo lavorando al massimo. Tanto in anticipo.

Oggi, vogliamo lo stesso con la Parte 1 - " Panoramica di recente-Validaton script modulo iniziare.

jQuery ifixpng - Plugin per il problema della trasparenza

Chi non conosce il problema. Vogliono integrare una png trasparente e ha dei problemi nelle vecchie versioni di Internet Explorer.
Naturalmente c'è già per soluzioni come il PNGFix di TwinHelix ecc

Comunque ho trovato nessuno così semplice e intelligente come jQuery.ifixpng.
Il plugin può essere generale, a tutti i file di un tipo o selettivamente applicato id sono.

Ci sono due istantanee, tre problemi indicati, ma di solito non significativo.
Tra le altre cose, gli elementi devono essere applicate per il trucco per essere visibili.
Sfondo di posizionamento sito web e ripetendo benissimo non esistere. Ma è un problema minore per essere normale in ogni caso se avete bisogno di hack.

Qui, come sempre, un semplice esempio:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11

  / / Applica a tutte le immagini png
 ) . ifixpng ( ) ; $ ('[Img src $ @ =. png]'). Ifixpng (); 

 / / Applica a tutte le immagini png e di div # logo
 ) . ifixpng ( ) ; $ ('[Img src $ @ =.] png, div # logo'). Ifixpng (); 

 / / Applica a div # logo, undo fix, quindi applicare la correzione di nuovo
 ) . ifixpng ( ) . iunfixpng ( ) . ifixpng ( ) ; $ ('[Img src $ @ =.] png, div # logo'). Ifixpng (). Iunfixpng (). Ifixpng (); 

 / / Applica a div # logo2, modificare e aggiungere css evento click di proprietà
 ) . ifixpng ( ) . css ( { cursor : 'pointer' } ) . click ( function ( ) { alert ( 'ifixpng is cool!' ) ; } ) ;; $ ('Div # logo2'). Ifixpng (). CSS ((cursore: 'puntatore')). Click (function () (alert ('ifixpng è cool');)); 

Tutte le altre informazioni e per scaricare il plugin può essere trovato sul sito ufficiale .

Lazy - plugin jQuery caricamento on-demand

I giorni sono stato un po 'di jQuery plugin bello chiamato Lazy inciampato.
Se pigro è solo una grande plugin 530Byte caso di progetti di grandi dimensioni, un vantaggio proprio di ciò che il plugin jQuery altri sono interessati, può solo portare Laden.

Lazy fare altro che plug-in per inizializzare solo se davvero da qualche parte per la funzione di chiamata è uno.
Diciamo che è possibile incorporare pigro su quello che sarà, sarà caricato solo quando è veramente necessario.

Ecco un piccolo esempio di codice:

  1
 2
 3
 4
 5
 6

  'jquery.elastic.js' , 'elastic' ) ; $. Lazy ('jquery.elastic.js', 'elastico');
 'jquery.validation.js' , 'validate' ) ; $. Lazy ('jquery.validation.js', 'convalida');
 'jquery.ajaxdotnet.js' , 'ajaxDotNet' ) ; $. Lazy ('jquery.ajaxdotnet.js', 'ajaxDotNet');

 / / E poi si usa vi plugin come fai sempre
 ) . elastic ( ) ; $ ('Textarea'). Elastico (); 

Maggiori informazioni e una demo e scaricare i file che trovate sul sito ufficiale:
http://www.unwrongest.com/projects/lazy/

Forme allinearsi con jQuery e CSS

I moduli possono essere completate con le tabelle o layout di etichetta bene. Tuttavia, le tabelle hanno lo scopo di visualizzare i dati e non alla posizione Oberflächelemente. Nella versione di CSS con DIV e l'etichetta che ha il problema che la lunghezza del campo cambiare forma di testo possono essere descritte e una certa larghezza di una interruzione di linea o di un diverso orientamento dei campi di modulo dal piombo.
Questo po 'di difficoltà in grado di affrontare con jQuery elegante.

In primo luogo, abbiamo bisogno di un quadro semplice HTML:

  1
 2
 3
 4
 5
 6
 7
 8

  <div class="input_div">
    <label for="name"> Nome: </ label>
   <input id="einName" name="derName" />
 </ Div>
 <div class="input_div">
    ...
    ...
 </ Div> 

Il CSS in circa questa forma:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13

 type = "text" ] { float : left ; display : block ; } label { margin-right : 5px ; } .input_div { width : 100% ; overflow : auto ; } etichetta, input [type = "text"] (float: left; display: block;) etichetta (margin-right: 5px;). input_div (larghezza: 100%; overflow: auto;) 

Normalmente l'etichetta c'è un fisso "proprietà width" con pari. Ma questo testo, in ogni caso, l'etichetta e montare sempre la stessa distanza al campo hanno la forma, si usa jQuery per determinare la larghezza necessaria per fare:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10

   . ready ( function ( ) { var max = 0 ; //prüfe die Breite jedes Labels und speichere die größte Zahl in der Variable max $ ( "label" ) . each ( function ( ) { if ( $ ( this ) . width ( ) > max ) max = $ ( this ) . width ( ) ; } ) ; //setze jedes Label-Tag auf die gleiche Breite $ ( "label" ) . width ( max ) ; } ) ; $ (Documento). Ready (function () (max var = 0; / / Controlla la larghezza di ogni etichetta e salvare il più gran numero nella massima variabile $ ("etichetta"). Ciascuno (function () (if ($ (questo ). larghezza ()> max) max = $ (questo). ();)); larghezza / / set tutti i giorni sulla stessa etichetta larghezza $ ("etichetta"). larghezza (max );)); 

Quindi, che sarebbe stato già e il risultato è il seguente:

jQuery Indirizzo - deep linking con jQuery

Per quelli di voi Flash, Flex e Air funziona bene con swfaddress di asual anche essere un termine. Consente swfaddress ma il deeplinking all'interno delle applicazioni Flash.
A mio parere, è stato swfaddress negli ultimi anni uno dei migliori sviluppi ulteriori in flash e non, anche attraverso la realizzazione facile e veloce esecuzione.

I ragazzi di oggi hanno un altro asual deeplinking plugin sviluppati. Questa volta per jQuery.
Il plugin permette ora anche direttamente lo stato di un'applicazione o di un settore specifico di link del sito.

Il plugin permette le seguenti:

• Bookmark questa pagina nei tuoi preferiti, o un sito web sociale
• Invio di link via e-mail o messenger
• Il ritrovamento di contenuto particolare con importanti motori di ricerca
• Elaborazione della cronologia del browser e il pulsante Aggiorna

Un URL generato dal plugin potrebbe apparire come segue:

http://www.domain.de/ # / sezione / id = jQuery = 1 & nome

Un modo come è ora il link in schede. Con il plugin ora è possibile direttamente di mira come il controllo di aree di un componente sulla scheda.
Un esempio può essere trovato qui .

Il sito del plugin asual possono essere trovate sul sito: http://www.asual.com/jquery/address/
Lì troverete il plugin da scaricare, l'API ed esempi.

Online generatore di miniature delle pagine web

Indipendentemente da tutti i quadri di JS inizierò ad introdurre un piccolo servizio che ti permette di Thumbails facilmente siti web possono costituire un lotto.
Tutto ciò che serve è un account su Pageglimpse . Dopo la registrazione successo, si sono dalla sua parte del tag img src semplicemente come un collegamento assoluto. Questo sarebbe il seguente aspetto:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

Pageglimpse ha anche una piccola API. Che, caso per significa solo che la stringa GET-solo attributi possono essere aggiunti.
Questi includono:

• DevKey - obbligatorio>, e anche comune l'utilizzo di un servizio sul Web
• url -> Indirizzo WWW al sito per essere visualizzato come una miniatura
• size -> dimensione del Thumbails

Poiché le miniature non vengono generati immediatamente, è possibile inviare una richiesta al controllo di stato. Una richiesta sarebbe simile a questa:

http://images.pageglimpse.com/v1/thumbnails/request?

Dietro "richiesta?" È quindi possibile aggiungere il GET parametri. trovare esempi per la sua Pageglimpse API .

Pane Crumb jQuery'd - jBreadCrumb

Anche se non del tutto nuova, ma trovo ancora impressionante. E per quelli di voi che conoscono potrebbe non essere un highlight. jBreadCrumb - Il plugin di jQuery per la rappresentazione moderna di mollica di pane.

Il plugin è stato scritto per il pangrattato profondamente nidificate o lungo i nomi di pagina hanno a che fare con estrema e quindi ha la capacità di piegare pure.
Il bello è il Einklappeffekt può essere regolata in base al numero di elementi o della lunghezza.

Il plugin utilizza ulteriormente il plugin allentamento di jQuery per mostrare o espandere il contenuto.

Per utilizzare il plugin che vi serve è qualcosa di simile:

  1
 2
 3

  . ready ( function ( ) { jQuery (documento). ready (function () (
	 ) . jBreadCrumb ( { easing : 'swing' } ) ; jQuery ("# Pane Crumb"). jBreadCrumb ((alleggerimento: 'swing'));
 )) 

Una demo e per scaricare i file che trovate sul sito ufficiale.

Testo in eccedenza - i puntini di sospensione plugin di jQuery

Ci sono alcune funzionalità CSS che Microsoft è da tempo gli sviluppatori di Internet Explorer fornisce. Una di queste caratteristiche è la proprietà "text-overflow", che è sancito anche CSS3, e ora in Safari e Opera è già sancito. L'unico problema è, Firefox non lo supporta ancora. (Sarà bene, ma dalla versione 3.1)

Text-overflow indica all'utente se il testo è più lungo il contenitore di esso, contiene un piccolo riferimento al quale vi è più il testo.
In Normallfall semplicemente sotto forma di tre punti.

Devon Govett ha scritto un piccolo plugin jQuery che questa proprietà è ora disponibile per Firefox fa.
Soprattutto nel campo di CMS o simili, questo è interessante. Come è la manipolazione delle stringhe utilizzando PHP, ecc può dare.

Un semplice esempio:

  1

  ) . ellipsis ( true ) ; $ ("# ID"). Puntini di sospensione (true); 

Il plugin prende il suo qui , e la demo qui .

Mozilla Bespin - sulla base del codice redattore Web

È ciò che si agita nelle Mozilla Labs, che per progetti sperimentali a casa con Mozilla. Ci presenta Mozilla Bespin. Un servizio gratuito, scritto in JavaScript, editor di codice, che può essere azionata nel browser.
La bellezza di Bespin è che ogni utente può personalizzare l'editor in larga misura alle sue esigenze.

Il cervello alla base del progetto sono, tra le altre cose, i due Ajaxian.com fondatore Ben Galbraith e Dion Almaer.
Con lo sviluppo di Mozilla Bespin è il logico passo successivo in direzione di SaaS ( Software as a Service ) e fa così un ambiente di sviluppo
per le applicazioni web come disponibili online.
Molti vantaggi del modello Saas sono naturalmente anche di interesse per gli sviluppatori web. Accesso rapido a tutti i progetti da qualsiasi luogo, in collaborazione con facilità con altri sviluppatori e altro ancora.

Bespin è attualmente, come in precedenza prototipo sperimentale, in versione 0.1, prima, ed è solo un inizio. Lo scopo di Bespin è opportuno un dialogo aperto, struttura estensibile per la creazione di web-based e da codice, che aumenta la produttività degli sviluppatori.

Le caratteristiche principali includono:

• Real-Time Collaboration:
  Live Coding con i colleghi è di semplice e facile possibile.
• Integrato della riga di comando:
  Strumenti come vi o Emacs hanno aperto la strada e Bespin vuole utilizzare quella forza.
• Espandibile e Self-Hosted:
  Sia l'interfaccia e le capacità di utilizzare semplici comandi (come Ubiquity Nel suo esteso API) o il plug-in.
• Rapidità:
  Il trattamento dei file molto grandi a essere molto veloce.
• L'accesso da qualsiasi luogo:
  Gli sviluppatori riceveranno da qualsiasi luogo e qualsiasi dispositivo dotato di accesso via browser moderno.
• Facilità di utilizzo:
  Gli utenti troveranno la loro strada in modo rapido e può iniziare la codifica.

Link correlati:
http://labs.mozilla.com/2009/02/introducing-bespin/
https: / / bespin.mozilla.com /