如何在Rails中使用div来包装date_select的每一个选择? [英] How to wrap every select of date_select with a div in Rails?

查看:159
本文介绍了如何在Rails中使用div来包装date_select的每一个选择?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用Ruby on Rails 3为用户创建一个表单,在那里他可以保存他的出生日期。控制器和模型的所有操作都很好。但我在这种形式的样式上遇到了麻烦。



对于我的表单中的每个选择,我都会围绕它包装一个div,以便对其进行样式设置,这通常工作得很好。 date_select 的问题是它会生成三个选择框,这些选择框都被包装成一个div。以Haml为例,该字段的代码如下所示:

  .select-wrapper 
= f.date_select:生日,:start_year => Time.now.year - 120,:end_year => Time.now.year

.select_wrapper 围绕所有三个选择框创建一个div,但我需要每个选择框都有它自己的包装。有什么办法解决这个问题吗?



任何帮助将不胜感激。

解决方案

方法1(困难)

覆盖 date_select 代码来处理这个特殊的实例: https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/date_helper.rb#L283

方法2(简单)

使用jQuery: p>

  //找到所有具有包含birthday的ID属性的选择框
//并在它们周围包裹一个div标签('select [id * =birthday]')。


I'm using Ruby on Rails 3 to create a form for the user, where he can save his birthdate. All the actions around the controller and model work just fine. But I'm having trouble with the styling of this form.

For every select in my forms I wrap a div around it, to style it, which normally works just fine. The problem with date_select is that it generates three select boxes which all get wrapped into one div. As example in Haml the code for the field looks like this:

.select-wrapper
  = f.date_select :birthday, :start_year => Time.now.year - 120, :end_year => Time.now.year

The .select_wrapper creates a div around all three select boxes but I need every select box to have it's own wrapper. Is there any way to solve this issue?

Any help would be appreciated. Thanks.

解决方案

Method 1 (Difficult)

Override the date_select code to handle this special instance for you: https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/date_helper.rb#L283

Method 2 (Easy)

Use jQuery:

// Find all select boxes that have an ID attribute containing "birthday"
// and wrap a div tag around them with a certain class
$('select[id*="birthday"]').wrapAll('<div class="select_wrapper">');

这篇关于如何在Rails中使用div来包装date_select的每一个选择?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