Applicare i CSS per data-role=“page” jquerymobile

Ho questa pagina

<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">

<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/> 
    <link rel="stylesheet" type="text/css" href="application.css"/>

<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>

<script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", initApp, false);

</script>
</head>
<body>
<div data-role="page" id="start"> 

    ...

</div>
</body>

Ho letto qui che posso applicare gli stili per l’intero data-role=”page” contenitore facendo questo

.ui-page {
   background: #eee;
}

ma non funziona. Il mio sfondo per la pagina è sempre bianco. Io non voglio usare JQM stili. Come posso applicare il mio corpo-stili di jquery mobile “pagina”?

  • Di dove sei impostazione di questo stile?
  • la “domanda.css file, ho aggiunto l’intestazione
  • non aggiungere firme o slogan per i tuoi post.
  • per quanto ne so è necessario che la classe applicati su un elemento che si desidera che tali regole.
  • JQueryMobile sostituisce <div data-role="page"> con <div class="ui-page">.
  • mi permetta di riformulare questo poi, in modo che il mio suggerimento è più rilevante. Ehi dan che se si sposta dati-ruolo del tag body? se si assume che il div di compilare la larghezza e l’altezza della finestra, controllare le regole, e vedere come si applicano a html, il corpo e il vostro elemento div.
  • Non conforme ai JQueryMobile quadro, quindi.
  • dati ruolo del tag body non cambiare, io controllo che il lato è di css.
  • che cosa succede se si salta la conformità con jquery mobile per un secondo e basta guardare il css è di per sé, non ho il codice a guardare, ma. Se il presupposto che il div deve avere background-color:#eee; quando .ui-classe di pagina viene applicata ma non è questo che caso, consente quindi di codificare, e di esplorare l’elemento è di per sé, non solo per vedere se lo sfondo è applicato, ma se elemento di blocco si estende per riempire l’area.

InformationsquelleAutor | 2012-04-30

 

2 Replies
  1. 2

    .ui-content sarà stile data-role=area del contenuto. Così, per esempio, se si vuole lo stile di tutta l’area della pagina in questo modo:

    .ui-content, .ui-page{background: #eee;}

    Tenere a mente che si dovrà spostare il css sotto il JQM foglio di stile, come qualcun altro già suggerito.

    Qui è un esempio di lavoro http://jsfiddle.net/codaniel/7M4Pg/1/

    • questo è solo lo sfondo dell’area che contiene il testo, non l’intero sito
    • Ho aggiornato la mia risposta con un esempio che dovrebbe aiutare.
    • il suo strano in cui si applica lo sfondo dell’interfaccia utente-contenuto, ma non per ui-corpo
    • Che è strano, ho aggiunto un esempio di lavoro.
    • Ho inserito il mio codice nel fianco, funziona esiste, ma non nella mia app. Hmmmmmm
    • Hai fatto a modificare il tuo JQM css? Hai un tocco di stile per l’elemento, cioè <div data-role="page" style="background:#eee;">?

  2. 1

    È necessario spostare il application.css intestazione di seguito il quadro css file, perché i vostri stili vengono sovrascritti da un quadro di carico. In alternativa, è possibile aggiungere !important a sfondo regola, come background: #eee !important;, per evitare di essere sovrascritto da successivi fogli di stile.

    • la sua molto meglio e olistico per spostare l’applicazione.css poi iniziare ad aggiungere !importante bandiera.
    • Concordato, che è il motivo per cui ho elencato come alternativa, non il metodo principale =)
    • hmm per me non funziona, lo sfondo è ancora bianco
    • Mi metterà alla prova su diversi telefoni ora.

Lascia un commento