Websiteentwicklung: Ruby on Rails: jQuery
Rails unterstützt die Verwendung der Javascript-Library jQuery.
Beispiel Bearbeiten
Bei der Anzeige der Meldung sollen die Bearbeitungs-Links (show, edit, destroy) unsichtbar sein bis man mit der Maus über die Meldung fährt. Dazu wird der HTML-Code nicht verändert, nur zwei Klassen werden eingeführt: sensor bezeichnet den Bereich der auf die Maus reagieren soll, hide_until_hover muss innerhalb von sensor sein und bezeichnet den Bereich der versteckt wird.
Dazu noch der etwas veränderte Code der hallos/index view:
<div class="meldung sensor">
<p><%=h hallo.von %> sagt:
<span class="hide_until_hover">(
<%= link_to 'Show', hallo_comments_path(hallo) %>
|
<%= link_to 'Edit', edit_hallo_path(hallo) %>
|
<%= link_to 'Destroy', hallo, method: :delete, data: { confirm: 'Are you sure?' } %>
)</span></p>
<blockquote><%=h hallo.meldung %></blockquote>
</div>
Da dieses Javascript nur in den Views von "Hello" gebraucht wird, fügen wir in die
Datei app/assets/javascripts/hallos.js ein:
<script>
$(document).ready(function() {
$('.sensor .hide_until_hover')
.hide();
$('.sensor')
.mouseover( function(){
$('.hide_until_hover', this).show();
})
.mouseout( function(){
$('.hide_until_hover', this).hide();
})
;
});
</script>
Hinweis: es existiert eine leere Datei app/assets/javascripts/hallos.js.coffee. Hier
könnte man CoffeeScript einfügen, dass dann in einem separaten Schritt zu Javascript kompiliert wird.
Man kann diese Datei einfach löschen, wenn man lieber direkt in Javascript arbeiten will.
Quellen
