best_in_place 显示下拉菜单选项

Posted 2023-02-15

【中文标题】best_in_place 显示下拉菜单选项

【英文标题】：best_in_place show dropdown menu option

【发布时间】：2014-09-28 06:15:05

【问题描述】：

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

【问题讨论】：

关于 SO 问题的一个常见问题是，他们希望读者在查看问题之前先去观看视频。一般来说，人们不会费心去做这件事。此外，很难从该图片中看出您要更改选择的哪个方面。你的意思是你想让它有两个小箭头，但实际上不可编辑？

我知道这有多令人沮丧，但总是有只有所有图像的 ASCII 转换：railscasts.com/episodes/302-in-place-editing?view=asciicast，你是对的，我应该只是链接它。目前，可编辑字段只是屏幕上带有当前值的纯文本，只有在您单击它时才会变成下拉列表。我希望它总是看起来像上图中的样子。这更有意义吗？

您使用哪个 gem/jquery 插件/什么来获得焦点选择的样式？

OIC，BestInPlace 宝石，github.com/bernat/best_in_place

Bootstrap 2.3.2 用于样式和我使用的实际 js 功能github.com/bernat/best_in_place

【参考方案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;

【参考方案2】：

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

在 chrome 检查器中：

右键单击选择标签并选择“检查元素” 右键单击“元素”选项卡中显示的元素并选择“强制元素状态”，然后选择“悬停”

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

【讨论】：

强制任何活动、悬停、焦点、访问都不会产生下拉菜单。我不知道那么多 javascript 但我的假设是在 onclick 事件中它以某种方式将元素更改为下拉菜单。 image of problem

【参考方案3】：

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

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