Zum Inhalt springen

Websiteentwicklung: Ruby on Rails: jQuery

Aus Wikibooks

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.


Klassen für jquery, siehe demo

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