Я использую кнопку пользовательского интерфейса 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 делает свои кнопки. Любые идеи?
Если это стиль 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 несущественным.
Это помогло уменьшить высоту кнопки для меня (тема гладкости по умолчанию - высота строки 1.4):
.ui-button .ui-button-text
{
line-height: 1.0;
}
Вот что я использую на своих веб-сайтах для настройки размеров шрифтов, чтобы размеры кнопок были такими же, как на веб-сайте 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% будет равен размеру родительского элемента.
Вы можете создавать кнопки разных размеров, изменяя заполнение элемента 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 */
}
Просто измените размер шрифта кнопки;).
<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>
Удачи.;)
Я использовал комбинацию из двух приведенных выше предложений. Это довольно легко настроить UI так, как мне нравится.
В таблицу стилей стилей добавить:
.ui-button .ui-button-text
{
padding: 0px 11px 0px 21px !important;
font-size: .72em !important;
}
Мое решение должно было работать и с новыми элементами меню
Сначала выберите соответствующие элементы для меню и кнопки
.menu>.ui-button-icon-only,
.ui-button{
font-size:0.8em !important;
}
И второе, как указано выше, чтобы заставить невнимательность
.ui-button-text {
font-size: inherit !important;
}
Я сделал это, и он отлично работает.
$( "button" ).button("font-size", "0.8em");
Использовать jQuery во время выполнения без изменения CSS. Это дает вам большую гибкость.
$(function() {
$("input[type=button]").css("font-size", "0.8em");
});
<input type="submit" value="Mostrar imágenes">
и мой css:
input[type="submit"] {
color: #000;
border: 0 none;
cursor: pointer;
height: 30px;
width: 150px; }