jQuery用户界面按钮填充倍率

HTML标记如下：jQuery用户界面按钮填充倍率

<button id="Refresh"><img src="refresh.png" /></button>

我建立这个按钮如用下面的代码一个jQuery用户界面按钮：

$("#Refresh").button();

调用此函数产生以下标记：

<button id="Refresh" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"> 
    <span class="ui-button-text"> 
     <img src="refresh.png"> 
    </span> 
</button>

这工作正常。结果是在jquery的CSS中定义了一个填充为.4em 1em;的按钮。（.ui-button-text-only .ui-button-text）

我在这个页面上有几个按钮，我喜欢这个填充大部分。但是，特别是这一个按钮，我想没有填充。我意识到我可以改变CSS为.ui-button-text-only和.ui-button-text，但这会使用这种风格搞砸其他按钮，我喜欢他们的方式。

所以我想知道是否有任何方法可以重写此css 只需一个按钮。我看了一下jquery's button docs，但它似乎没有允许使用按钮选项传递特定的CSS。

在此先感谢您的帮助！

来源

2012-06-07 Mansfield

您是否尝试过在创建按钮后添加类？ –

@JoshMein你的意思是试图重写jQuery的css类吗？如果是这样，是不是只是重写其他按钮的CSS？ – Mansfield

我打算给该特定按钮添加一个类。看看下面的答案。 –

您只需添加一个新的类跨度按钮内创建后。

$("#Refresh").button(); 
$("#Refresh").find('span.ui-button-text').addClass('yourClass');

来源

2012-06-07 15:47:01

你可以简单地使用CSS来设计它。为了确保它不会覆盖附加“！重要”

添加span标签

#Refresh span { 
    padding:0 !important; 
}

来源

2012-06-07 15:44:58 Thomas

不幸的是，这似乎并不奏效。我的猜测是因为它实际上并不是#Refresh风格，但是跨度jquery创建。 – Mansfield

试试我编辑的@Thomas的代码 – Ateszki

使用像'button＃Refresh span.ui-button-text'这样的选择器，它将按预期工作。 –

jQuery用户界面按钮填充倍率

回答

相关问题