Differenza tra jQuery e jQuery Mobile?

92

Sono nuovo nello sviluppo del Web mobile e ho appena creato un'app mobile con PhoneGap, che utilizza un uso frequente di jQuery.

Ma c'erano naturalmente un paio di difetti relativi a come formattavo le cose e al modo in cui apparivano effettivamente sugli schermi dei dispositivi mobili con cui stavo testando, e nel tentativo di risolverli mi sono imbattuto in molti suggerimenti per semplificarmi le cose usando jQuery mobile.

Ora questo mi confonde: jQuery non aveva alcun rotolo nella formattazione. Questa era solo la mia conoscenza a livello di principiante del CSS mobile che ha causato i problemi.

Quindi cosa fa esattamente jQuery mobile e in cosa è diverso dal normale jQuery? Se conosco già jQuery, cosa sarà nuovo per me?

jquery jquery-mobile

— nome_utente_permanente
fonte

2

"Non potevo credere che nessuno l'avesse chiesto prima." In realtà lo hanno fatto: stackoverflow.com/q/6636388/368167

— Tamer Shlash

Cos'è il css mobile?

— Leggende

94

jQuery è progettato esclusivamente per semplificare e standardizzare lo scripting tra i browser. Si concentra sulle cose di basso livello: creazione di elementi, manipolazione del DOM, gestione degli attributi, esecuzione di richieste HTTP, ecc.

jQueryUI è un insieme di componenti e funzionalità dell'interfaccia utente costruite su jQuery (cioè ha bisogno di jQuery per funzionare): pulsanti, finestre di dialogo, cursori, schede, animazioni più avanzate, funzionalità di trascinamento della selezione.

jQuery e jQueryUI sono entrambi progettati per essere "aggiunti" al tuo sito (desktop o mobile): se desideri aggiungere una particolare funzionalità, jQuery o jQueryUI potrebbero essere in grado di aiutarti.

jQuery Mobile , tuttavia, è un framework completo. È pensato per essere il tuo punto di partenza per un sito mobile. Richiede jQuery e utilizza le funzionalità di jQuery e jQueryUI per fornire sia componenti dell'interfaccia utente che funzionalità API per la creazione di siti ottimizzati per i dispositivi mobili. Puoi ancora usarne quanto vuoi, ma jQuery Mobile può controllare l'intera visualizzazione in modo ottimizzato per i dispositivi mobili se lo consenti.

Un'altra importante differenza è che jQuery e jQueryUI mirano a essere un livello sopra il tuo HTML e CSS. Dovresti essere in grado di lasciare il tuo markup da solo e migliorarlo con jQuery. Tuttavia, jQuery Mobile fornisce modi per definire dove si desidera che i componenti appaiano utilizzando solo HTML, ad esempio (dal sito jQuery Mobile):

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

L' data-roleattributo indica a jQuery Mobile di trasformare questo elenco in un componente dell'interfaccia utente ottimizzato per i dispositivi mobili e gli attributi data-insete ne data-filterimpostano le proprietà, senza scrivere una sola riga di JavaScript. I componenti jQueryUI, d'altra parte, vengono normalmente creati scrivendo poche righe di JavaScript per istanziare il componente nel DOM.

— Stu Cox
fonte

come qualcuno che sta appena ora "passando" dall'interfaccia utente jQuery + sui siti Web basati su browser alla comprensione di jQuery Mobile per dispositivi mobili, devo dire che sto lottando per vedere come questa particolare risposta abbia ricevuto 41 voti positivi ma NESSUN commento. Indica specificamente nella sua spinta principale che a differenza di jQueryUI che è "costruito sopra jQuery", jQuery Mobile è "tuttavia, un framework completo". Questo è totalmente in contrasto con le altre risposte di seguito, che affermano (abbastanza accuratamente - penso!) Che jQuery Mobile richiede anche jQuery per funzionare, e sta aggiungendo alla mia confusione personale proprio ciò di cui ho bisogno .js e .css.

— Andy Lorenz

3

