jQuery Mobile / jQTouch Larghezza immagine

Question

Voglio avere un'immagine footer statica con 5 tasti per la navigazione nel mio sito cellulare. L'immagine è qui http://www.pintum.com.au/jm/footer3a.jpg . Le icone blu dovrebbero essere l'impostazione predefinita, l'icona gialla dovrebbe essere visibili solo per volo stazionario o lo stato attivo.

Vorrei sapere come posso fare questa scala immagine alla larghezza corretta su tutti i dispositivi mobili (orizzontale e verticale) e avere collegamenti ad altre pagine e rendere le pagine correnti / attiva l'icona del colore giallo?

Quello che ho provato finora

• ho cercato primo a fare una Sprite CSS, ma che vanno brutto (complessa) in fretta. lavoro doloroso con larghezze ovunque così la bilancia immagine correttamente come ho avuto modo di conoscere l'altezza in pixel poiché la larghezza è dinamica. Potrei usare JS per trovare la larghezza e l'altezza calcolare al volo. Ma questo suona come eccessivo.

• Poi ho cercato di avere una singola immagine con una larghezza di 100% poi posto div overlay sulla parte superiore dell'immagine. Ma con questa soluzione non riuscivo a capire come le pagine navigare utilizzando JavaScript evento click, o capire come sarei stato in grado di cambiare l'icona immagine sulla pagina selezionata http://jsbin.com/uraya5/3/ . E detrmining la giusta altezza per il div

• scorso ho provato a fare ogni pulsante un'immagine separata. Questi sembra il soultion easist. Ma jQuery Mobile aggiunge un sacco di stili in più per il pulsante non so come rimuovere. Vedere http://jsbin.com/uraya5/4

---

Così che cosa è l'/ modo più semplice per fare questo?

• Come posso rimuovere lo stile intorno link?
• O posso utilizzare una singola immagine CSS metodo porta scorrevole? Per ridurre richiesta HTTP.

Answer 1

Ok ho capito

Vedere soultion qui http://jsbin.com/uraya5/10/ Ho dovuto:

1. Imposta la larghezza al 19% di ciascun pulsante per qualche motivo viene spaziatura tra ogni tasto così il 20% non funziona.
2. Set ui-bar-sfondo per così nero nasconde gli spazi tra la mia immagini
3. Usa questo codice JS per le pagine navigate $ .mobile.changePage ($ ( "# su"), "Flip", true, true);

mi piace ancora di utilizzare una singola immagine, invece di avere 5 immagini differenti per ridurre le chiamate HTTP. Quindi, se qualcuno trova un soultion Eligant per questo per favore fatemelo sapere.