更改jQuery UIbutton大小？
我一直在我的页面上使用jQuery的UIbutton，但是我还没有find解决方法似乎是一个简单的问题。 我想让我的一些button比另一个小，这应该像设置button文本的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如何制作button上进行攻击。 有任何想法吗？
如果直接使用font-size ui-button-text样式，则可以通过应用！important来在更高级别覆盖它。 如：
.small-button { font-size: .8em !important; }
编辑：尝试直接在.ui-button-text上设置CSS样式来inheritance：
.ui-button-text { font-size: inherit !important; }
这也应该使得.small-button上的！重要无关。
这有助于减lessbutton的高度（平滑主题默认是行高为1.4）：
.ui-button .ui-button-text { line-height: 1.0; }
这是我在我的网站用来设置字体大小，以便我的button大小是相同的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元素的字体大小属性，设置字体大小的一切变得微不足道，因为100％= 10px。
注意使用百分比时的级联效果 – 子元素的100％将等于父元素的字体大小。
正如Tim所build议的那样，您可以通过修改jQuery生成的标记中的span元素的填充来创build不同大小的button。
这个标记/ 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的大小。
像这样..
button#some-id .ui-button-text { /* padding values here to your liking */ }
只要改变buttonfont-size;）。
<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />
现在添加一个jquery脚本到button
<script type="text/javascript" language="javascript"> $(document).ready(function () { $('input:submit, #btn2').button(); }); </script>
祝你好运。 ;）
我使用了上面两个build议的组合。 按照我喜欢的方式调整用户界面非常简单。
在页面的样式表中添加：
.ui-button .ui-button-text { padding: 0px 11px 0px 21px !important; font-size: .72em !important; }
我的解决scheme也需要在新的菜单项中工作
第一个select菜单和button的匹配元素
.menu>.ui-button-icon-only, .ui-button{ font-size:0.8em !important; }
而第二个如上强行反制
.ui-button-text { font-size: inherit !important; }
我做到了这一点，它工作正常。
$( "button" ).button("font-size", "0.8em");
在运行时使用jQuery，而不用修改CSS。 这给了你更多的灵活性。
$(function() { $("input[type=button]").css("font-size", "0.8em"); });
<input type="submit" value="Mostrar imágenes">
和我的CSS：
input[type="submit"] { color: #000; border: 0 none; cursor: pointer; height: 30px; width: 150px; }
