Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Powiadomienie po wczytaniu strony (Google Material Design)
Killerek
post 21.06.2018, 20:51:05
Post #1





Grupa: Zarejestrowani
Postów: 89
Pomógł: 2
Dołączył: 15.12.2012

Ostrzeżenie: (10%)
X----


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"?
  1. <button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Pokaż "TOAST"</button>
  2. <div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar">
  3. <div class="mdl-snackbar__text"></div>
  4. <button class="mdl-snackbar__action" type="button"></button>
  5. </div>
  6. (function() {
  7. 'use strict';
  8. window['counter'] = 0;
  9. var snackbarContainer = document.querySelector('#demo-toast-example');
  10. var showToastButton = document.querySelector('#demo-show-toast');
  11. showToastButton.addEventListener('click', function() {
  12. 'use strict';
  13. var data = {message: 'Toast się wyświetla ' + ++counter};
  14. snackbarContainer.MaterialSnackbar.showSnackbar(data);
  15. });
  16. }());

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:
  1. $(document).ready(function(){
  2. notification.MaterialSnackbar.showSnackbar(
  3. {
  4. message: 'Image Uploaded'
  5. }
  6. );

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:
  1. <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar">
  2. <div class="mdl-snackbar__text"></div>
  3. <button class="mdl-snackbar__action" type="button"></button>
  4. </div>
  5. r(function(){
  6. var notification = document.querySelector('.mdl-js-snackbar');
  7. notification.MaterialSnackbar.showSnackbar(
  8. {
  9. message: 'and..working!!'
  10. }
  11. );
  12. });
  13.  
  14. function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}


Ten post edytował Killerek 21.06.2018, 20:54:28
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 13:50