jquery mobile przycisk kolor tła

Question

tutaj jest mój kod jQuery telefonu przycisk

<a href="#" data-role="button" style="color:green; background-color:red";> 
    Search 
</a> 

Chcę zmienić kolor tła przycisku, próbowałem stylu inline, ale jej nie działa jednak zmiany koloru tekstu normalnie.

dziękuję

Answer 1

Style mobilne JQuery są stosowane przy użyciu motywów. Gdy do kontenera zostanie dodane łącze, automatycznie zostanie mu przypisana listka motywu, która pasuje do paska nadrzędnego lub zawartości, aby wizualnie zintegrować przycisk z kontenerem nadrzędnym, na przykład kameleon.

Tak więc przycisk umieszczony wewnątrz kontenera treści z motywem "a" (czarny w domyślnym motywie) zostanie automatycznie przypisany do motywu przycisku "a" (węgiel w domyślnym motywie).

Tutaj można wyświetlić istniejące motywy. http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-themes.html

Jeśli chcesz stworzyć swój własny można użyć wałka tematu: http://jquerymobile.com/themeroller/

Źródło: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/themes.html

Answer 2

jQuery Komórka zainicjowany widżety i dodaje strukturę HTML po dokonaniu link do przycisku. Można użyć tej struktury kierować widgety guzików i ich elementów potomnych, aby zmienić styl chcemy zmienić:

HTML -

<a class="my-btn" data-role="button" href="#"> 
    Search 
</a> 

CSS -

.ui-page .ui-content .ui-btn.my-btn .ui-btn-inner { 
    color  : green; 
    background : red; 
}​ 

ta jest kierowana na .ui-btn-inner element będący potomkiem elementu a.ui-btn (oryginalnego łącza, do którego dodano klasę my-btn), która znajduje się w pseudo-stronie jQuery Mobile i ustawia ją jako background, a tekst color.

Oto demo: http://jsfiddle.net/WZ9pf/

Kolor tekstu pracował dla Ciebie wcześniej, ponieważ jest ona dziedziczona przez elementy potomka, więc jeśli ustawisz tekst color na elemencie body na przykład, wszystkie elementy otrzymają ten tekst color jeśli nie określisz kolejnego w drzewie.

więc można zobaczyć, co jQuery Komórka robi na link, który zostanie zamieniony na guzik, tutaj jest to, co okazuje powyższe HTML do:

<a href="#" data-role="button" class="my-btn ui-btn ui-btn-corner-all ui-shadow ui-btn-hover-c ui-btn-up-c" data-theme="c"> 
    <span class="ui-btn-inner ui-btn-corner-all"> 
     <span class="ui-btn-text"> 
      Search 
     </span> 
    </span> 
</a> 

także, jeśli chcesz tworzyć gradienty łatwo, tutaj jest doskonałym narzędziem: http://www.colorzilla.com/gradient-editor/

Oto czerwona Wyciągnąłem z gotowych gradientów: http://jsfiddle.net/WZ9pf/1/

Answer 3

Wystarczy użyć „background:” zamiast „background-color:”

<a href="[url]" data-role="button" style="background: green; color: white;">Search</a> 

Testowany i działa jak czar.

Answer 4

Oto przykładowy przycisk "czerwony".

Wystarczy dodać dane-theme = „F” do tagu przycisk, a następnie może to być metoda zalecana w którym można tworzyć własne przyciski tematycznie stanie

.ui-btn-up-f, .ui-btn-hover-f, .ui-btn-down-f { 
    color: white; 
    font-weight: bold; 
    text-decoration: none; } 

.ui-btn-up-f { 
    border: 1px solid #711414; 
    background: #ab2525; 
    text-shadow: 0 -1px 1px #711414; 
    background-image: -moz-linear-gradient(top, #c44f4f, #ab2525); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c45e5e), color-stop(1, #9e3939)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#c44f4f', EndColorStr='#ab2525')"; } 

.ui-btn-hover-f { 
    border: 1px solid #6e0000; 
    background: #b54a4a; 
    text-shadow: 0 -1px 1px #690101; 
    background-image: -moz-linear-gradient(top, #d47272, #b54a4a); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d47272), color-stop(1, #b54a4a)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d47272', EndColorStr='#b54a4a')"; } 

.ui-btn-down-f { 
    border: 1px solid #782323; 
    background: #c44f4f; 
    text-shadow: 0 -1px 1px #782323; 
    background-image: -moz-linear-gradient(top, #9e3939, #c44f4f); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9e3939), color-stop(1, #c44f4f)); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9e3939', EndColorStr='#c44f4f')"; } 

Kod referencyjny od https://gist.github.com/1057852

Answer 5

Jeżeli przycisk jest zdefiniowany jako:

<button type="button" id="yourbutton">Hello</button> 

to kod, aby ustawić tło jest:

$('#yourbutton').parent().find('.ui-btn-inner').css("background-color",highcolor); 

Answer 6

trzeba zastąpić nie tylko kolor tła, ale gradient background-image do koloru, który chcesz to działa idealnie dla mnie

.ui-btn { 
    background: #00BCD4; 
    background-image: -moz-linear-gradient(top, #00BCD4, #00BCD4); 
    background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #00BCD4), color-   stop(1, #00BCD4)); 
    color:#FFFFFF; 
    text-shadow:0px 0px 0px ; 
    font-size: 40px; 
    border: none; 

}

Answer 7

<button class="my-btn">submit</button> 

css

.my-btn { 
    background:#ea5514 !important; 
    color:#ffffff !important; 
}​