Основное изменение стиля вкладок jquery ui

Question

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

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

Стоит ли вообще использовать пользовательский интерфейс jquery для моих вкладок?

Answer 1

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

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

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

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

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

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

Answer 2

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

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

---

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

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

и так далее..

Answer 3

Попробуйте следующее в своем 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 4

С помощью некоторого CSS вы можете легко переопределить стандартный CSS, поставляемый с пользовательским интерфейсом jQuery.Возможно, вам не понадобится !important, если измененный CSS появится после CSS jQuery UI.

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

Answer 5

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

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

Answer 6

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

Answer 7

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

*[class*="ui-"] {
     border-radius:0;
     background-image: none;
     .
     .
     .
}

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

Answer 8

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