Javascript 更改 jQuery UI 按钮大小？

Changing jQuery UI Button size?

提问by chum of chance

I've been using the jQuery UI button all over my page, however I haven't found a way around what seems to be a simple problem. I want some of my buttons to be smaller than the other, this should be as simple as setting the CSS of the button text to something like, font: .8em;However jQuery UI takes your DOM element and wraps it:

我一直在整个页面上使用 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>

So if I have a <button class="small-button">Small button!</button>jQuery will place the text in a child span. Any font size given to the small-buttonclass will be ignored.

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

There's got to be a way around this without hacking at how jQuery makes its buttons. Any ideas?

必须有一种方法来解决这个问题，而无需破解 jQuery 如何制作其按钮。有任何想法吗？

采纳答案by rickp

If it's styling ui-button-textwith font-sizedirectly, you can override it at a higher level by applying !important. Such as:

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

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

EDIT: try setting a CSS style directly on .ui-button-textto inherit:

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

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

This should also make the !important on the .small-buttonirrelevant.

这也应该使 !important 变得.small-button无关紧要。

回答by Tim

This helped decrease the height of the button for me (Smoothness theme default is line-height of 1.4):

这有助于降低按钮的高度（平滑主题默认为 1.4 的行高）：

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

回答by Dean

Here is what I use in my websites to setup the font-sizes so that my button sizes are the same as on the jQuery UI website. This works because it's exactly how the jQuery UI websitedoes it!

这是我在我的网站中使用的设置字体大小的方法，以便我的按钮大小与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;
}

By setting the font-size properties like that for the body element, setting the font-size for everything else becomes trivial as 100% = 10px.

通过为 body 元素设置类似的 font-size 属性，将其他所有内容的 font-size 设置为 100% = 10px 就变得微不足道了。

Just watch out for the cascading effect when using percentages - a child element's 100% will be equal to the parent element's font-size.

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

回答by Derek Adair

You can create different sized buttons by modifying the padding of the span element that is contained within the markup jQuery generates, as Tim suggests.

正如 Tim 建议的那样，您可以通过修改包含在 jQuery 生成的标记中的 span 元素的填充来创建不同大小的按钮。

This markup/JavaScript...

这个标记/JavaScript...

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

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

Results in this transformed markup...

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

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

Which most certainly includes the idand classtags which were originally supplied. You can modify the size of your buttons by adding more padding to the span.ui-button-textelement.

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

Like So..

像这样..

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

回答by xxx

Just change the button font-size ;).

只需更改按钮字体大小;)。

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />

Now add a jquery script to the button

现在向按钮添加一个 jquery 脚本

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input:submit, #btn2').button();
        });
    </script>

Good Luck. ;)

祝你好运。;)

回答by TrophyGeek

I used a combination of two suggestions above. It's pretty easy to tweak the UI just the way I like it.

我使用了上面两个建议的组合。按照我喜欢的方式调整 UI 非常容易。

To page's stylesheet add:

在页面的样式表中添加：

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}

回答by Benno

My solution needed to work across the new menu items as well

我的解决方案也需要跨新菜单项工作

The first to select the matching elements for both menu and button

第一个为菜单和按钮选择匹配元素

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

And the second as above to force inheiritance

和上面的第二个强制继承

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

回答by KungFuMonkey

I did this and it works fine.

我这样做了，效果很好。

$( "button" ).button("font-size", "0.8em");

回答by Marinha do Nascimento

<input type="submit" value="Mostrar imágenes">

<input type="submit" value="Mostrar imágenes">

and my css:

和我的CSS：

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }

回答by Dmitri K

Use jQuery at runtime, without modifying CSS. This gives you a lot more flexibility.

在运行时使用 jQuery，无需修改 CSS。这为您提供了更大的灵活性。

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});