web-dev-qa-db-ja.com

jqueryモバイルボタンの背景色

ここにjqueryモバイルボタンの私のコードがあります

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

ボタンの背景色を変更したいのですが、インラインスタイルを試しましたが、テキストの色が通常どおりに変更されません。

ありがとう

jquerycssjquery-mobile
11
h_a86

「background-color：」の代わりに「background：」を使用してください

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

それをテストし、それは魅力のように動作します。

19
user1182155

jQuery Mobileはウィジェットを初期化し、ボタンにリンクを作成するとHTML構造を追加します。この構造を使用して、ボタンウィジェットとその子孫要素をターゲットにして、変更するスタイルを変更できます。

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

これは、.ui-btn-inner要素の子孫であるa.ui-btn要素（my-btnクラスを追加した元のリンク）をターゲットにします。これは、jQuery Mobile疑似ページにあり、 backgroundとテキストcolorです。

ここにデモがあります： http://jsfiddle.net/WZ9pf/

テキストの色は子孫要素に継承されるため、以前は機能していました。たとえば、color要素にテキストbodyを設定すると、すべての要素がそのテキストを受け取りますcolorツリーのさらに下で別のものを指定しない場合。

したがって、ボタンに変換されるリンクに対してjQuery Mobileが何を行うかを確認できます。上記のHTMLは次のようになります。

<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>

また、、グラデーションを簡単に作成したい場合は、次のツールが最適です。 http://www.colorzilla.com/gradient-エディター/

これは、事前に作成したグラデーションから取り出した赤いものです。 http://jsfiddle.net/WZ9pf/1/

8
Jasper

これが「赤い」ボタンのサンプルです。

Data-theme = "f"をボタンタグに追加するだけで、独自のテーマ対応ボタンを作成できる推奨される方法になります

.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')"; }

https://Gist.github.com/1057852 からのコード参照

3
theunexpected1

JQueryモバイルスタイルはすべてテーマを使用して適用されます。リンクがコンテナーに追加されると、親バーまたはコンテンツボックスと一致するテーマ見本文字が自動的に割り当てられ、ボタンをカメレオンのように親コンテナーに視覚的に統合します。

したがって、「a」（デフォルトのテーマでは黒）のテーマを持つコンテンツコンテナー内に配置されたボタンには、「a」（デフォルトのテーマでは木炭）のボタンテーマが自動的に割り当てられます。

ここで既存のテーマを表示できます。 http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-themes.html

独自に作成したい場合は、テーマローラーを使用できます。 http://jquerymobile.com/themeroller/

ソース： http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/themes.html

2
benni_mac_b

ボタンが次のように定義されている場合：

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

次に、背景を設定するコードは次のとおりです。

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

背景色だけでなく、背景画像のグラデーションを、私にとって最適な色に上書きする必要があります。

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

}

0
Eng.Mohamed ayed
<button class="my-btn">submit</button>

cSS

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