jQuery nhiều chủ đề trên một trang

Điều này đang thúc đẩy tôi NUTS! Tôi đã theo bài ở đây mà chỉ có vẻ không được làm việc: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/jQuery nhiều chủ đề trên một trang

Tôi có một chủ đề cơ bản, ví dụ vì đó là chủ đề Smoothness từ thư viện jQuery UI. Sau đó, tôi có một chủ đề 'đỏ' mà về cơ bản màu sắc các nút màu đỏ. Here is the theme I created.

Vì vậy, tôi sẽ tải xuống chủ đề của mình. Chọn Cài đặt nâng cao, đặt phạm vi thành 'đỏ' và tên thư mục chủ đề của tôi thành 'đỏ' và tải xuống. Trước hết tôi không hoàn toàn chắc chắn 100% thư mục nào tôi muốn sao chép sang dự án của tôi là thư mục 'development-bundle \ themes' (chứa thư mục màu đỏ của tôi) hoặc thư mục '\ css \ red'?

Tôi đã thử cả hai. Bài viết trên dường như đề nghị nếu tôi sao chép thư mục chủ đề của tôi và liên kết đến chủ đề của tôi trong css nó sẽ hoạt động khi tôi thêm một lớp 'đỏ' vào phần tử hoặc phần tử bao bọc. Vì vậy, tôi đã liên kết các chủ đề như vậy trong tệp của tôi:

<link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" /> 
<link type="text/css" href="themes/red/jquery.ui.all.css" rel="stylesheet" />

Chủ đề cơ sở tải và hoạt động tất cả dokey nhưng do chủ đề màu đỏ thì không. Tôi đã có một nút theo kiểu như vậy:

<input type="submit" id="btn" value="A submit button" class="red" />

Tôi cũng đã thử:

<div class="red"> 
    <input type="submit" id="btn" value="A submit button" /> 
</div>

Không làm việc. Khi tôi xóa liên kết tệp css 'themes/base/jquery.ui.all.css' của nút thì không có kiểu nào cả. Khùng! Tôi đang kéo tóc ra. Tôi làm sai ở đâu? Chắc chắn họ chỉ cần làm cho nó dễ dàng, đủ để tải về JUST thư mục chủ đề và tham khảo các tập tin ui.all.

Nguồn

2010-06-01 lloydphillips

Tôi chưa thử, nhưng tôi biết jQuery có thể phá vỡ những thứ nhỏ nhặt. Bạn đã đặt '.red' làm phạm vi chứ không chỉ là' red'? Ngoài ra, hãy thử 'themes/red/ui.all.css '' thay vì 'themes/red/jquery.ui.all.css" '. – Skoder

Tôi đã thử .red hôm qua trước khi tôi đăng và điều đó đã không giúp đỡ (tôi đã phải đi và chỉnh sửa các tập tin css mà themeroller tạo ra để thay đổi tất cả để .red). Tôi sẽ thử thay đổi tên tệp trong giây lát và cho bạn biết. – lloydphillips

Trình điều khiển phù hợp.

Bạn phải sử dụng id phần tử, lớp hoặc tên thẻ trong ký hiệu JQuery.

Đối với một lớp: .class
Đối với một id: #ID
Đối với tagname: bảng

Bạn muốn tốt nhất chọn cách lớp, vì nó không chỉ là classy hơn so với những người khác nhưng nhiều hơn nữa có thể sử dụng (nó có thể được sử dụng trên nhiều đối tượng) và bạn không mess lên bất kỳ yếu tố bố trí như divs hoặc bảng. Sau khi tất cả, jss phạm vi justs thêm giá trị được cung cấp cho mỗi định nghĩa css. tức là

.ui-icon { ... }

trở thành

.scope .ui-icon { ... }

Edit: Hãy chắc chắn rằng bạn đã bao gồm các stylesheet Đúng vậy, tôi đã toàn bộ điều làm việc với đoạn mã sau

<html> 
    <head> 
     <title>JQuery UI Theme Scope</title> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
     <link type="text/css" href="css/red/jquery-ui-1.8.1.custom.css" rel="stylesheet" /> 
     <link type="text/css" href="css/default/jquery-ui-1.8.1.default.css" rel="stylesheet" /> 
    </head> 
    <body> 
     <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     <div class="red"> 
      <input type="submit" class="ui-state-default ui-corner-all" value="Submit" /> 
     </div> 
    </body> 
</html>

Đừng liên kết đến các stylesheet trong thư mục "developmentement-bundle", sử dụng thư mục trong thư mục "css" để thay thế.

Nguồn

2010-06-01 20:28:08

Tôi đang sử dụng lớp học. Vấn đề là tôi không thể có được phạm vi màu đỏ để nạp vào và ghi đè lên chủ đề cơ sở bằng cách thiết lập tên lớp. – lloydphillips

Hãy xem bản chỉnh sửa của tôi. –

Tôi đã thêm một lớp css mới cho các biểu tượng màu đỏ:

Icons 
---------------------------------- 


/* states and images */ 

.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 
.ui-iconRed { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

Và thay đổi ở đây quá:

/* states and images */ 

.ui-icon { width: 16px; height: 16px; background-image:url(images/ui-icons_469bdd_256x240.png); } 

.ui-iconRed { width: 16px; height: 16px; background-image:url(images/ui-icons_470bdd_256x240.png); }

Tôi có một thư mục với những hình ảnh màu đỏ và màu xanh. Khi tôi muốn chụp ảnh màu đỏ, tôi chỉ tham khảo biểu tượng lớpRed, như sau:

<img class="ui-iconRed ui-icon-bullet" title="Vendido" style="float: left;" /> 

//if want a blue just put the normal icon like this: 

<img class="ui-icon ui-icon-bullet" title="Não vendido" style="float: left;" />

Nguồn

2011-11-14 20:00:39

jQuery nhiều chủ đề trên một trang

Trả lời

Các vấn đề liên quan