Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- materialize [2024/12/03 15:29]
enric_mieza_sanchez [Pestanyes d'aplicació (tabs)]
+++ materialize [2024/12/03 16:05] (actual)
enric_mieza_sanchez [Pestanyes d'aplicació (tabs)]
@@ Línia 163: / Línia 163: @@
 Elimina els continguts interns del projecte (deixa els encapçalaments, navbar i sidenav) i implementa els tabs "swipeables" amb les 3 pàgines.
-Aquest component (els tabs) necessita ser inicialitzat amb les opcions adequades. Per activar-ho hauràs d'aplicar un codi similar a això a ''init.js'' (observa les ''options'' perquè s'activi l'efecte //swipe//):
+Aquest component (els tabs) necessita ser inicialitzat amb les opcions adequades. Per activar-ho hauràs d'afegir aquest codi al ''init.js'' (observa les ''options'' perquè s'activi l'efecte //swipe//):
 <sxh js>
+window.onload = (event) => {
+    console.log("Pàgina carregada completament. Inicialitzant..");
     var options = { "swipeable": true };
     var el = document.getElementsByClassName('tabs');
     var instance = M.Tabs.init(el, options);
+};
 </sxh>
-Com pots veure, Materialize pot utilitzar jQuery però tampoc és imprescindible (a la majoria de plugins).
-Si volem utilitzar la versió jQuery sería d'aquesta manera:
-<sxh js>
-    $('.tabs').tabs({"swipeable":true});
-</sxh>
-Si volem que aquest codi s'executi quan acabi de carregar-se la pàgina HTML sencera, seria qüestió de posar-ho d'aquesta manera:
-<code javascript>
-(function($){
-  $(function(){
-    // s'executa quan s'acaba de carregar el document HTML sencer
-    $('.tabs').tabs({"swipeable":true});
-  }); // end of document ready
-})(jQuery); // end of jQuery name space
-</code>
 I finalment, per aconseguir que cadascuna de les seccions ocupin l'alçada de la pantalla, caldrà afegir aquestes línies al l'arxiu ''style.css'':

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina