jquerymobile : 일반적인 CSS 파일에서 jquerymobile 특정 속성을 정의 할 수 있습니까?

Question

내 header, content, footer 같은 정적 HTML 페이지 몇 개가 data-theme="b"을 가지고있는 것과 같은 jquerymobile 특정 특성을 적용하는 일종의 일반적인 CSS 파일을 갖고 싶습니다. 테마를 "a"로 변경하려면 각 섹션에서 모든 HTML을 편집해야합니다.

이 data-theme을 한 곳에서 정의 할 수 있습니까?

고마워, nehatha

Answer 1

그것은 간단합니다. jquery mobile css 파일을 만들고 편집 할 수 있습니다. 모든 학급 이름은 표준 ui-으로 시작해야합니다. 아래는 제 자신의 프로젝트를위한 "f"라고 불리는 새로운 테마입니다.

.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; 
}