jQuery Mobile - Domande di intervista

Si tratta di un framework di interfaccia utente basato su jQuery core e utilizzato per lo sviluppo di siti Web o applicazioni reattivi accessibili su dispositivi mobili, tablet e desktop.

• Crea applicazioni web in modo tale da funzionare allo stesso modo su dispositivi mobili, tablet e desktop.

• È compatibile con altri framework come PhoneGap, Whitelight ecc.

• Fornisce una serie di input per moduli touch friendly e widget dell'interfaccia utente.

• Offre funzionalità a tutte le piattaforme mobili, tablet e desktop e aggiunge caricamenti di pagine efficienti e un supporto più ampio per i dispositivi.

• È costruito su jQuery Core e framework dell'interfaccia utente "scrivi meno, fai di più".

• È un open source, cross platform e cross browser compatibile.

• È scritto in JavaScript e utilizza le funzionalità di jQuery e jQueryUI per la creazione di siti amichevoli per dispositivi mobili.

• Integra HTML5, CCS3, jQuery e jQueryUI in un unico framework per la creazione di pagine con script minimi.

• Include il sistema di navigazione Ajax che utilizza transizioni di pagine animate.

• È facile apprendere e sviluppare applicazioni se si conoscono le funzionalità HTML5 e CSS3.

• È compatibile con più piattaforme e più browser, quindi non devi preoccuparti di scrivere codice diverso per ogni risoluzione del dispositivo.

• Utilizza HTML5 insieme a JavaScript per un facile sviluppo di applicazioni web.

• È costruito in modo tale da consentire allo stesso codice di ridimensionarsi automaticamente dallo schermo del cellulare allo schermo del desktop.

• Ci sono opzioni limitate per i temi CSS in modo che i siti possano avere un aspetto simile che sono costruiti da questi temi.

• Le applicazioni sviluppate utilizzando jQuery Mobile sono più lente sui cellulari.

• Diventa più dispendioso in termini di tempo quando combini jQuery mobile con altri framework mobili.

• Difficile fornire un design visivo personalizzato completo.

• Custom Download : Per scaricare una versione personalizzata della libreria.

• Latest Stable: Per ottenere la versione stabile e più recente della libreria jQuery Mobile.

È possibile utilizzare i seguenti file CDN:

• <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

• <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script>

• <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>

<div data-role = "page" id = "pageone">
    <div data-role = "header">
      <h1>Header</h1>
    </div>

    <div data-role = "main" class = "ui-content">
      //content goes here
    </div>

    <div data-role = "footer">
      <h1>Footer</h1>
    </div>
</div>

Crea l'intestazione nella parte superiore della pagina.

Viene utilizzato per definire il contenuto della pagina.

Crea un piè di pagina nella parte inferiore della pagina.

Include il riempimento e il margine all'interno del contenuto della pagina.

È possibile includere più pagine nel singolo documento jQuery mobile che vengono caricate insieme aggiungendo più div con l'attributo data-role = "page".

Utilizza l'attributo data-dialog = "true" su qualsiasi pagina per visualizzare una finestra di dialogo.

L'attributo di transizione dei dati viene utilizzato per applicare le diverse transizioni nella finestra di dialogo come scorrimento, capovolgimento ecc.

Il pulsante può essere chiuso utilizzando l'attributo data-close-btn.

L'attributo data-rel = "back" viene utilizzato per navigare e tornare alla finestra di dialogo precedente.

Il tema può essere incluso nella finestra di dialogo aggiungendo attributo data-theme a qualsiasi contenitore come intestazione, piè di pagina o contenuto.

ui-corner-all

Puoi impostare l'icona nel pulsante usando la classe ui-icon e la classe ui-btn-icon-pos_name per specificare la posizione dell'icona.

Puoi aggiungere l'ombra dell'icona nel tuo pulsante utilizzando la classe ui-shadow-icon.

