Изменение размера кнопки пользовательского интерфейса jQuery?

Я использую кнопку пользовательского интерфейса jQuery по всей моей странице, однако я не нашел пути вокруг того, что кажется простой проблемой. Я хочу, чтобы некоторые из моих кнопок были меньше, чем другие, это должно быть так же просто, как установить 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 делает свои кнопки. Любые идеи?

Ответ 1

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

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

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

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

Это также должно сделать важное значение для .small-button несущественным.

Ответ 2

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

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

Ответ 3

Вот что я использую на своих веб-сайтах для настройки размеров шрифтов, чтобы размеры кнопок были такими же, как на веб-сайте 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% будет равен размеру родительского элемента.

Ответ 4

Вы можете создавать кнопки разных размеров, изменяя заполнение элемента 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 к кнопке

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

Удачи.;)

Ответ 6

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

В таблицу стилей стилей добавить:

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

Ответ 7

Мое решение должно было работать и с новыми элементами меню

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

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

И второе, как указано выше, чтобы заставить невнимательность

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

и мой css:

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