2009-12-26 6 views
5

Tôi bị ướt chân với Thư viện đóng cửa của Google. Tôi đã tạo một trang đơn giản với Select Widget, nhưng rõ ràng là cần một số kiểu dáng (phần tử trông giống như văn bản thuần túy và trong ví dụ bên dưới các mục trình đơn bật lên bên dưới nút).Làm cách nào để áp dụng CSS cho các thành phần từ Thư viện đóng cửa của Google?

Tôi giả định thư viện hỗ trợ các kiểu - làm thế nào tôi có thể móc vào chúng? Mỗi trang ví dụ trong SVN dường như sử dụng CSS của riêng nó.

dụ viết tắt sau:

<body> 

<div id="inputContainer"></div> 

<script src="closure-library-read-only/closure/goog/base.js"></script> 
<script> 
    goog.require('goog.dom'); 
    goog.require('goog.ui.Button'); 
    goog.require('goog.ui.MenuItem'); 
    goog.require('goog.ui.Select'); 
</script> 
<script> 
    var inputDiv = goog.dom.$("inputContainer"); 

    var testSelect = new goog.ui.Select("Test selector"); 
    testSelect.addItem(new goog.ui.MenuItem("1")); 
    testSelect.addItem(new goog.ui.MenuItem("2")); 
    testSelect.addItem(new goog.ui.MenuItem("3")); 
    var submitButton = new goog.ui.Button("Go"); 

testSelect.render(inputDiv); 
submitButton.render(inputDiv); 
</script> 

</body> 

Trả lời

2

tôi chỉ sử dụng câu thần chú tương tự (đối với trường hợp của bạn):

<link rel="stylesheet" href="closure-library/closure/goog/demos/css/menubutton.css"> 

Có vẻ như không phải là một cách tốt hơn, mặc dù tôi đã không tìm thấy bất kỳ lời giải thích nào đằng sau việc có các kiểu trong bản trình diễn/dir ...

+0

Đây cũng là giải pháp duy nhất tôi đã tìm thấy. –

1

Đóng cửa thêm một loạt các lớp CSS vào các nút HTML và thư viện cung cấp một số CSS để cung cấp cho các thành phần một kiểu.

Tôi khuyên bạn nên xem qua nguồn gốc của bản trình diễn và tìm hiểu các id và lớp css. Hoặc tìm ra các id/lớp bằng cách sử dụng Firebug (cho firefox) hoặc IE Developer Tools (cho Internet Explorer 7/8) và sau đó tạo kiểu cho chúng bằng cách sử dụng CSS của riêng bạn.

3

Trong thực tế, tìm kiếm CSS phù hợp sẽ bắt đầu bằng trang demo cho tiện ích bạn muốn sử dụng. Bằng cách kiểm tra HTML của trang, sẽ dễ dàng xác định các bảng định kiểu mà bản trình diễn phụ thuộc vào bằng cách tìm các thẻ. Trong trường hợp của goog.ui.HoverCard, các yếu tố thích hợp từ hovercard.html là:

<link rel="stylesheet" href="css/demo.css"> 
<link rel="stylesheet" href="../css/hovercard.css"> 

Bỏ qua css/demo.css, trong đó xác định quy tắc CSS để đảm bảo rằng giao diện của các trang giới thiệu là phù hợp, vì vậy hầu hết mã trong css/demo.css là đặc trưng cho các bản trình diễn, không phải là tiện ích, vì vậy nó không được đưa vào ứng dụng của bạn. Đừng quên nhìn vào css/common.css, trong đó có một hiển thị khối nội tuyến xbrowser thực hiện, mà nhiều vật dụng sử dụng.