Панель инструментов jQuery для отображения заголовка

Я хотел бы создать панель инструментов с заголовком с помощью пользовательского интерфейса jQuery.

До сих пор у меня есть:

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/

Это выглядит действительно ужасно для панели инструментов с заголовком. Я хотел бы сделать его ширину: 100% и исправить кнопку, которая будет отображаться внутри панели инструментов.

Это возможно?

Вы должны предложить что-то проще и красивее?

Спасибо


html toolbar jquery css jquery-ui
person glarkou    schedule 10.07.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У вас все проблемы с CSS. Вы должны сделать панель инструментов div вместо span с разметкой CSS шириной 100%. Размер кнопки контролируется с помощью разметки размера шрифта CSS.

Вот код из вашего jsfiddle с 2 кнопками:

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();
});
person jyore    schedule 10.07.2011
comment
Большое спасибо, приятель. jsfiddle.net/CKvYv/94 Можете ли вы выровнять эти кнопки вправо, не меняя строку? - person glarkou; 10.07.2011
comment
@ntenisOT Нет проблем. Рад, что у тебя все получилось. - person jyore; 11.07.2011

arrow_upward
0
arrow_downward

Панель инструментов должна быть DIV, а CSS для #toolbar должен иметь ширину 100%. Это было бы началом.

person Brian Hoover    schedule 10.07.2011