jquery mobile: Puis-je définir des attributs jquery mobile spécifiques dans un fichier css commun

Question

Je veux avoir une sorte de fichier css commun de chose à appliquer des attributs jquery mobile spécifiques comme mon header, content, footer de plusieurs pages html statiques ont data-theme="b". Si je veux changer le thème en "a", je dois éditer tous mes htmls dans chaque section.

Puis-je définir ce data-theme à un endroit commun?

Merci, nehatha

Answer 1

Il est simple. Vous pouvez créer et éditer le fichier css mobile de jquery. Et tout le nom de votre classe devrait commencer comme standard ui-. Voici mon nouveau thème appelé "f" pour mon propre projet.

.ui-bar-f { 
    border: 1px solid  #915a36; 
    background:    #ab6043; 
    color:     #ffffff; 
    font-weight: bold; 
    text-shadow: 0 -1px 1px #000000; 
    background-image: -moz-linear-gradient(top, 
          #ab6043, 
          #804000); 
    background-image: -webkit-gradient(linear,left top,left bottom, 
     color-stop(0, #ab6043), 
     color-stop(1, #804000)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ab6043', EndColorStr='#804000')"; 
} 
.ui-bar-f, 
.ui-bar-f input, 
.ui-bar-f select, 
.ui-bar-f textarea, 
.ui-bar-f button { 
    font-family: Helvetica, Arial, sans-serif;` 
} 
.ui-bar-f .ui-link-inherit { 
    color:     #fff; 
} 
.ui-bar-f .ui-link { 
    color:     #7cc4e7; 
    font-weight: bold; 
} 
.ui-body-f { 
    border: 1px solid  #915a36; 
    background:    #d99e79; 
    color:     #000; 
    text-shadow: 0 1px 0 #f1f1f1; 
    font-weight: normal; 
    background-image: -moz-linear-gradient(top, 
          #faeee8, 
          #faeee8); 
    background-image: -webkit-gradient(linear,left top,left bottom, 
     color-stop(0,  #faeee8), 
     color-stop(1,  #faeee8)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#faeee8', EndColorStr='#faeee8)')"; 
} 
.ui-body-f { 
    font-family: Helvetica, Arial, sans-serif; 
} 
.ui-body-f input, 
.ui-body-f search, 
.ui-body-f select, 
.ui-body-f textarea, 
.ui-body-f button { 
    font-family: Helvetica, Arial, sans-serif; 
    color:#0000a0; 
} 
.ui-body-f .ui-link-inherit { 
    color:     #fff; 
} 
.ui-body-f .ui-link { 
    color:     #915a36; 
    font-weight: bold; 
} 
.ui-br { 
    border-bottom: rgb(130,130,130); 
    border-bottom: rgba(130,130,130,.3); 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
} 
.ui-btn-up-f { 
    border: 2px solid  #754e35; 
    background:    #400040; 
    font-weight: bold; 
    color:     #fff; 
    text-shadow: 0 -1px 1px #000; 
    background-image: -moz-linear-gradient(top, 
          #dd6f00, 
          #400040); 
    background-image: -webkit-gradient(linear,left top,left bottom, 
     color-stop(0,  #dd6f00), 
     color-stop(1,  #400040)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d20000', EndColorStr='#400000')"; 
} 
.ui-btn-up-f a.ui-link-inherit { 
    color:     #f0f0f0; 
} 
.ui-btn-hover-f { 
    border: 2px solid  #734a37; 
    background:    #d99e79; 
    font-weight: bold; 
    color:     #000000; 
    text-shadow: 0 -1px 1px #f0f0f0; 
    background-image: -moz-linear-gradient(top, 
          #edd1c0, 
          #d99e79); 
    background-image: -webkit-gradient(linear,left top,left bottom, 
     color-stop(0,  #edd1c0), 
     color-stop(1,  #d99e79)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#edd1c0', EndColorStr='#d99e79')"; 
} 
.ui-btn-hover-f a.ui-link-inherit { 
    color:     #000; 
} 
.ui-btn-down-f { 
    border: 2px solid  #000; 
    background:    #3d3d3d; 
    font-weight: bold; 
    color:     #fff; 
    text-shadow: 0 -1px 1px #000; 
    background-image: -moz-linear-gradient(top, 
          #edd1c0, 
          #d99e79); 
    background-image: -webkit-gradient(linear,left top,left bottom, 
     color-stop(0,  #edd1c0), 
     color-stop(1,  #d99e79)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#edd1c0', EndColorStr='#d99e79')"; 
} 
.ui-btn-down-f a.ui-link-inherit { 
    color:     #fff; 
} 
.ui-btn-up-f, 
.ui-btn-hover-f, 
.ui-btn-down-f { 
    font-family: Helvetica, Arial, sans-serif; 
    text-decoration: none; 
    font-size:19px; 
}