Websiteentwicklung: Ruby on Rails: jQuery

Websiteentwicklung Ruby on Rails jQuery

Rails unterstützt die Verwendung der Javascript-Library jQuery.

Beispiel

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

Zurück zu Views, Partials und Layouts | Hoch zu Ruby on Rails | Vor zu Testen