Các tab jquery ui thay đổi phong cách lớn

Question

Tôi đang sử dụng các tab giao diện người dùng jquery và tôi cần thay đổi kiểu dáng trên đó. Tôi cần phải rempve hình nền, biên giới, gần như tất cả mọi thứ. Tôi cần nó để nhìn tối thiểu, và không giống như nó tự chứa.

Cách tốt nhất để làm điều này là gì? Tuy nhiên, tôi cần phải sử dụng kiểu dáng giao diện người dùng mặc định cho tiện ích con lịch, trên cùng một trang. Tôi đã thực hiện rất nhiều nghiên cứu và tất cả mọi người dường như chỉ đến chủ đề con lăn. Tuy nhiên, tôi không chỉ muốn thay đổi màu sắc và bán kính biên giới. Tôi cần phải xóa crap. theme-roller dường như chỉ thay đổi những thứ như màu sắc (không thực sự hữu ích cho thế giới thực). Làm cách nào để tôi điều chỉnh css cho các tab mà không thay đổi kiểu của các tiện ích con giao diện người dùng khác trên cùng một trang (tôi muốn lịch ở lại như cũ)?

Thậm chí có đáng sử dụng giao diện người dùng jquery cho các tab của tôi không?

Answer 1

Bạn nên xem bài đăng chi tiết của Keith Wood trên tạo kiểu cho các tab giao diện người dùng JQuery.

Câu trả lời cho câu hỏi cụ thể của bạn

tôi cần phải rempve hình nền, biên giới, gần như tất cả mọi thứ. Tôi cần nó để xem tối thiểu

nằm trong phần này "Remove most of the formatting" của bài đăng của Keith Wood.

Ngoài ra, còn có thêm 10 thay đổi về kiểu, hoàn chỉnh với CSS bắt buộc để đạt được hiệu quả mong muốn.

JQuery UI Tabs Styling - Keith Wood Blog Post

Answer 2

Nó khá đơn giản với CSS. Các phần tử của bạn có các ID và các lớp trên chúng và bạn có thể chạm vào chúng bằng CSS. Themeroller chỉ là một điều rất nhanh.

Nếu tôi nhớ lại, bạn cũng có thể điều chỉnh các js và điều chỉnh các đường thêm hình ảnh (nếu đây là cùng một plugin) hoặc chỉ xóa toàn bộ dòng đó theo ý thích của bạn.

Answer 3

Tôi đã chọn viết chức năng tab đơn giản của riêng mình khi nhận ra rằng tôi không cần hầu hết các tính năng được tích hợp sẵn, chẳng hạn như tải nội dung AJAX và thêm/xóa các tab động. Nếu tôi cần những tính năng đó, sẽ dễ dàng thực hiện chúng. Điều gì thúc đẩy tôi bỏ qua jQuery UI Tabs là tôi phải cấu trúc các phần tử DOM của mình một cách khác nhau. Tôi cũng cần phải tạo phong cách cho các tab của mình để trông tối thiểu và tôi nghĩ rằng việc xây dựng từ đầu sẽ ít nỗ lực hơn là cố gắng loại bỏ rất nhiều.

Tính năng mà tôi bỏ lỡ nhất là cách tab giao diện người dùng jQuery tự động chọn tab được chỉ định bởi # trong URL (Tôi biết tôi có thể sao chép nó - chỉ chưa nhận được).

---

UPDATE: Nhưng, yeah, nếu bạn đang gắn bó với nó, bạn có thể ghi đè CSS sử dụng bất kỳ ID bạn có:

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

và vân vân ..

Answer 4

Thử sau đây trong css của bạn giả định lớp học của bạn là .mytabs cho css trọng hơn. Nó sẽ giúp bạn bắt đầu trên

.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 5

Thật dễ dàng với một số CSS bạn có thể dễ dàng ghi đè CSS tiêu chuẩn được phân phối bằng giao diện người dùng jQuery. Bạn có thể không cần quan trọng nếu CSS được sửa đổi của bạn xuất hiện sau CSS của jQuery UI.

Bạn cũng có thể xóa/thêm lớp học cho từng phần tử với jQuery khi tải, nhưng điều đó có vẻ hơi không cần thiết.

Answer 6

Tôi tự hỏi liệu các thuộc tính quan trọng có nằm trong các mẫu jquery ui mặc định ở vị trí đầu tiên không. Ví dụ: nếu bạn thay đổi các tab ở bên trái hoặc bên phải thay vì trên cùng, thì phần 'border-bottom' sẽ không có giá trị quan trọng vì nó thường bị ghi đè.

Answer 7

Hầu như tất cả mọi thứ được đề cập ở đây, nhưng tôi đã nhìn xung quanh và thấy một cách để quăng những điều bạn thực sự không cần khá dễ dàng với một lớp duy nhất, trong khi sau đó chỉnh sửa các thuộc tính còn lại.

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

Bằng cách này, bạn chọn mọi lớp bắt đầu bằng "ui-" và xóa mọi thứ bạn muốn xóa khỏi giao diện người dùng jQuery.

Answer 8

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