Có thể ghi đè lên các phần tử JQuery Mobile đã được tạo kiểu (các nút, danh sách, v.v ...) bằng một tệp css tùy chỉnh riêng biệt không?Ghi đè lên Jquery Mobile CSS
Nếu vậy tôi sẽ làm thế nào để tham khảo các yếu tố.
Cảm ơn
Tôi không biết của một quan chức, cách thanh lịch để làm điều đó, nhưng tôi tìm trong tập tin css phi-min để tìm các lớp học, sau đó thêm những thứ như thế này vào một tập tin .css bao gồm sau sự jquery di động một:
.ui-header .ui-title {margin-right: 20px; margin-left: 20px;}
.ui-footer .ui-title {margin-right: 20px; lề -ftft: 20px; khoảng trắng: bình thường;}
Ngoài ra, firebug và dev. công cụ (chrome) là bạn của bạn - kiểm tra các yếu tố và phong cách của chúng.
Libby
Có bạn có thể ghi đè lên tất cả các phong cách css đã được xác định trong điện thoại di động jQuery, nhưng có một cái nhìn về cách để làm điều đó một cách tốt. Theming overview trong tài liệu jQuery có thông tin được nhắc đến câu hỏi của bạn. Đặc biệt:
themes Trọng
Các chủ đề có ý nghĩa như là một điểm khởi đầu vững chắc, nhưng có nghĩa là để được tùy chỉnh để thêm các yếu tố thiết kế tùy chỉnh mà làm cho trang web của bạn hoặc ứng dụng độc đáo. Vì mọi thứ được kiểm soát bởi CSS, thật dễ dàng để sử dụng công cụ thanh tra web để xác định thuộc tính kiểu bạn muốn sửa đổi. Tập hợp các lớp chủ đề (toàn cầu) và các cấu trúc ngữ nghĩa các lớp (widget cụ thể) được thêm vào các phần tử cung cấp một tập hợp phong phú gồm các bộ chọn có thể là để nhắm mục tiêu ghi đè kiểu. Chúng tôi khuyên bạn nên thêm biểu định kiểu bên ngoài vào đầu, được đặt sau cấu trúc và tham chiếu biểu định kiểu chủ đề, chứa tất cả các ghi đè kiểu của bạn. Điều này cho phép bạn dễ dàng cập nhật lên các phiên bản mới hơn của thư viện vì ghi đè được giữ riêng biệt với mã thư viện.
+1 để đăng tài liệu để ghi đè chủ đề. – botbot
Có một quan niệm sai lầm rất lớn về việc sử dụng phong cách của riêng bạn với JQM mà tôi đã tìm thấy ở khắp mọi nơi, bao gồm SO. Bí quyết sử dụng CSS của riêng bạn với JQM là cách bạn viết CSS của riêng mình. Nói chung, trước tiên bạn phải chỉ định phần tử bạn muốn vượt qua CSS JQM với một id, và sau đó đính kèm lớp JQM vào ID đó. Ví dụ: để xóa CSS biên giới liên kết chuẩn JQM khỏi liên kết hình ảnh, trong đó # img_button_1 là ID được cấp cho phụ huynh neo của hình ảnh, bạn sẽ mã CSS của mình như vậy ...
HTML ...
<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
href="http://www.google.com" target="_blank">
<img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>
CSS ghi đè của bạn ...
#img_button_1 .ui-btn-inner { border: 0 }
Tôi trả lời này trước khi với một số ví dụ làm việc có thể được tìm thấy ở đây
Jquery Mobile - Using image as link - Blue line below image
Bạn có thể sử dụng kỹ thuật tương tự để giải quyết tất cả các cuộc xung đột JQM CSS của bạn. Bây giờ bạn có thể xem xét lại bằng cách sử dụng JQM để đạt được kết quả mong muốn của bạn biết cách đơn giản để giải quyết những xung đột này bằng cách sử dụng CSS specicivity trong CSS của riêng bạn. Hi vọng điêu nay co ich!
Đây là một giải pháp đơn giản cho tôi, cảm ơn. – robnick
Tôi đã thử sử dụng cách tiếp cận lớp học nhưng mặc dù css của tôi đã được tải sau khi css di động jquery nó đã được overriden. Sử dụng id cố định đó. Cảm ơn. –
Đảm bảo kiểm tra ghi chú phát hành cho mỗi phiên bản mới.
Có những nội dung hữu ích về những thay đổi trong cấu trúc phân cấp css. Tất nhiên, điều này thường ổn định hơn với mỗi bản phát hành, nhưng có lẽ bạn sẽ cần phải biết điều gì đó.
1,4 CSS nâng cấp doc: http://jquerymobile.com/upgrade-guide/1.4/#override-with-custom-css
Rất hữu ích cho mọi người biết. Tôi có thể thấy đây là một công cụ tuyệt vời để tùy chỉnh giao diện người dùng. – jcrowson
ThemeRoller đã chuyển sang: - http://themeroller.jquerymobile.com/ –