32

jQuery UIボタンの色を変更する簡単な方法はありますか？cssを変更することはドキュメントから推奨されておらず、とにかくそうすることは注意が必要です。「ThemeRollerツールを使用して、構築と保守が簡単なカスタムテーマを作成およびダウンロードすることをお勧めします」と彼らは言います。テーマを変更する方法は理解していますが、同じページに異なる色のボタンを表示するにはどうすればよいですか？

4

4 に答える 4

18

私はちょうどこれをしました：新しい色ボタンで新しいテーマを作成します。新しいテーマ画像フォルダから..hard..および..soft...グラデーションファイルをコピーします。メインテーマと混同しないように名前を変更します。最後に、ボタンにスタイルを追加します。これはグラデーションと色に対応しています...

緑色のボタンでこれを試しました。

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}
于 2011-02-15T15:42:51.950 に答える
8

最も簡単な方法は、ボタンに（さまざまな色の）クラスを追加してから、jquery-uicssを上書きするcssをいくつか作成することです。

例

var $button = $(document.createElement('a'));
//add class
$button.addClass('redButton');
//call the jquery-ui button function
$button.button();

Css

.ui-button.redButton {
    background-color: red;
}
.ui-button.greenButton {
    background-color: green;
}
于 2010-12-08T22:02:33.597 に答える
3

これを試して：

HTML：

<button type="button" id="change_color"> change button </button>

jQuery：

$("#change_color").css("background","green");
于 2014-09-02T04:03:06.013 に答える
0

JQueryUIボタンには2つ（3つ？）のタイプがあります。基本的に、次のようなボタンを作成します。

<span class="myButtons">Click here</span>

次に、JQueryUIにボタンであることを伝えます。

$('span.myButtons').button()

したがって、このマークアップを生成します。

<span class="myButtons ui-button ui-corner-all ui-widget" role="button">Click here</span>

そして、これを「クラシック」な方法でスタイリングできます:(.myButtons {}など.myButtons:hover {}）

だが ！

「ボタン」がcheckboxradioまたはcontrolgroupのいずれかである場合、それは別のマークアップです。

<fieldset>
  <legend>Select a Location: </legend>
  <label for="radio-1">New York</label>
  <input type="radio" name="radio-1" id="radio-1">
  <label class"danger" for="radio-2">Paris</label>
  <input type="radio" name="radio-1" id="radio-2">
  <label for="radio-3">London</label>
  <input type="radio" name="radio-1" id="radio-3">
</fieldset>

次に、この方法を適用すると、次のようになります。

$( "input" ).checkboxradio();

この生成されたマークアップを取得します（2番目の疑似ボタン「パリ」がチェック/クリックされます）：

<fieldset>
      <legend>Select a Location: </legend>
      <label for="radio-1" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>New York</label>
      <input name="radio-1" id="radio-1" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
      <label for="radio-2" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label ui-checkboxradio-checked ui-state-active"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>Paris</label>
      <input name="radio-1" id="radio-2" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
      <label for="radio-3" class="ui-checkboxradio-label ui-corner-all ui-button ui-widget ui-checkboxradio-radio-label"><span class="ui-checkboxradio-icon ui-corner-all ui-icon ui-icon-background ui-icon-blank"></span><span class="ui-checkboxradio-icon-space"> </span>London</label>
      <input name="radio-1" id="radio-3" class="ui-checkboxradio ui-helper-hidden-accessible" type="radio">
</fieldset>

そして、それらのクラスを使用して、疑似「ボタン」のスタイルを設定できます（必須ですか？）。

.ui-visual-focus {
  box-shadow: none;
}

label.ui-checkboxradio.ui-state-default {
  color: black;
  background-color: teal;
}

label.ui-checkboxradio.danger.ui-state-active {
  background-color: red;
}
于 2018-02-27T14:08:58.193 に答える