Scusa, hai ragione non ho chiarito che jQuery Mobile richiede anche jQuery - lo aggiornerò. Anche se tieni presente che la mia risposta non è davvero progettata per dirti come iniziare a utilizzare jQuery Mobile (non è quello che era la domanda originale), solo per fornire un'ampia panoramica delle differenze concettuali.

— Stu Cox

grande roba Stu, grazie per aver modificato la tua risposta che ora ha molto più senso. Potresti essere sorpreso di quanto sia difficile per i "neofiti di jquery mobile" iniziare - anche il sito web di jquerymobile non lo rende ovvio! Questo di per sé porta a un altro punto di confusione: quale versione di jquery richiede jquerymobile? Al momento della stesura di jquerymobile.com implica solo che 1.4.2 è compatibile con jQuery 1.8 - 1.10 / 2.0 - ma non riesco a trovare da nessuna parte dove le versioni e le dipendenze js / css siano specificatamente dichiarate!

— Andy Lorenz

28

Che cos'è jQuery mobile

JQM (jQuery mobile) è un sistema di interfaccia utente per telefoni cellulari che si basa su jQuery. jQuery è necessario affinché JQM funzioni. A differenza di altri framework di telefoni cellulari simili, JQM ha come obiettivo il supporto per tutte le principali piattaforme mobili, tablet, e-reader e desktop e non solo per i browser webkit mobili. Una delle caratteristiche più notevoli del framework è il sistema di navigazione Ajax che utilizza transizioni di pagine animate (molto interessante).

Cosa potrebbe esserci di nuovo per te

Una cosa di JQM che lancia una palla curva ai nuovi utenti è la navigazione ajax. Provenendo da jquery, probabilmente sei abituato a includere il tuo javascript in ogni pagina e quindi a utilizzare dom ready ( $(function(){ ... }o $(document).ready(function(){ .... }) per avviare tutte le tue divertenti attività javascript. Ma poiché JQM utilizza la navigazione ajax, il sistema inserirà altre pagine nello stesso dominio della prima pagina e non caricherà gli script contenuti nel file <head>. Quando la pagina successiva viene caricata tramite ajax, noterai che le tue cose all'interno $(function(){ ...}non funzioneranno nella seconda pagina. La soluzione a questo problema è vincolante per l'evento pageinit. Questi seguenti esempi ti aiuteranno all'inizio del tuo viaggio:

$(document).on('pageinit', function(){ // this fires for each new page

});

Per scegliere come target una determinata pagina, aggiungi l'ID della pagina:

$(document).on('pageinit','#page2', function(){ // this fires for #page2 only 

});

Capire gli eventi della nuova pagina ti aiuterà molto quando inizi con JQM. http://jquerymobile.com/demos/1.1.0/docs/api/events.html Buona fortuna!

— codaniel
fonte

5

jQuery è un framework JavaScript che manipola / attraversa DOM e AJAX. Astrae automaticamente gran parte della complessità tra i diversi browser. Esistono innumerevoli plugin jQuery che semplificano molte attività.

jQuery Mobile è un framework UI orientato alle applicazioni mobili basato su jQuery. Ha componenti di temi e interfaccia utente.

In tutto, sono gratuiti. Non è necessario utilizzare jQuery Mobile per utilizzare jQuery. Ma per usare jQuery Mobile, devi usare jQuery.

— Daniel A. White
fonte

Quindi potresti dire che jQuery Mobileè la versione mobile di jQuery UI?

— Jeff Hines

@ JeffHines - un po '. sono basi di codice differenti, ma raggiungono obiettivi simili in modi differenti.

— Daniel A. White

Commenti eccellenti, Daniel A. White. Non è necessario utilizzare jQuery Mobile per utilizzare jQuery. Ma per usare jQuery Mobile, devi usare jQuery.

— user3174782

Una versione alpha è ora in lavorazione. jquerymobile.com/changelog/1.5.0-alpha1

— Jackson Ng

2

Non ho abbastanza punti per commentare sopra, quindi aggiungi al thread per rispondere alla seconda domanda di dipendenze di Andy.

Credo che quello che stai cercando sia qui: jQuery Mobile Demo

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-    [version].min.css" />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>
    ...content goes here...
</body>
</html>

— TransitDataHead
fonte