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

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

0 голосов
/ 10 июля 2011

Я хотел бы создать панель инструментов с заголовком в 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/

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

Возможно ли это?

Нужно ли предлагать что-то проще и красивее?

Спасибо

Ответы [ 2 ]

1 голос
/ 10 июля 2011

У вас все проблемы с 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();
});
0 голосов
/ 10 июля 2011

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

...