best_in_place显示下拉菜单选项

Question

我认为这是一个普遍的需求，但在找到解决方案方面却没有成功。我跟随Ryan Bates http://railscasts.com/episodes/302-in-place-editing?view=asciicast的这个ASCIIcast，现在在我的网站上进行了功能性编辑。但是，我认为这些记录完全可以编辑是不直观的，因为它们只是在您单击它们之前显示为当前记录值的纯文本表示形式。我想要一些东西，以便默认情况下显示选择下拉列表，就像在图像中所示的普通形式一样。无论如何使用best_in_place或rest_in_place来做到这一点？

Answer 1

我知道这不是您正在寻找的答案，但您可以使用.best_in_place类设置best_in_place值的样式。

我在我的网站上做过类似的事情，这有助于显示价值是可编辑的：

.best_in_place {
    padding-right: 18px;
    background-image: url('*/ link to an edit icon /*');
    background-size: 15px auto;
    background-position: right center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.best_in_place:hover {
  background-color:#eeeeee;
}

Answer 2

我认为你想要做的是找到应用于元素悬停状态的样式，并将它们复制到元素的正常状态。

在chrome检查员中：

• 右键单击选择标记，然后选择＆＃34;检查元素＆＃34;
• 右键单击元素＆＃34; Elements＆＃34;选项卡并选择＆＃34;强制元素状态＆＃34;然后＆＃34; hover＆＃34;

现在，在检查器的右侧，您应该看到应用于元素的:hover状态的样式。将这些复制到样式表中并删除＆＃34;：hover＆＃34;部分来自规则的结尾。您可能需要在规则中添加一些额外的选择器，以确保您不会对整个网站上的所有选择执行此操作。

Answer 3

如果您的原始表单输入是通过单选按钮，则下拉列表是best_in_place的默认行为。否则，您可以使用：colllection来至少验证新数据条目。 例如在haml中，更新的答案必须是红色，绿色或蓝色：

＆＃13;

＆＃13;

.flex1=best_in_place :color, :type => :select, :collection => (["red","blue","green"])

＆＃13;

＆＃13;

＆＃13;