Вкладки JQuery UI - Как предотвратить стили, применяемые к контенту в пределах вкладок?

Я реализовал вкладки JQuery UI, и они отлично работают, за исключением одной проблемы...

Все стили/классы содержимого переопределяются JQuery, и я не хочу этого делать. Например, у меня есть текстовое поле:

<input type="text" id="profileFirstName" name="profileFirstName" class="textMedium" />

Если я проверю стили в Firebug, я вижу это (в этом порядке):

.ui-widget :active {
outline:medium none;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family:Verdana,Arial,sans-serif;
font-size:1em;
}

input.textMedium {
width:200px;
}

Как вы можете видеть, JQuery добавила стили ui-widget до моего собственного, тем самым перекрывая мои.

Это делает это везде, где я реализовал вкладки. Как установить его GLOBALY так, чтобы его стили не переопределяли мой? Мне не нужен ни один из стилей jquery, влияющих на содержимое с вкладками.

Я полагаю, что могу переопределить стили ui-widget и не поместить ничего под определениями? Но я хотел бы знать, есть ли более чистый способ, чтобы их стили ui-widget вообще не применялись.

Спасибо заранее!

Ответ 1

используйте ! important в своих стилях. это означает, что ничто другое не должно переопределять ваши стили.

Подробнее см. ссылку .

Ответ 2

вы можете использовать removeClass() для удаления значений класса, но виджет может не работать, если вы это сделаете.

Пример:

$('.myitem').removeClass('ui-widget');

Я предлагаю вам добавить новые значения классов, используя addClass(), чтобы переопределить стили

Пример:

$('.myitem').addClass('newClass');

или нацелить элемент (ы)

$('p').addCLass('newClass');

и вызовите функцию в конце объявления вашего виджета.

$(document).ready(function() {

    $("#MyItem").draggable();
    //here
    $("#MyItem").addClass("newClass");

});

Ответ 3

У меня была та же проблема и она была решена с использованием .removeClass, как предположил dany:

$("#menu").tabs();
$("#menu, #menu *").removeClass(function(index, class) {
    // I want to keep these classes because I style them myself,
    // so remove them from the string of classes
    class = class.replace(/ui-tabs-nav|ui-state-active|ui-tabs-hide/,'');
    // Create array of remaining classes that begin with "ui-"
    var matches = class.match(/ui-\S+/g) || [];
    // return classes as space-delimited list
    return (matches.join(' '));
});

h/t до @fancyPT для своего примера удаления класса в .removeClass.

Ответ 4

Я знаю его год спустя, но я узнал, что этот раздел файла UI.css был основным виновником распространения стиля:

/* Component containers
----------------------------------*/
.ui-widget { /*font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; */}
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {/* font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em;*/ }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

Комментируя это, вы решите большинство проблем (ну, пока вы не обновите интерфейс пользователя).

Ответ 5

Вам не нужно включать какие-либо css для вкладок. Просто поставьте одну строку css: .ui-tabs-hide { display:none; } и он будет работать.

Ответ 6

Вы можете разместить содержимое вкладки в iframe и добавить стиль diffrent с тегом стиля в заголовке содержимого iframe.