[英]In Rails 3, how can you make a div a button (a clickable div that links to a new page)
I know that there are options to do this manually, such as here : How do you make the entire DIV clickable to go to another page? 我知道有手动执行此操作的选项,例如: 如何使整个DIV可点击以转到另一个页面?
However, in Rails 3 we make links like this: <%= link_to "name", url %> 但是,在Rails 3中,我们创建如下链接:<%= link_to“name”,url%>
And I am wondering -- is there a proper Rails way to make a whole div a button. 我想知道 - 是否有一个正确的Rails方式来使整个div成为一个按钮。 I realize I could make a button. 我意识到我可以做一个按钮。 However, let's say I want to fill it with content like text and a picture - then how would I make that whole div clickable in a rails way? 但是,假设我想用文本和图片等内容填充它 - 那么我将如何以轨道方式使整个div可点击?
For example: <%= @story.title %> <%= @story.blurb %> 例如:<%= @ story.title%> <%= @ story.blurb%>
In this example, I would want to make #story clickable, with the rails generated content that I specified.. Any ideas? 在这个例子中,我想让#story可点击,轨道生成我指定的内容..任何想法?
For those interested, the answer is: 对于那些感兴趣的人,答案是:
<div class="class_name">
<%= link_to content_tag(:span, "Text for the LInk"), route %>
</div>
And then, in the CSS set .class_name to position:relative; 然后,在CSS中将.class_name设置为position:relative; and: 和:
.class_name span {
width:100%;
height:100%;
position:absolute;
z-index:2;
top:0px;
left:0px;
}
The link will now assume the size of its parent container, and thus give the impression the whole container is a link. 该链接现在将采用其父容器的大小,从而给出整个容器是链接的印象。
I think that button_to is what you need : 我认为button_to是你需要的:
http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to
I might use jquery if you really wanted to do this 如果你真的想这样做,我可能会使用jquery
$(document).ready(function() {
$('#somediv').click(function(event){
document.location = 'http://someplace.com';
});
});
You can't make a "clickable" raw div like that in a rails way... the concept doesn't make any sense. 你不能像铁轨那样制作一个“可点击”的原始div ......这个概念没有任何意义。 That's just not how it works 这不是它的工作原理
(added missing close parens for click) (添加了遗漏的关闭点数)
not tested 未经测试
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.