Можно ли удалить весь стиль вкладок пользовательского интерфейса jQuery, не нарушая стили других компонентов пользовательского интерфейса?

Я хочу полностью настроить вкладки jQuery UI, не нарушая стили jQuery UI date picker? Это реально или я должен выполнить работу и не использовать пользовательского интерфейса jQuery вкладки?

8 8
jquery jquery-ui-tabs

8 ответов:

$("#mytabs").tabs()

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="mytabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

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

#mytab.ui-tabs {
    /* reset or overwrite everything you don't like */
}

#mytab li.ui-tabs-selected {
    /* reset or overwrite everything you don't like */
}

...

Это не совсем удобно, но позволяет по-прежнему использовать, скажем, стили пользовательского интерфейса jquery в любом другом элементе.

Что касается datepicker, до тех пор, пока вы убедитесь, что стили, определенные выше, не используются в divs, которые содержат контент, с которым вы должны быть в порядке, большинство классов имеют префиксы ".ui-datepicker - "или".ui-вкладки - " во всяком случае, так они не стоит вмешиваться..

4

Это возможно, но я думаю, что проще закодировать свои собственные вкладки. Взгляните на эту ссылку: Основные изменения стиля вкладок пользовательского интерфейса jquery

1

Возможно, этот минимально-навязчивый скелет css помогает. Обратите внимание, что только определенный класс ui-tabs jQuery UI (и его потомок ul > li) стилизован, что позволяет избежать прикосновения к другим классам, связанным с ui, содержащимся в теме-ролике, созданном jquery-ui-1.8.18 x.custom.css (я никогда не получал эту идею, просто изучая этот файл).

            /* default tab state */                
                /* tabs nav bar */
                .ui-tabs ul {
                    border-top: 0 !important; 
                    ...
                }                
                .ui-tabs li { 
                        background :  #EFEFE7 !important; 
                        ...
                } 
                .ui-tabs li a  { 
                        color:          Black !important;
                        padding:        4px 1.5ex 3px !important; 
                    }                    
            /* selected tab state */
                .ui-tabs li.ui-state-active { 
                        margin: 0;
                        ...
                    }
                .ui-tabs li.ui-state-active a  { 
                        ...
                    } 
            /* hovered tab state */
                .ui-tabs li.ui-state-hover { 
                    ...
                    }                    
                .ui-tabs li.ui-state-hover a { 
                    ...
                    }
1

Наткнулся на подобную проблему. Решение и демонстрация перечислены ниже.

Я хотел бы поблагодарить следующий источник, который предоставил мне хороший пример для кода CSS - http://keith-wood.name/uitabs.html

Кроме того, я хотел бы поблагодарить команду jquery и их пример кода отсюда - http://jqueryui.com/tabs/

HTML 

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

CSS 

#tabs { 
    background: transparent; 
    border: none; 
} 
#tabs .ui-widget-header { 
    background: transparent; 
    border: none; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
}
#tabs .ui-tabs-panel {
    display: none;
    background: transparent;
    border-width: 0px;
    background: none;
}
#tabs .ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-active { 
    background: transparent no-repeat bottom center; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-default a { 
    color: #c0c0c0; 
} 
#tabs .ui-tabs-nav .ui-state-active a { 
    color: #459e00; 
}

JS 

// Setting Tabs - Demonstrating how to set currently selected tab
$("#tabs").tabs({active: 1});
$("#tabs").removeClass('ui-widget');

// Demonstrating how to get index of currently selected tab
var active = $("#tabs").tabs( "option", "active" );
console.log(active);

Демо-версия

1

Самый короткий путь Если вы действительно хотите" просто " функциональность вкладки Кажется:

РДИЙ "скорее сделай это сам"

Демонстрация JsFiddle (с использованием мало измененного примера jQuery): https://jsfiddle.net/uy986516/

Потому что если вам не нужен стиль jQuery, то что вам на самом деле нужно? Немного...

jQuery( function($){
  var $myCoolTabsWrap = $('.myCoolTabsWrap');
  if( $myCoolTabsWrap.length > 0 ){
    $myCoolTabsWrap.find('> ul a').not('.realLink').click(function(e){
        e.preventDefault();
        var $me = $(this);

        $myCoolTabsWrap.find('.active').removeClass('active');
        $me.parent().add( $me.attr('href') ).addClass('active');
    });
  }
});

Оставляя вам только этот функциональный CSS: 

.myCoolTabsWrap > ul li{ display: inline-block; }
.myCoolTabsWrap > div{ display: none; }
.myCoolTabsWrap > div.active{ display: block; }

Синтаксис HTML тот же с дополнительными функциями:
1. Панели с содержимым скрыты по умолчанию, предварительный выбор должен быть сделан для tab&panel вручную , давая им "активный" класс (но это часто требуется...). Пользователь-выбор вкладок и панелей и" активный " класс их-предоставление сделано автоматически.
2. Вкладка-это реальная ссылка? - нет проблем - просто дайте свою ссылку классу "realLink".

<div id="tabs" class="myCoolTabsWrap">
  <ul>
    <li><a href="#tabs-1" class="active">Tab 1 link text</a></li>
    <li><a href="#tabs-2">Tab 2 link text</a></li>
    <li><a href="#tabs-3">Tab 3 link text</a></li>
    <li><a href="https://google.cz/" target="_blank" class="realLink">An actual link text</a></li>
  </ul>
  <div id="tabs-1" class="active">
    Some of your cool html / text.
  </div>
  <div id="tabs-2">
    Some of your cool html / text.
  </div>
  <div id="tabs-3">
    Some of your cool html / text.
  </div>
</div>
1

Просто используйте цепочку jQuery для удаления класса ui-widget из элемента контейнера tab после применения виджета tabs. Большая часть нежелательных стилей прикреплена к классу ui-widget.

$("#tabs").tabs().removeClass('ui-widget');

В другом случае с более сильно стилизованным содержимым я обнаружил, что необходимо удалить больше классов не только из контейнера div, но и из всех элементов внутри него.

$("#tabs").tabs();
$("#tabs, #tabs *")
.removeClass('ui-widget ui-widget-content ui-widget-header ui-tabs-panel');
1

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

Однако, просто используйте каскадную природу CSS. Включите ссылку на CSS пользовательского интерфейса jQuery, а затем включите ссылку на свой собственный, который переопределит стили пользовательского интерфейса jQuery.

0

Я знаю, что это старый вопрос, но поскольку он #1 в Google для "jQuery ui tabs no style", вот мое исправление: 

      // Remove the annoying jQuery UI classes when we create the tabs.
      $('#tabs').tabs().removeClass (function (index, className) {
        return (className.match (/(^|\s)ui-\S+/g) || []).join(' ');
      });
0