jQuery диалоговое моделирование кнопки отмены сохранения
Ответ на многий CSS, форматирующий проблемы, кажется, "добавьте другой < отделение>!"
Так, в том духе, Вы попытались добавить отделение обертки, к которому граница/дополнение применяются и затем вставление текстовой области 100% шириной этого? Что-то как (непротестированный):
textarea
{
width:100%;
}
.textwrapper
{
border:1px solid #999999;
margin:5px 0;
padding:3px;
}<div style="display: block;" id="rulesformitem" class="formitem">
<label for="rules" id="ruleslabel">Rules:</label>
<div class="textwrapper"><textarea cols="2" rows="10" id="rules"/></div>
</div>4 ответа
Вот как добавить пользовательские классы в диалоговом окне пользовательского интерфейса jQuery (версия 1.8 +):
$('#foo').dialog({
'buttons' : {
'cancel' : {
priority: 'secondary', class: 'foo bar baz', click: function() {
...
},
},
}
});
после просмотра некоторых других потоков я придумал это решение для добавления значков к кнопкам в диалоговом окне подтверждения, которое, похоже, хорошо работает в версии 1.8.1 и может быть изменен для других стилей:
$("#confirmBox").dialog({
modal:true,
autoOpen:false,
buttons: {
"Save": function() { ... },
"Cancel": function() { ... }
}
});
var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');
$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");
Мне было бы интересно узнать, есть ли лучший способ сделать это, но это кажется довольно эффективным.
Я просмотрел HTML-код, созданный диалоговым окном пользовательского интерфейса. Панель кнопок отображается следующим образом:
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
<button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>
Добавление класса к кнопке «Отмена» должно быть простым.
$ ('. Ui-dialog-buttonpane: last-child'). Css ('background-color', '#ccc ');
Это сделает кнопку Отмена серой. Вы можете оформить эту кнопку по своему усмотрению.
Приведенный выше код предполагает, что кнопка «Отмена» является последней кнопкой. Защищенный от дурака способ сделать это будет
$('.ui-dialog-buttonpane :button')
.each(
function()
{
if($(this).text() == 'Cancel')
{
//Do your styling with 'this' object.
}
}
);
Эта функция добавит класс к каждой кнопке в вашем диалоговом окне. Затем вы можете стилизовать (или выбрать с помощью jQuery) как обычно:
$('.ui-dialog-buttonpane :button').each(function() {
$(this).addClass($(this).text().replace(/\s/g,''));
});