JQuery UI вкладки основные изменения стиля

Question

Я использую вкладки пользовательского интерфейса jquery, и мне нужно существенно изменить стиль его оформления. Мне нужно удалить фоновое изображение, границы, почти все. Мне нужно, чтобы он выглядел минимально, а не как будто он самодостаточный.

Какой лучший способ сделать это? Мне нужно использовать стиль пользовательского интерфейса по умолчанию для виджета календаря, который находится на той же странице. Я провел много исследований, и все, кажется, указывают на тематический ролик. Тем не менее, я не просто хочу изменить цвета и границы радиусов. Мне нужно удалить дерьмо. Тематический ролик, кажется, просто меняет такие вещи, как цвета (не очень полезный для реального мира). Как мне адаптировать CSS для вкладок, не изменяя стили других виджетов пользовательского интерфейса на той же странице (я хочу, чтобы календарь оставался таким, как есть)?

Стоит ли даже использовать jquery UI для моих вкладок?

Answer 1

Вам следует ознакомиться с подробным сообщением Кейта Вуда о стилизации вкладок пользовательского интерфейса JQuery .

Ответ на ваш конкретный вопрос

Мне нужно удалить фоновое изображение, границы, почти все. Мне нужно, чтобы это выглядело минимально

находится в этом разделе " Удалите большую часть форматирования " из сообщения Кита Вуда.

В дополнение к этому, есть еще 10 изменений стиля, дополненных CSS, необходимыми для достижения желаемого эффекта.

Стилизация вкладок пользовательского интерфейса JQuery - пост в блоге Кита Вуда

Answer 2

Я решил написать свои собственные простые функции вкладок, когда понял, что мне не нужны большинство его встроенных функций, таких как загрузка содержимого AJAX и динамическое добавление / удаление вкладок. Если бы мне были нужны эти функции, было бы легко реализовать их самостоятельно. Что подтолкнуло меня отказаться от вкладок пользовательского интерфейса jQuery, так это то, что мне пришлось по-разному структурировать элементы DOM. Мне также нужно было придать стилю мои вкладки, чтобы они выглядели минимально, и я подумал, что построить с нуля будет меньше усилий, чем пытаться избавиться от лишних деталей.

Мне больше всего не хватает функции, заключающейся в том, что jQuery UI Tabs автоматически выбирает вкладку, обозначенную # в URL (я знаю, что могу просто скопировать ее - просто еще не дошел до нее).

---

ОБНОВЛЕНИЕ: Но, да, если вы придерживаетесь этого, вы можете переопределить CSS, используя любые ваши идентификаторы:

#my-tabs .ui-state-default {
    background-image: none; /* remove default bg image */
}

и т. Д. *

Answer 3

Легко с некоторым CSS, вы можете легко переопределить стандартный CSS, поставляемый с jQuery UI. Вам может не понадобиться! Важный, если ваш модифицированный CSS появляется после CSS jQuery UI.

Вы также можете удалять / добавлять классы к каждому элементу при загрузке jQuery, но это кажется немного ненужным.

Answer 4

Попробуйте следующее в вашем CSS, предполагая, что ваш класс - .mytabs для превосходящего CSS. Это должно заставить вас начать на

.mytabs li {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 

    }
    .mytabs li.ui-state-active {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 
        margin: 0;


    }

.mytabs li a 
    {
        color:          Black !important;
        font-size:      1.4em !important;
        font-weight:    bolder;
        padding:        4px 1.5ex 3px !important;
    }

Answer 5

 #my-tabs * {
    background-image: transparent;
}

Answer 6

Здесь почти все рассмотрено, но я осмотрелся и нашел способ бросить вещи, которые вам действительно не нужны, с помощью одного класса, а затем редактировать оставшиеся атрибуты.Таким образом, вы выбираете каждый класс, начинающийся с «ui-», и удаляете все, что хотите удалить из пользовательского интерфейса jQuery.

Answer 7

Интересно, должны ли важные атрибуты быть в шаблонах jquery ui по умолчанию. Например, если вы измените вкладки на левую или правую сторону вместо верхней, то у 'border-bottom' не должно быть важного!

Answer 8

Это должно быть довольно просто с CSS. У ваших элементов есть идентификаторы и классы, и вы можете прикоснуться к ним с помощью CSS. Themeroller - это просто быстрое занятие.

Если я не забуду, вы также можете настроить вкладки js и настроить строки, которые добавляют изображения (если это тот же плагин), или просто удалить эту строку по своему вкусу.