Как контролировать размер мобильной контрольной группы Jquery?

Question

Я использую jquery mobile, и у меня есть контрольная группа, которая отображается следующим образом:

Однако, если вы перейдете на эту страницу, http://jquerymobile.com/demos/1.0.1/docs/forms/textinputs/index.html, вы увидите вверху контрольную группу, подобную следующей:

Я все еще пытаюсь узнать, как jquery уменьшает размер своей контрольной группы?

Answer 1

В контрольной группе вы добавляете data-mini = "true" следующим образом:

<div data-role="controlgroup" data-type="horizontal" data-mini="true"> 

Answer 2

В демоверсию jQM добавлен дополнительный CSS

• http://jquerymobile.com/demos/1.0.1/docs/_assets/css/jqm-docs.css

Размещение класса на элементе <ul>

class="localnav" 

Пример:

<ul data-role="controlgroup" data-type="horizontal" class="localnav">
    <li><a href="index.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
    <li><a href="options.html" data-role="button" data-transition="fade">Options</a></li>
    <li><a href="methods.html" data-role="button" data-transition="fade">Methods</a></li>
    <li><a href="events.html" data-role="button" data-transition="fade">Events</a></li>
</ul>​

и добавление этого CSS

.localnav {
    margin:0 0 20px 0;
    overflow:hidden;
}
.localnav li {
    float:left;
}
.localnav .ui-btn-inner { 
    padding: .6em 10px; 
    font-size:80%; 
}

Должен получить желаемый результат, но он действительно устанавливает размер шрифта, который делает это

Answer 3

Что бы я сделал, это обернул ваши кнопки внутри контейнера следующим образом:

<div class="buttonsHere">
   <button class="myButton" id="search">Search</button>
   <button class="myButton" id="latest">Latest</button>
   <button class="myButton" id="top">Top</button>
</div>

Затем в вашей таблице стилей сделайте так:

.buttonsHere.ui-btn-text {
    font-size: 20px;    
}

Дайте мне знать, если это работает, поскольку я не могу проверить это здесь. Ура!

Answer 4

Если вы копаете код с помощью firebug, то можете узнать, что потомки ul - это ul> li> a> span> span .И в последнем теге span вы получите css следующим образом.

.localnav .ui-btn-inner {
font-size: 80%;
}

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

$('ul li li a span span').css('font-size',60%');

Я не сделал ни одного примера ... пожалуйста, игнорируйте это, если это не работает для вас