Componente materializecss Tabs

Acceder Darse de alta He olvidado la contraseña

Topic Resolution: Resolved

Este debate tiene 7 respuestas, 3 mensajes y ha sido actualizado por última vez el 3 años, 7 meses por Alfredo Sanz. This post has been viewed 561 times

Mostrando 4 respuestas a los debates

Autor

Entradas

16-09-2020 a las 10:03 #690

quim

Participante

Buenos dias

He revisado el Wiki pero no encuentro un componente que creo importante y no sé si se va a incluir o nefelizar (creo que no costaria demasiado)

tabs

Este componente, permite la navegación dentro de la misma página y es muy útil para aplicaciones tipo mobile, PWA (aplicaciones web progresivas), etc.

Funciona muy simple. Se carga toda la página de una vez y el control Tabs nos oculta el contenido de las pestañas no seleccionadas.

Puede servir para formularios con muchos campos, que dividimos en secciones y podemos también 'navegar' entre distintas secciones y si se combina con la carga de información via Ajax, el resultado es muy dinámico.

Hay que inicializar el componente para que realice toda la 'magia'

 With Object TWebPage():New()
:aScript := {"$('.tabs').tabs();"}

1 2	With Object TWebPage():New() :aScript := {"$('.tabs').tabs();"}

Luego definimos cada sección, como si fuera un menú, incluyendo en su a href el id # que posteriormente definiremos

 WITH OBJECT WBevel():New( :WO )
:AddHTML('<ul class="tabs">')
:AddHTML(' <li class="tab col"><a href="#colecciones">Colecciones</a></li>')
:AddHTML(' <li class="tab col"><a class="active" href="#modelos">Modelos</a></li>')
:AddHTML(' <li class="tab col"><a href="#articulo">Articulo</a></li>')
:AddHTML(' <li class="tab col"><a href="#pedido">Pedido</a></li>')
:AddHTML('</ul>')
:Create()
END

WITH OBJECT WBevel():New( :WO )

:AddHTML('<ul class="tabs">')

:AddHTML(' <li class="tab col"><a href="#colecciones">Colecciones</a></li>')

:AddHTML(' <li class="tab col"><a class="active" href="#modelos">Modelos</a></li>')

:AddHTML(' <li class="tab col"><a href="#articulo">Articulo</a></li>')

:AddHTML(' <li class="tab col"><a href="#pedido">Pedido</a></li>')

:AddHTML('</ul>')

:Create()

END

Ya sólo queda definir el contenido de las distintas secciones, que podemos hacer con un WBevel

WITH OBJECT WBevel():New( :WO )
:cId := "colecciones"
:cTitle := "Colecciones"
:Create()
END

WITH OBJECT WBevel():New( :WO )

:cId := "colecciones"

:cTitle := "Colecciones"

:Create()

END

Si utilizamos Ajax para cargar el contenido de cada sección, puede ser que queramos mostrar la pestaña actualizada, o darle el foco.

Podemos hacerlo llamando a la funcion jquery del componente:
$('ul.tabs').tabs('select', 'pedido');

No he podido encontrar en la documentación, si existe alguna llamada tipo postSend() o afterSend() para poder incluir código javascript en la respuesta a la llamada Ajax, para dar respuesta (en navegador) al evento mostrado.

Saludos

16-09-2020 a las 14:19 #694

Alfredo Sanz

Superadministrador

Pues sí, se nos ha quedado olvidado.
Voy a ver si lo "nefelizo"

Las llamadas a ajax funcionan indicando el div al que le quieres "incrustar" el ajax

por ejemplo

with OBJECT WComboBox():New(:WO)
     :cId        := "diavisita"
     :aItems     := {{1,"Lunes"},{2,"Martes"},{3,"Miercoles"},{4,"Jueves"},{5,"Viernes"},{6,"Sabado"},{7,"Domingo"}}
     :cText      := "Seleccione el día de visita"
     :cAjaxBevel := "bvHoraVisita"    // Le indicamos que la respuesta al evento no va ha ser una página nueva
                                    // sino que hay que "incrustarla" en el wBevel bvHoraVisita
      :cOnChange  := "actualizahorario"   // Este es el Method de nuestro CGI que procesara la llamada por AJAX
                                          // y nos devolvera el resultado        
      :Create()
end with

with OBJECT WComboBox():New(:WO)

:cId := "diavisita"

:aItems := {{1,"Lunes"},{2,"Martes"},{3,"Miercoles"},{4,"Jueves"},{5,"Viernes"},{6,"Sabado"},{7,"Domingo"}}

