jQuery HowTo: Percorrere

Travesi appartiene agli strumenti di base, se volete fare animazioni utilizzando jQuery avanzate. Ecco una piccola guida per trovare elementi specifici.

Che cosa è successo qui? Base, questa struttura HTML:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19

  id="someParent" <div style="border: 1px punteggiata #ccc"> Parent
 <div>
  Child1
 </ Div>
 <div class="move">
  Child2
 </ Div>
 <div>
  Child3
 </ Div>
 <div class="move not">
  Child4
 </ Div>
 </ Div>

 <div id="someWrapper">
 id="testone" <a href="#"> Spostare tutti </ a>
 id="testtwo" <a href="#"> Move <filtrata / a>
 </ Div> 

Il seguente codice JavaScript esegue l'animazione. Sulla base del legame con i metodi del genitore "someWrapper" div selezionata, seleziona la voce prev precedente con la "someParent" e infine id essere con i bambini tutti gli elementi all'interno di "someParent selezionati.
L'ID nell'esempio sono puramente illustrativi. Gli elementi animati essere esclusivamente sulla struttura del DOM trovato.

codice jQuery per "Move tutti":

  1
 2
 3
 4

  ) . click ( function ( ) { jQuery ("# Testone"). click (function () (
     ) . parent ( ) . prev ( ) . children ( ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; jQuery (questo). genitore (). prev (). minori (). animati (('paddingLeft': '20px '), 200);
      ; return false;
 )); 

Ora per la versione avanzata. Essi si basano sulla funzione di jQuery, filtro e non.
codice jQuery per "Move filtrata":

  1
 2
 3
 4

 ) . click ( function ( ) { jQuery ( this ) . parent ( ) . prev ( ) . children ( ) . filter ( ".move" ) . not ( ".not" ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; return false ; } ) ; jQuery ("# testtwo"). click (function () (jQuery (questo). genitore (). prev (). minori (). filtro (". mossa") non. (". non"). animate (( 'paddingLeft': '20px '), 200;) return false;)); 

MyPass jQuery - password nascondendo iPhone-Style

Circa

altra sera ero seduto sul divano e mi ha voluto sul mio iPhone quando Facebook login, inserendo la password quando sono caduto su quel piccolo dettaglio, che è l'ingresso della password ancora più piacevole.

L'uno o l'altro i proprietari di iPhone sa cosa voglio dire. in campo sempre per un breve periodo di tempo della password per iscritto da ultimo il see point, di cui è ciò che dà più sicurezza gli utenti, ma che il suo ingresso non era corretto.

Ho pensato una cosa del genere potrebbe anche essere del tutto normale forme e quindi abbiamo scritto un piccolo plugin per jQuery che riproduce questo comportamento.

Come si usa

MyPass utilizza jQuery libreria Javascript jQuery .

Devi solo inserire i due file nella vostra intestazione.

  1
 2

 "_js/jquery.js" type = "text/javascript" ></ script > < script src = "_js/jquery.myPass-1.0.js" type = "text/javascript" ></ script > = "_js / Jquery.js" tipo "text = / javascript"> script </> = src "_js/jquery.myPass-1.0.js" <script tipo <Script src = "text / <javascript"> / script> 

Opzioni

Per attivare il plugin e dovete arrestarsi ora basta scrivere il seguente nell'intestazione

  1
 2
 3
 4
 5

  ) . myPass ( { $ ('. MyTextField'). MyPass ((
			 , : '% U2665 charReplace',
			 charDuration: 1000

	 )); 

• charReplace: qui è possibile impostare il segno le cui lettere sono sostituite sollen.Als punto di default è l'insieme standard. Gli altri caratteri possono essere trovate qui . Basta prendere le ultime 4 cifre del Unicode ed è u% precedente. % Ad esempio charReplace 'u2665' da usare al posto di un ♥ •.
• charDuration: Qui potete impostare il tempo come l'ultimo personaggio a comparire.

HTML

Nella parte HTML del vostro sito vi è ora semplicemente una casella di testo normale, dargli un nome e la classe che avete inserito in precedenza.

myTextField in questo caso..

  1
 2
 3
 4

 "test.php" method = "post" > < input class = "myTextField" name = "password" type = "text" /> < input name = "Send" type = "submit" value = "submit" /> </ form > azione <Form = metodo "test.php" = <input "post"> class = nome "myTextField" tipo "password" = = "text" /> nome di input <= "tipo Send" = "submit valore" = "submit "/> </ form> 

Dopo aver inviato il modulo, i dati possono essere facilmente processo ad esempio via PHP.

  1

 [ 'password' ] ; echo _POST ['$ password']; 

Download & Demo

Dimostrazione - Plugin in azione

Download - Tutti i file per il download

Sfalcio del prato senza erba - Google Code Parco giochi

Ancora e ancora si tratta per lo sviluppo di Webapps al fatto che un pezzo di codice come tutti indipendentemente dal progetto solo dopo che è stato progettato per essere installato. ci sono ambiente di prova piccolo a creare un locale piuttosto che dover, è possibile sul Google Code parco giochi romp.

I quadri più comuni JS (jQuery, jQuery UI, MooTools, Prototype, Dojo) sono rappresentati, come lo sono quasi tutte le API di Google. Alcuni esempi sono:

• Lingua API
• Earth API
• Maps API
• Calendar API
• Youtube API

Per tutte le API, ci sono piccoli esempi che possono essere eseguiti immediatamente. Un bel paio di chicche che costituiscono il collegamento diretto alla documentazione delle API così come della gestione integrata Firebug Lite per eseguire il debug. Il codice generato può essere quindi modificato o copiato come HTML.

Online generatore di miniature delle pagine web

Indipendentemente da tutti i quadri di JS, vorrei introdurre un piccolo servizio di volte, con il quale si può facilmente siti Thumbails rappresentano molto.
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 .