JQuery UI tabs - прозрачный фон

У меня проблемы с настройкой вкладок jqueryUI, чтобы иметь прозрачный фон. Я взял basic tabs example и добавил следующий код, как указано, например. here, но при попытке установить прозрачный фон:JQuery UI tabs - прозрачный фон

body { background: #ddddff; } 
.ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-panel, 
.ui-widget-header .ui-state-default, 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active 
{ 
     background: transparent; 
}

Проблема заключается в том, что существует переизбыток линия (граница дна) в навигационном виджете активной вкладки:

enter image description here

I также попытался установить background-image: none, как рекомендовал here, но это не поможет.

У меня есть jquery-ui 1.10.3, проверено на тему "smoothnes".

источник

2014-01-09 TMS

пример на JSFiddle – 2dar

вы можете легко взять пример основных вкладок, которые я связал, и добавить код, который у меня есть в моем вопросе .. – TMS

Понял! Просто измените transparent на inherit! Это трюк!

.ui-tabs, .ui-tabs .ui-tabs-nav, .ui-tabs .ui-tabs-panel, 
.ui-widget-header .ui-state-default, 
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active 
{ 
     background: inherit; 
}

Это достаточно просто поместить его на следующие элементы:

.ui-tabs, 
.ui-widget-header, 
.ui-widget-header .ui-state-default, 
.ui-widget-header .ui-state-active 
{ 
     background: inherit; 
}

Возникает вопрос - не так грязно? Является ли он межсерверным?

источник

2014-01-09 22:00:36 TMS

попробуйте background: rgba(0,0,0,0); и посмотрите, не имеет значения?

Можете ли вы настроить скрипку?

источник

2014-01-09 21:55:49 Phlume

причина для DV? – Phlume

Фон в порядке, проблема заключается в границе – DaniP

OP говорит: «У меня проблемы с настройкой вкладок jqueryUI для прозрачного фона». – Phlume

Простой. Добавьте следующий класс сразу после публикуемой CSS:

.ui-widget-header { 
    border-bottom:0; 
}

UPDATE:

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

Поскольку наши фоны здесь установлены на transparent, я не думаю, что можно скрыть нижнюю границу с помощью того, как пользовательский интерфейс jQuery создает эти вкладки. Вместо этого у нас есть пустой каркас.

Предлагаю предложить альтернативный способ отображения содержимого с вкладками, чем с использованием библиотеки jQuery UI.

источник

2014-01-09 21:57:41

Вы проверили это?Это позволит точно исключить * целую * горизонтальную линию. – TMS

Опасайтесь, неправильно поняли часть «активной вкладки» вашего комментария. Скоро будет обновляться. –

Эта рамка, которую вы видите, является той, что принадлежит ul элементам этого класса .ui-widget-header. Используется для визуального эффекта активной вкладки, которая скрывает границу с его фоном и свойства:

.ui-tabs .ui-tabs-nav li.ui-tabs-active { 
    margin-bottom: -1px; 
    padding-bottom: 1px; 
}

С вашей активной вкладки не фон больше, то не может скрыть границу.

источник

2014-01-09 21:59:33 DaniP

Итак, это объяснение, но не решение? – TMS

@Tomas Да, вашему решению по-прежнему нужен фон в какой-то момент. Когда вы наследуете, вы получаете bg заголовка ul widget, тогда вы можете скрыть границу и, конечно, не прозрачно. – DaniP

Итак, что вы предлагаете? – TMS

JQuery UI tabs - прозрачный фон

ответ

Смежные вопросы