jquerymobile: можно ли определить специфические атрибуты jquerymobile в общем файле CSS - PullRequest
Новая
       3

jquerymobile: можно ли определить специфические атрибуты jquerymobile в общем файле CSS

0 голосов
/ 16 сентября 2011

Я хочу иметь общий тип css-файла для применения специфических атрибутов jquerymobile, таких как header, content, footer из нескольких статических html-страниц, имеющих data-theme="b". Если я хочу изменить тему на «а», я должен отредактировать все мои htmls в каждом разделе.

Могу ли я определить это data-theme в одном месте?

Спасибо, nehatha

1 Ответ

0 голосов
/ 17 сентября 2011

Все просто. Вы можете создавать и редактировать 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;
}
...