Come nascondere un ingresso in Jquery

September 16

HTML ha più controlli di input, come caselle di testo e pulsanti di opzione. Questi controlli danno la vostra applicazione la capacità di comunicare con i visitatori del sito e raccogliere dati. JQuery, una potente libreria di script, consente di nascondere e mostrare controlli di input rapidamente utilizzando poche righe di codice JavaScript. Basta aggiungere la libreria jQuery al tuo documento HTML per cominciare ad esplorare le sue caratteristiche di programmazione per risparmiare tempo.

istruzione

1 Visita il sito di download Jquery. Viene visualizzata una pagina che visualizza il codice jQuery.

2 Premere il tasto "Ctrl" e "S." Si apre una finestra "Salva con nome". Questa finestra visualizza le cartelle sul disco rigido. Passare alla cartella in cui si desidera salvare il file e fare clic su "Salva". Windows salva a tale cartella.

3 Avviare Blocco note o l'editor HTML e aprire un documento HTML.

4 Aggiungere la seguente riga di codice alla sezione "testa" del documento:

<Script type = "text / javascript"> </ script>

Sostituire "C: \ MyFolder" con il nome del percorso completo della cartella in cui è stato salvato il file di jQuery. Per esempio, se si è salvato in una cartella denominata "Test" sull'unità "C", rendere la riga di codice appaiono come segue:

: <Script type = "text / javascript"> </ script>

5 Inserire il codice riportato di seguito nella sezione "corpo" del documento:

<Input id = "Input1" type = "text" />

<Input type = valore "pulsante" = "Nascondi ingresso" onclick = "return hideInput ( 'Input1', 'nascondere')" />

<Input type = "button" value = "Mostra ingresso" onclick = "tornare hideInput ( 'Input1', 'show')" />

La prima istruzione aggiunge un ingresso di controllo "casella di testo" alla pagina. Il suo valore id è "Input1." L'istruzione successiva crea un pulsante che chiama una funzione JavaScript quando si fa clic. L'evento tasto click superato l'ID del controllo di input, "Input1", insieme con la parola "nascondere". L'ultima affermazione chiama la stessa funzione, ma passa la parola "spettacolo", invece di quella funzione.

6 Aggiungere il seguente codice JavaScript alla sezione "script" del documento:

Funzione hideInput (inputID, azione) {

var inputIDval = "#" + inputID

se (== azione 'nascondere')

$ (InputIDval) .nascosto ();

altro

$ (InputIDval) .Show ();

}

L'evento tasto click-chiama questa funzione. La prima riga di codice aggiunge "#" al valore id ingresso. In questo esempio, il valore risultante è "# Input1" perché gli eventi button-click passano "Input1" alla funzione. La variabile "inputIDval" tiene quel valore. Il "$ (inputIDval) .nascosto ()" dichiarazione nasconde il controllo di input, se il valore di "azione" è "nascondere". In caso contrario, il codice mostra il controllo di input eseguendo il comando ".Show () $ (inputIDval)".

7 Salvare il documento. Avviare il browser e aprire il file. Il controllo di input e il pulsante vengono visualizzati nella pagina Web.

8 Fare clic sul pulsante "Hide". La funzione JavaScript chiama la funzione "Nascondi" di jQuery, causando il controllo di input a scomparire. Fare clic sul pulsante "Show". Il controllo ritorna.

Consigli e avvertenze

  • Questo esempio dimostra Jquery codifica utilizzando un controllo di input casella di testo. Per nascondere qualsiasi altro tipo di controllo di input, passare il suo valore id alla funzione "hideInput" come mostrato in questi passaggi. Far passare la parola "nascondere" o "mostrare" a seconda se si desidera nascondere il controllo o farlo riapparire.
  • Jquery consente di eseguire compiti compiti più complessi che semplicemente nascondere oggetti .. Utilizzando codice minimo, è possibile animare gli oggetti e anche cambiare il contenuto della pagina Web in tempo reale. Visita la pagina di documentazione Jquery per esplorare le sue capacità di programmazione avanzate.