我想使用 jQuery UI 创建一个带标题的工具栏。
到目前为止,我有:
HTML:
<div class="demo">
<span id="toolbar" class="ui-widget-header ui-corner-all">
<label>go to beginning</label>
<button id="Submit">Submit</button>
</span>
</div>
CSS:
#toolbar {
padding: 10px 4px;
width: 500px
}
Javascript:
$(function() {
$( "#Submit" ).button({
});
});
链接:
对于带标题的工具栏来说,它看起来真的很棒。我想将其设置为 width: 100% 并修复要在工具栏内显示的按钮。
这可能吗?
你必须提出更简单、更漂亮的建议吗?
谢谢
最佳答案
您遇到了所有 CSS 问题。您应该使用 100% 宽度的 CSS 标记将工具栏设为 div 而不是 span。按钮大小通过 CSS 字体大小标记控制。
这是带有 2 个按钮的 jsfiddle 中的代码:
HTML
<div class="demo">
<div id="toolbar" class="ui-widget-header ui-corner-all">
<label id="title">go to beginning</label>
<button id="Submit">Submit</button>
<button id="Submit2">Submit2</button>
</div>
CSS
#toolbar {
width: 100%;
padding-left : 4px;
}
#title {
padding : 0px 4px;
}
.ui-button {
font-size : 11pt;
}
JavaScript
$(function() {
$( "#Submit" ).button();
$( "#Submit2" ).button();
});
关于显示标题的 jQuery 工具栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6641423/