Как вы меняете кнопку jQuery?

Я использую элемент управления jQuery UI Button, но, похоже, не могу настроить размер (ширину и высоту). Здесь API-документация. Я попытался установить для него атрибут STYLE, но затем LABEL не была правильно центрирована. Спасибо.

Ответ 1

Попробуйте это в атрибуте style:

width: 300px;
padding-top: 10px;
padding-bottom: 10px;

или

$(element).css({ width: '300px', 'padding-top': '10px', 'padding-bottom': '10px' });

Ответ 2

обычно:

$(theElement).css('height','...px').css('width','...px');

Ответ 3

Вы можете создать стиль .ui-button.ui-widget (без пробелов, должны иметь оба класса). (убедитесь, что ваша таблица стилей отображается ниже jquery ui one). Вы также можете стиль

.ui-button.ui-widget{
     height, width
}

.ui-button.ui-widget .ui-button-text{
    line-height, font-size
}

Ответ 4

Вот мое решение, чтобы сделать jQuery UI-кнопку той же ширины. Сначала мне нужен метод, чтобы получить максимальную ширину.

var greatestWidth = 0;   // Stores the greatest width
function getMaxWidth() {
    var theWidth = $(this).width();   // Grab the current width

    if( theWidth > greatestWidth) {   // If theWidth > the greatestWidth so far,
        greatestWidth = theWidth;     //    set greatestWidth to theWidth
    }
}

Затем я вызываю этот метод после подключения кнопки и установки размера. Пример

  $('.selector')
        .button()
        .each(getMaxWidth);
  $('.selector').width(greatestWidth);

Ответ 5

Я обнаружил, что добавление <small></small> вокруг тегов кнопок помогает. Это полезно только в некоторых случаях, но это помогло мне уменьшить размер проекта, над которым я работал.

Ответ 6

Вы можете создать стиль с относительным размером шрифта. Если ваша кнопка имеет класс custome 'buttonStyle', то добавьте это в CSS

.buttonStyle{
 font-size:0.8em;
}

Ответ 7

Основываясь на этой документации http://api.jquery.com/height/, ниже работает:

$('#mybutton').button({ icons: { primary: "ui-icon-plus" }, text: false}).height(20);