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

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

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 - "или".пользовательский интерфейс-вкладки-" во всяком случае, они не должны вмешиваться..

4

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

1

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

кратчайший путь если вы действительно хотите "просто" закладка функции кажется:

RDIY "скорее сделай это сам"

демонстрация 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. Панели с содержимым по умолчанию скрыты,предварительно выбрав должно быть сделано для вкладка&группа вручную , давая им "активный" класс (но это часто хотели...). Пользователь-выбор вкладок и панелей и "активный" класс их-предоставление сделано автоматически.
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