显示标题的 jQuery 工具栏

Question

我想使用 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({
    });
 });

链接:

http://jsfiddle.net/CKvYv/59/

对于带标题的工具栏来说，它看起来真的很棒。我想将其设置为 width: 100% 并修复要在工具栏内显示的按钮。

这可能吗？

你必须提出更简单、更漂亮的建议吗？

谢谢

Answer 1

您遇到了所有 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();
});