Ako odstránim predvolené formátovanie dialógového okna a použijem svoj vlastný CSS?
Môj pokus nefunguje veľmi dobre ...
<div data-role="dialog" id="confirm-clear" class="dialog-custom" >
<div data-role="content" >
<p>Some text.</p>
<p><a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a></p>
</div>
</div>
ÚPRAVA: A v mojom CSS:
.ui-dialog.dialog-custom {
background: repeat scroll 0 0 rgba(0,0,0,.5);
height:200px; /* this doesn"t do anything */
}
odpovede:
1 pre odpoveď č. 1jQM na dosiahnutie tohto cieľa používa rôzne štýlytematické témy, ako sú prechody webkitov a obrázky na pozadí s posunmi polohy na pozadí. Tiež zalomí niektoré prvky do prvkov div alebo vloží rozpätia atď. Pre rozloženie.
Na začiatok budete musieť použiť debugger ako naprNástroje pre vývojárov prehliadača Chrome a skontrolujte dialógové okno. Pod vypočítaným štýlom môžete vidieť svoje štýly a to, či sú prepísané, alebo ich efekt. Môžete tiež vidieť akékoľvek ďalšie prvky rozloženia, ktoré vkladá jQM, a vypínať štýly jQM, kým sa vaše štýly nedostanú do účinok.
Teraz môžete začať prepísať štýly jQM použitím! Important alebo upravením súborov CSS jQM
0 pre odpoveď č. 2
CSS predvolene používa najunikátnejší selektor a jQuery Mobile pravdepodobne používa jedinečnejší selektor. Môžete použiť !important kľúčové slovo, aby ste sa ubezpečili, že sa používajú vaše vyhlásenia CSS:
.ui-dialog.dialog-custom {
background : repeat scroll 0 0 rgba(0,0,0,.5);
height :200px !important;
}
Ak kontrolujete prvky pomocou vývojárskych nástrojov akoChrome Dev Tools alebo Firebug, môžete vidieť, aké štýly sa používajú a z akého pravidla CSS pochádzajú. To vám pomôže rozhodnúť sa o najlepšom spôsobe pridania štýlov do existujúceho rámca.
Nie som si istý dialógmi, ale pre widgety stránok, min-height Vlastnosť CSS prvku sa mení prostredníctvom rámca jQM. Môžete to obísť prepísaním jQM resize obsluha udalosti pre dialógové okná.