Изменение размера кнопки jQuery UI?

Я использую кнопку jQuery UI на всей моей странице, однако я не нашел способа обойти то, что кажется простой проблемой. Я хочу, чтобы некоторые из моих кнопок были меньше, чем другие, это должно быть так же просто, как установить CSS текста кнопки на что-то вроде, font: .8em; однако jQuery UI берет ваш элемент DOM и обертывает его:

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
   <span class="ui-button-text">Button Label</span>
</button>

Итак, если у меня есть <button class="small-button">Small button!</button> jQuery разместит текст в дочернем диапазоне. Любой размер шрифта, заданный small-button класс будет игнорируемый.

должен быть способ обойти это, не взламывая, как jQuery делает свои кнопки. Есть идеи?

49
javascript jquery jquery-ui jquery-ui-button

10 ответов

если это стиль ui-button-text С font-size напрямую, вы можете заменить его на более высоком уровне, применяя !важный. Например:

.small-button {
   font-size: .8em !important;
}

EDIT: попробуйте установить стиль CSS непосредственно на .ui-button-text наследование:

.ui-button-text {
   font-size: inherit !important;
}

это также должно сделать !важно на .small-button неактуально.

36

это помогло уменьшить высоту кнопки для меня (тема гладкости по умолчанию-line-height of 1.4):

.ui-button .ui-button-text
{
 line-height: 1.0;
}
13

вот что я использую на своих сайтах для настройки размеров шрифтов, чтобы мои размеры кнопок были такими же, как на jQuery UI веб-сайт. Это работает, потому что именно так jQuery UI веб-сайт это делает!

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

установив свойства размера шрифта для элемента body, установка размера шрифта для всего остального становится тривиальной, как 100% = 10px.

просто следите за каскадным эффектом при использовании процентов-ребенок 100% элемента будет равно размеру шрифта родительского элемента.

6

вы можете создавать кнопки разного размера, изменяя заполнение элемента span, который содержится в разметке, генерируемой jQuery, как предлагает Тим.

эта разметка / JavaScript...

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

приводит к этой преобразованной разметке...

<button class="some-class ui-button ui-widget ui-state-default ui-corner-all 
          ui-button-text-only" id="some-id" role="button" aria-disabled="false">
<span class="ui-button-text">some button</span>
</button>

, который, безусловно, включает в себя id и class теги, которые были изначально поставлены. Вы можете изменить размер своих кнопок, добавив больше отступов в span.ui-button-text элемент.

Вот Так..

button#some-id .ui-button-text {
    /* padding values here to your liking */
}
5

просто измените размер шрифта кнопки;).

<asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" />

теперь добавьте скрипт jquery к кнопке

   <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('input:submit, #btn2').button();
        });
    </script>

Удачи. ;)

3

я использовал комбинацию двух предложений выше. Довольно легко настроить пользовательский интерфейс так, как мне нравится.

в таблицу стилей страницы добавить:

.ui-button .ui-button-text
{
   padding: 0px 11px 0px 21px !important;
   font-size: .72em !important;
}
3

мое решение необходимо для работы с новыми пунктами меню, а также

первый, чтобы выбрать соответствующие элементы для меню и кнопки

.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}

и второй, как указано выше, чтобы заставить inheiritance

.ui-button-text {
 font-size: inherit !important;
}
1

Я сделал это, и она отлично работает.

$( "button" ).button("font-size", "0.8em");
1

используйте jQuery во время выполнения, без изменения CSS. Это дает вам гораздо больше гибкости.

$(function() {
  $("input[type=button]").css("font-size", "0.8em");
});
0

<input type="submit" value="Mostrar imágenes">

и мой css:

input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }
0