[英]jQuery toolbar to display title
I would like to create a Toolbar with title in using jQuery UI.我想使用 jQuery UI 创建一个带有标题的工具栏。
Until now I have:到目前为止,我有:
HTML: 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: CSS:
#toolbar {
padding: 10px 4px;
width: 500px
}
Javascript: Javascript:
$(function() {
$( "#Submit" ).button({
});
});
Link:关联:
http://jsfiddle.net/CKvYv/59/ http://jsfiddle.net/CKvYv/59/
It looks really aw-full for a toolbar with title.对于带有标题的工具栏来说,它看起来真的很糟糕。 I would like to make its width: 100% and fix the button to be shown inside the toolbar.
我想将其设置为 width: 100% 并修复要在工具栏内显示的按钮。
Is that possible?那可能吗?
Do you have to propose something easier and prettier?你必须提出一些更简单、更漂亮的建议吗?
Thanks谢谢
You are having all CSS problems.您遇到了所有 CSS 问题。 You should make the toolbar a div instead of span with CSS markup of 100% width.
您应该使用 100% 宽度的 CSS 标记将工具栏设为 div 而不是 span。 The button size is controlled through the CSS font-size markup.
按钮大小通过 CSS 字体大小标记进行控制。
Here is the code from your jsfiddle with 2 button:这是来自带有 2 个按钮的 jsfiddle 的代码:
HTML 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 CSS
#toolbar {
width: 100%;
padding-left : 4px;
}
#title {
padding : 0px 4px;
}
.ui-button {
font-size : 11pt;
}
JavaScript JavaScript
$(function() {
$( "#Submit" ).button();
$( "#Submit2" ).button();
});
The toolbar should be a DIV, and the CSS for #toolbar should have a width of 100%.工具栏应该是一个 DIV,#toolbar 的 CSS 应该有 100% 的宽度。 That would be a start.
那将是一个开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.