Websiteentwicklung: Ruby on Rails: jQuery

Aus Wikibooks
Zur Navigation springen Zur Suche springen

Websiteentwicklung Ruby on Rails jQuery

Inhaltsverzeichnis

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


Wikibooks buchseite.svg Zurück zu Views, Partials und Layouts | One wikibook.svg Hoch zu Ruby on Rails | Wikibooks buchseite.svg Vor zu Testen