2011-06-29 29 views
6

Tôi đang tìm cách chung để áp dụng một số khung CSS bên ngoài trong ứng dụng Rails. Các khung công tác này thường xác định một tập các tên lớp cần được sử dụng cho các phần tử HTML nhất định.Thiết lập lớp CSS mặc định cho các phương thức trợ giúp trình tạo biểu mẫu của Rails

Cân nhắc giao diện người dùng jQuery. Để đạt được một phong cách biểu mẫu nhất quán, bạn sẽ có một cái gì đó như thế này:

# in a view 
<% form_for @foo do |f| %> 
    ... 
    <%= f.text_field :bar, :class => ['ui-widget', 'ui-widget-content', 'ui-widget-container', 'ui-corner-all'] %> 
    or 
    <%= f.text_field :bar, :class => 'ui-widget ui-widget-content ui-widget-container ui-corner-all' %> 
<% end %> 

Làm điều này cho mỗi trường nhập liệu không hề khô chút nào.

Ngay cả một phương pháp helper như

# in application_helper.rb 
def jquery_ui_classes 
    'ui-widget ui-widget-content ui-widget-container ui-corner-all' 
end 

# in a view 
<%= f.text_field :bar, :class => jquery_ui_classes %> 

hoặc

# in application_helper.rb 
def jquery_text_field(form_builder, method, opts = {}) 
    ui = ['ui-widget', 'ui-widget-content', 'ui-widget-container', 'ui-corner-all'] 
    klass = [opts.delete(:class), ui].flatten.compact 
    form_builder.text_field method opts.merge(:class => klass) 
end 

# in a view 
<%= jquery_text_field f, :bar %> 

không nhìn bên phải (hoặc nhiều DRY), vì bạn vẫn sẽ phải chạm vào xem hình thức tạo ra ...

Các cách thay thế hiện có thể là vá lỗi cho lớp InstanceTag hoặc xâm nhập vào trình trợ giúp form_for.

Có ai đã làm điều này trước đây không?

Bằng cách này: Tôi sẽ tránh sử dụng jQuery (hoặc Javascript nói chung) để áp dụng các thuộc tính lớp, vì JS có thể bị vô hiệu hóa hoặc bị chặn hoặc thậm chí cung cấp với sự chậm trễ và gây ra một nhấp nháy ...

Chúc mừng,
Dominik

Trả lời

0

https://github.com/phallstrom/form_helper_css

bạn không thể chỉ định các lớp mà bạn muốn, nhưng nó sẽ thêm tên lớp hợp lý cho tất cả các đầu vào cho phép bạn dễ dàng nhắm mục tiêu họ (trong tất cả các trình duyệt).

+0

Ít nhất, đó là một điểm tuyệt vời để bắt đầu xây dựng một cách tổng quát hơn về việc thêm các lớp theo khuôn khổ cụ thể. Cảm ơn bạn! – DMKE

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