Drukowana wersja tematu

Napisany przez: Killerek 21.06.2018, 20:51:05

Cześć! Raczkuje w temacie javascriptu dlatego jestem tutaj. Zacząłem się bawić Google Material Design do stworzenia strony internetowej. Wszystko szło dobrze dopóki nie musiałem wyświetlić powiadomienia po wczytaniu strony.

O co mi chodzi?
Google Material Design ma funkcję: "Toast", która ma za zadanie wyświetlić powiadomienie u dołu ekranu. Wiem jak ją wywołać za pomocą button, ale kompletnie nie umiem tego przerobić aby ten "Toast" pojawił się po załadowaniu strony.

Jaki mam kod na "Toast"?

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/button.html id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Pokaż "TOAST"</http://december.com/html/4/element/button.html>
<http://december.com/html/4/element/div.html id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
  <http://december.com/html/4/element/div.html class="mdl-snackbar__text"></http://december.com/html/4/element/div.html>
  <http://december.com/html/4/element/button.html class="mdl-snackbar__action" type="button"></http://december.com/html/4/element/button.html>
</http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/script.html>
(function() {
  'use strict';
  window['counter'] = 0;
  var snackbarContainer = document.querySelector('#demo-toast-example');
  var showToastButton = document.querySelector('#demo-show-toast');
  showToastButton.addEventListener('click', function() {
    'use strict';
    var data = {message: 'Toast się wyświetla ' + ++counter};
    snackbarContainer.MaterialSnackbar.showSnackbar(data);
  });
}());
</http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext 

Czy jesteście wstanie mi powiedzieć jak kod odpowiedzialny za wyświetlanie tego powiadomienia przerobić na to aby się pojawiał po załadowaniu strony?

Próbowałem tak, ale nie działa:

[HTML] pobierz, plaintext 
$(document).ready(function(){
notification.MaterialSnackbar.showSnackbar(
  {
    message: 'Image Uploaded'
  }
);
[HTML] pobierz, plaintext 

Będę wdzięczny za rady.

Google Material Design: https://getmdl.io/components/index.html#snackbar-section

--------------

Poradziłem sobie... wystarczyło dobrze w Google poszukać.

Rozwiązanie:

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/div.html id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
	<http://december.com/html/4/element/div.html class="mdl-snackbar__text"></http://december.com/html/4/element/div.html>
	<http://december.com/html/4/element/button.html class="mdl-snackbar__action" type="button"></http://december.com/html/4/element/button.html>
</http://december.com/html/4/element/div.html>
<http://december.com/html/4/element/script.html>
    r(function(){
        var notification = document.querySelector('.mdl-js-snackbar');
        notification.MaterialSnackbar.showSnackbar(
          {
            message: 'and..working!!'
          }
        );
    });
 
    function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
</http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext