в Jquery mobile - изменить размер кнопки в заголовке - PullRequest
Новая
       0

в Jquery mobile - изменить размер кнопки в заголовке

0 голосов
/ 24 января 2012

я пытаюсь добавить инфо кнопку "i" в заголовок слева.

Я сделал это, но кнопка выглядит очень маленькой и не в центре высоты заголовка. это код заголовка: 

<div data-role="header" data-position="fixed">
    <a href="#" data-role="button" data-icon="info" data-iconpos="notext"></a>
    <div>           
        <h2 style="text-align: center">something written here</h2>
    </div>      
</div><!-- /header -->

Я хочу увеличить информационную кнопку «i», а также поместить ее слева и в центр высоты строки заголовка. как я могу это сделать?

Спасибо

Ответы [ 2 ]

1 голос
/ 24 января 2012

Следующий правильный синтаксис

Удалите div вокруг h2, это испортит jquery css.

Попробуйте изменить h2 на h1.Таким образом, кнопка окажется в центре высоты слушателя.

Попробуйте задать класс кнопки ... class = "ui-btn-left" 

<div data-role="header" data-position="inline">
    <a href="index.html" data-icon="delete" class="ui-btn-left" >Button Left</a>
    <h1>Edit Contact</h1>
    <a href="index.html" data-icon="check" class="ui-btn-right" >Button Right</a>
</div>
0 голосов
/ 24 января 2012

Live Пример:

JS: 

// For all buttons use something like this
$('.ui-btn').css('width','50%');

// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');

// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');

ОБНОВЛЕНИЕ: (Я думаю, это то, что вы ищете) 

// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');

// This changes the height for a single element 
$('#hrefButton3').children().children().css('font-size','30px');

HTML: 

<div data-role="page" id="home"> 
    <div data-role="content">
        <input type="button" id="theButton1" value="Press Me 1" />
        <input type="button" id="theButton2" value="Press Me 2" />
        <input type="button" id="theButton3" value="Press Me 3" />
        <input type="button" id="theButton4" value="Press Me 4" />
        <br />
        <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a>
        <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a>
        <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a>
        <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a>
    </div>
</div>
...