Các tab giao diện người dùng jQuery Kiểu dáng tối thiểu

Question

Trong ứng dụng của tôi, tôi đã tránh phải tải bất kỳ bảng định kiểu jQuery nào, nhưng plugin UI-tabs dường như cần một số CSS để làm việc. OK, tốt, nhưng các ví dụ có bạn tải tất cả các phong cách UI và, có lẽ quan trọng hơn, phong cách tab hoàn toàn hủy hoại giao diện của riêng tôi.

Có nơi nào để tìm hiểu cách tôi có thể cung cấp đủ CSS để các tab hoạt động, vì vậy tôi có thể giữ lại kiểu của riêng mình không?

Tôi không quan tâm đến số lượng tối thiểu trợ giúp tạo kiểu để sắp xếp các tab độc đáo hay gì đó, nhưng hình nền, màu sắc .... chúng xung đột thực sự với kiểu dáng của riêng tôi.

Ồ, và không cảm ơn Chủ đề con lăn, điều mà tôi chắc chắn là tốt cho một số người. Chỉ cần không phải trong trường hợp này, cảm ơn.

Answer 1

Nếu bạn nhìn vào Tabs Demo Page bạn có thể click vào tab Themig để xem mà phong cách đang được sử dụng, hiện nay nó trông như thế này:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> 
    <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> 

Sau đó, bạn có thể sử dụng jQuery UI CSS Framework documentation để tìm một mô tả của mỗi chung lớp học. Các lớp cụ thể của widget không được liệt kê, vì chúng cũng ... mỗi widget. Cách tốt nhất để có ý tưởng về những gì mà các lớp đó sử dụng là sử dụng ThemeRoller, hoặc xem chủ đề mặc định (for example here) và chỉ xem CSS cho các lớp đó, bạn có thể sử dụng nó và điều chỉnh cho riêng mình nhu cầu, đây là CSS chủ đề cơ bản hiện tại cho các lớp học .ui-tabs-*:

.ui-tabs { position: relative; padding: .2em; zoom: 1; } 
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } 
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } 
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } 
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } 
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } 
.ui-tabs .ui-tabs-hide { display: none !important; }