:cText := "Seleccione el día de visita"

:cAjaxBevel := "bvHoraVisita" // Le indicamos que la respuesta al evento no va ha ser una página nueva

// sino que hay que "incrustarla" en el wBevel bvHoraVisita

:cOnChange := "actualizahorario" // Este es el Method de nuestro CGI que procesara la llamada por AJAX

// y nos devolvera el resultado

:Create()

end with

Al cambiar el combo ejecuta la función del cgi "actualizarhorario" y el resultado lo mete en "bvHoraVisita"

Se puede decir que lo meta en uno de los paneles del tab siempre y cuando tenga un id único que lo identifique

16-09-2020 a las 16:00 #699

quim

Participante

Buenas tardes

Sí, entiendo como son las llamadas Ajax, es en el tratamiento de la respuesta donde hay que incluir codigo javascript, ya que la página (o el trozo, o el json,...), ya ha sido devuelta al navegador por la funcion indicada en cOnChange o en el submit de un boton de formulario

Un pequeño ejemplo en código, para ver lo que digo (si no está resuelto por otra parte)

function autoformajax( id, url, params, ..., fnCallBack )
{
$.ajax({

url: url,
method: "POST",
data: params,

success: function( html ) {

// 1)
if( html.substring(0, 7) == "" ) {
// Tratar error
} else {
// Inyectar resultado en su contenedor
$( id ).append( html ); o $( id ).html( html );

// 2)
// Llamar a la funcion callback, despues de renderizar el html
// por si hay algun elemento dom afectado

if (fnCallBack) {
try {
fnCallBack();
} catch (e) {
console.log("ERROR : ", e.message);
}
}
}
},
error: function (e) {
$( id ).html(e.responseText);
}
})
}

function autoformajax( id, url, params, ..., fnCallBack )

{

$.ajax({

url: url,

method: "POST",

data: params,

success: function( html ) {

// 1)

if( html.substring(0, 7) == "" ) {

// Tratar error

} else {

// Inyectar resultado en su contenedor

$( id ).append( html ); o $( id ).html( html );

// 2)

// Llamar a la funcion callback, despues de renderizar el html

// por si hay algun elemento dom afectado

if (fnCallBack) {

try {

fnCallBack();

} catch (e) {

console.log("ERROR : ", e.message);

}

error: function (e) {

$( id ).html(e.responseText);

}

})

}

Saludos

16-09-2020 a las 15:30 #695
Pedro Amaro
Superadministrador
Si, la idea es incluir todos los controles de Materialize, este se nos quedo atras y no se muy bien porque, a simple vista es facíl de Nefelizar.

Nos ponemos con el, hay algún otro que no hemos conseguido que funcionen pero seguimos intentandolo.

Para que se ejecute la inicilización del Tabs en el Document ready reemplaza

:aScript := {"$('.tabs').tabs();"}

1

:aScript := {"$('.tabs').tabs();"}

por

cOnReady := "$('.tabs').tabs();"

1

cOnReady := "$('.tabs').tabs();"

Aunque lo parezca cOnReady no se utiliza como una cadena, es una manera de utilizar más comodamente aOnReady, al asignarle un valor hace un AAdd(), tambien tenemos cScript para hacer lo mismo con aScript.
- Esta respuesta fue modificada 3 años, 7 meses por Pedro Amaro.
- Esta respuesta fue modificada 3 años, 7 meses por Pedro Amaro.
- 16-09-2020 a las 15:41 #698
  
  quim
  Participante
  
  Gracias por la respuesta... seguiremos aprendiendo
  
  Cuáles son los controles materializecss que os cuestan implementar ?
  
  Saludos
16-09-2020 a las 16:26 #700

Pedro Amaro
Superadministrador

PushPin no logramos que funcionara
https://materializecss.com/pushpin.html
- 17-09-2020 a las 11:37 #710
  
  quim
  Participante
  
  Buenos dias
  
  No entiendo muy bien este componente ni su utilidad ...
  
  En la demo https://materializecss.com/pushpin-demo.html
  
  Parece que hace un desplazamiento vertical, al estilo de las single web pages, que todo está cargado en una página y se hacen desplazamientos entre secciones, tomando el alto del dispositivo. Es así ?
  
  Saludos
17-09-2020 a las 12:15 #712

Alfredo Sanz
Superadministrador

Te pasa como a nosotros. No terminamos de entender muy bien la utilidad de este control

Autor

Entradas

Mostrando 4 respuestas a los debates

Debes estar registrado para responder a este debate.