更改jQuery UI按钮大小？

Question

我一直在我的页面上使用jQuery UI按钮,但是我还没有找到解决似乎是一个简单问题的方法.我希望我的一些按钮比另一个小,这应该像设置按钮文本的CSS一样简单,font: .8em;但是jQuery UI采用你的DOM元素并包装它:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

因此,如果我有一个<button class="small-button">Small button!</button>jQuery将文本放在子跨度.给予small-button该类的任何字体大小都将被忽略.

必须要解决这个问题,而不要犹豫jQuery如何制作按钮.有任何想法吗？

Answer 1

如果它的造型ui-button-text与font-size直接,你可以通过应用在更高层次上覆盖它!重要的.如:

.small-button {
   font-size: .8em !important;
}

编辑:尝试直接设置CSS样式.ui-button-text继承:

.ui-button-text {
   font-size: inherit !important;
} 

这也应该使!重要的是.small-button无关紧要.

Answer 2

这有助于减少按钮的高度(平滑度主题默认为行高1.4):

.ui-button .ui-button-text
{
 line-height: 1.0;
}

Answer 3

以下是我在我的网站中使用的设置字体大小,以便我的按钮大小与jQuery UI网站上的相同.这是有效的,因为它正是jQuery UI网站的功能!

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

通过设置body元素的font-size属性,为其他所有内容设置font-size变得微不足道,因为100%= 10px.

在使用百分比时,请注意级联效果 - 子元素的100%将等于父元素的字体大小.

Answer 4

Tim建议,你可以通过修改jQuery生成的标记中包含的span元素的填充来创建不同大小的按钮.

这个标记/ JavaScript ......

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

这个转换标记的结果......

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>

其中最肯定包括最初提供的id和class标签.您可以通过向span.ui-button-text元素添加更多填充来修改按钮的大小.

像所以......

button#some-id .ui-button-text {
    /* padding values here to your liking */
}