Tôi có rất ít kinh nghiệm về CSS.Tạo kiểu hộp kiểm tra di động jQuery
Tôi muốn tạo kiểu mặc định JQuery Checkboxes để di chuyển biểu tượng đã chọn từ trái sang phải.
Tôi đã sử dụng kỹ năng vẽ Badass của mình để minh họa những gì tôi đang tìm kiếm.
Vì vậy, tôi không yêu cầu người khác thực hiện công việc, chỉ cần một số gợi ý đi đúng hướng.
Cách tốt nhất để đạt được điều này là gì?
Cảm ơn bạn!
Hãy thử nhìn vào sản lượng render sau jQuery Mobile phân tích mã của bạn sử dụng Firebug.
Bạn sẽ có thể xem cấu trúc và các lớp được thêm vào phần tử biểu mẫu. Các tên lớp được thêm vào bởi jQuery Mobile khá hấp dẫn để hiểu.
--UPDATE--
Đây là HTML từ firebug cho các tài liệu jQuery Mobile cho hộp kiểm:
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-label" role="heading">Agree to the terms:</div><div class="ui-controlgroup-controls">
<div class="ui-checkbox"><input type="checkbox" class="custom" id="checkbox-1" name="checkbox-1"><label for="checkbox-1" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-corner-bottom ui-controlgroup-last ui-checkbox-on ui-btn-up-c"><span class="ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">I agree</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"></span></span></label></div>
</div></fieldset>
</div>
Thông báo lớp "ui-BTN icon-trái", tôi 'd chơi với điều đó, bạn có thể không chỉ có thể thay đổi nó thành "ui-btn-icon-right" nhưng bạn có thể chơi với cấu trúc. Tôi đã làm điều này cho các yếu tố khác tuy nhiên tôi đã không được thử nghiệm với các hộp kiểm.
jquery-mobile v1.0 có thuộc tính dữ liệu tùy chỉnh mà bạn có thể sử dụng để điều chỉnh vị trí biểu tượng. Điều này bao gồm các hộp kiểm, nút radio, thanh điều hướng và các yếu tố khác.
Tài liệu: http://code.jquery.com/mobile/latest/demos/docs/buttons/buttons-icons.html
Để tạo hộp kiểm mà bạn đã rút ra trong câu hỏi của bạn ở trên, mã của bạn sẽ là:
<input type="checkbox" name="checkbox-name" id="checkbox-id" />
<label for="checkbox-id" data-iconpos="right">I agree</label>
ý rằng data-iconpos được áp dụng cho label. Đó là bởi vì jQuery Mobile phong cách yếu tố này rất nhiều để hoạt động như phần tử giao diện người dùng trong giao diện người dùng. Nói cách khác, với thuộc tính này, bạn đang định vị biểu tượng đã chọn/bỏ chọn ở bên phải của label.
Lưu ý: Nếu bạn cố giải quyết thuộc tính này và thêm class="ui-btn-icon-right" vào các phần tử của mình, jQuery Mobile có thể xóa các lớp đó khi trang hiển thị.
này bây giờ là một phần của JQM sử dụng các API chuẩn bằng cách thiết lập data-iconpos="right" Xem http://demos.jquerymobile.com/1.4.3/checkboxradio-checkbox/#Iconposition để biết thêm chi tiết
Vâng, tôi đang sử dụng các hộp kiểm chính xác cùng có mặt trên Documents. trang của Jquery tại đây: http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/forms/checkboxes/index.html Ngoài ra, tôi đã thử chơi trực tiếp trong css JQuery nhưng chỉ phá vỡ mọi thứ vì vậy tôi đang chờ một số nguyên nhân khiến tôi không biết làm thế nào để đạt được điều này và Google không thực sự trợ giúp =/ – JFFF
I +1 'd câu hỏi của bạn vì kỹ năng sơn Badass của bạn – akousmata