Puoi rimuovere il cerchio grigio attorno all'icona utilizzando la classe ui-nodisc-icon.

Usa la classe ui-grid-solo nel tag div per creare una griglia a colonna singola.

Aggiungi la classe ui-grid-a al tag div e includi due contenitori figlio con la classe ui-block-a e ui-block-b per creare un layout a due colonne.

Usa la classe ui-grid-b nel tag div per creare una griglia a tre colonne.

Usa la classe ui-grid-c nel tag div per creare una griglia a quattro colonne.

Usa la classe ui-grid-d nel tag div per creare una griglia a cinque colonne.

Crea un semplice pulsante di base nella pagina utilizzando la classe ui-btn.

Crea un gruppo di pulsanti verticalmente e orizzontalmente nella pagina utilizzando l'attributo data-role = "controlgroup".

Puoi creare un pulsante più piccolo nella pagina utilizzando la classe ui-mini e visualizzare la posizione delle icone nel pulsante utilizzando la classe ui-btn-icon-ico_pos.

Utilizza l'attributo data-role = "date" nel campo di input per visualizzare in formato gg / mm / aa.

Il pieghevole può essere creato utilizzando l'attributo data-role = "collapsible" a un contenitore.

È possibile visualizzare il gruppo di controllo utilizzando l'attributo data-role = "controlgroup".

Utilizzando l'attributo data-filter = "true", puoi filtrare i figli di qualsiasi elemento.

Flip Switch consente di disattivare / attivare o true / false l'interruttore facendo clic su di esso per l'input in stile booleano.

Il Listview viene utilizzato per visualizzare un elenco di elementi. l'attributo data-role = "listview" è incluso nel contenitore per visualizzare l'elenco nell'elenco scorrevole verticale.

Il widget Rangeslider fornisce un paio di maniglie che consentono di selezionare un intervallo di valori numerici.

Un evento risponderà all'interazione dell'utente quando l'utente fa clic su una determinata pagina o passa il mouse su un elemento, ecc.

Si attiva quando l'utente tocca un elemento utilizzando l'ID della pagina per specificare l'evento e il metodo on () allega i gestori di eventi.

Si attiva quando l'utente trascina orizzontalmente più di 30px su un elemento utilizzando l'ID della pagina per specificare l'evento e il metodo on () collega i gestori di eventi.

L'evento di inizio scorrimento si attiva quando l'utente inizia a scorrere la pagina e l'evento di arresto di scorrimento si attiva quando l'utente smette di scorrere la pagina utilizzando l'ID della pagina per specificare l'evento e il metodo on () allega i gestori di eventi.

È possibile attivare l'evento di orientamento quando l'utente ruota il dispositivo verticalmente o orizzontalmente utilizzando l' evento di cambio orientamento . Utilizza la proprietà window.orientation per specificare se la finestra o il dispositivo è impostato sull'orientamento verticale o orizzontale.

È possibile visualizzare il valore del cursore come un suggerimento utilizzando l'attributo data-popup-enabled = "true".

Il commutatore di colonna mette le colonne in un luogo nascosto e consente all'utente di selezionare le colonne secondo la propria scelta utilizzando l'attributo data-mode = "columntoggle".

Rappresenta i dati in formato orizzontale comprimendo la tabella in una rappresentazione impilata utilizzando l'attributo data-mode = "reflow".

È possibile visualizzare i set di dati in formato strisce e tratti utilizzando le classi table-stripe e table-stroke.

È possibile aumentare la qualità e la funzionalità degli input di testo impostando l'attributo data-enhanced = "true" nel campo di input.

Puoi cambiare il colore dell'icona in nero usando la classe ui-alt-icon. Per impostazione predefinita, tutte le icone sono bianche.

È stato sviluppato dal team del progetto jQuery nell'anno 2010 e scritto in JavaScript.

Indica se le pagine devono essere caricate tramite ajax o meno.