Módulos

Una forma de apreciar la biblioteca Bodystyle es a través de los estilos implementados en sass y procesados a css, la otra forma es la lógica que acompaña a los elementos establecida en JS. En este apartado veremos como se compone la lógica de la librería con el fin de documentar y cuantificar cada uno de los módulos, como así también los mensajes de errores en caso de una inválida inicialización.

Generalidades

Bodystyle se compone por 27 módulos separados escritos en lenguaje JS en los cuales muchos de ellos tienen que ser inicializados con las funciones perinentes según se los necesite.
Para lograr esta tarea es necesario disponer el archivo que contiene a los módulos y permita la inicialización antes mencionada.

Listado de módulos

Como se mencionó anteriormente Bodystyle cuenta con 27 módulos los cuales se detallarán a continuación.

ID Nombre Parámetros Tipos Iniciación Destrucción Descripción
01 Alertas NO N/A Auto N/A Brinda la posibilidad de cerrar las alertas definidas en la página no requiere inicialización manual lo realiza de manera automática
02 BotonInicio NO N/A BS.BotonInicioInit() BS.BotonInicioDestroy() Botón que se muestra en la parte inferior de la página y que le permite al usuario volver al inicia de la misma con un click
03 CódigoC SI JSON Función: BS.CodeCInit
  • texto
  • lineas
 N/A Permite colorear el código en lenguaje C dentro de las etiquetas pre de HTML
04 CódigoCSS SI JSON Función: BS.CodeCssInit
  • texto
  • lineas
 N/A Permite colorear el código en lenguaje CSS dentro de las etiquetas pre de HTML
05 CódigoHTML SI JSON Función: BS.CodeHtmlInit
  • texto
  • lineas
 N/A Permite colorear el código en lenguaje HTML dentro de las etiquetas pre de HTML
05 CódigoJAVA SI JSON Función: BS.CodeJavaInit
  • texto
  • lineas
 N/A Permite colorear el código en lenguaje JAVA dentro de las etiquetas pre de HTML
06 CódigoJS SI JSON Función: BS.CodeJsInit
  • texto
  • lineas
 N/A Permite colorear el código en lenguaje JS dentro de las etiquetas pre de HTML
07 Colecciones SI JSON Función: BS.Colecciones
  • contexto
  • colorFondo
  • colorTexto
  • colorFlechas
BS.Colecciones().destroy("ID Colección") Permite desplegar un submenu de cada items de la colección con el efecto acordeón.
08 ColeccionesFloatante SI JSON Función: BS.ColeccionFlotante
  • contexto
  • fondoItem
  • colorTexto
  • altura
 BS.ColeccionFloatante().destroy("ID Colección") Permite mostrar una lista fija a un lado de la página para utilizarse como guia.
09 Cometarios NO N/A
  • AUTO
  • BS.DynamicsAutoInit()
  • BS.CommentInit()
  • BS.CommentDestroy()
  • BS.DynamicsAutoDestroy()
 Este elemento permite mostrar un mensaje descriptivo de un determinado elemento, y permite al usuario conocer de que se trata para poder actuar en consecuencia.
10 Desactivado NO N/A
  • AUTO
  • BS.DesactivadoInit()
 N/A Permite temporalmente desactivar un elemento en función del estado en el que se encuentre un determinado proceso.
11 Dropdown NO N/A
  • BS.DropdownInit()
  • BS.DynamicsAutoInit()
  • BS.DropdownDestroy()
  • BS.DynamicsAutoDestroy()
 Permite desplegar una lista a partir de un evento realizado al un elemento determinado.
12 Grupos Input NO N/A N/A N/A Permite el manejor de los grupos de formularios y la gestión de los campos requeridos.
13 Imagenes NO N/A BS.ImagenesInit() BS.ImagenesDestroy() Permite realizarle zoom a la imagen.
14 Input Handler NO N/A AUTO
BS.InputHandlerInit() 		N/A Permite validar el required de los input y darle estilos apropiados.
15 Modales NO N/A BS.ModalInit() N/A Permite mostrar una ventana emergente personalizada.
16 Navigation SI string
bool		 BS.NavigationInit("ID", true /false) BS.NavigationDestroy() Permite gestionar la navegación de la página.
17 Paralax NO N/A BS.ParalaxInit() N/A Permite establecer el efecto paralax en las imágenes
18 Personalizado SI JSON BS.Personalizado({ori: "clase Disparador", ele:"clases a agregar"})
BS.Personalize({ori: "clase Disparador", ele:"clases a agregar"})
BS.PersonalizadoDestroy() Permite insertar tips personalizados a los elementos.
19 Range NO N/A N/A N/A Permite darle apariencia al input range
20 Range SI JSON Función BS.ScrollSpyInit()
  • ancho
  • tamFuente
  • colorBorde
  • alturaBorde
  • separacion
  • colorSeleccionado
  • colorNoSeleccionado
 BS.ScrollSpyDestroy() Permite generar una gruia de página para el usuario.
21 Select SI JSON BS.SelectInit().iniciar()
  • ID
  • Tipo de Efecto
 BS.SelectInit().destroy("ID") Select de html mejorado para disponer de una mejor visual
22 Sidebar Drop SI JSON BS.SidebarDropInit()
  • idNav
  • idSidebar
  • submenu
 N/A Permite agregar un sidebar con menues desplegables.
24 Tabs SI JSON BS.TabInit().iniciar()
  • contexto
  • colorFuente
  • colorFondo
  • colorBorde
 BS.TabInit().destroy("ID") Permite agregar un menú de tipo tabs con opciones.
25 Toast SI JSON AUTO N/A Permite mostrar un cartel en pantalla con un mensaje en movimiento.
26 Tooltips NO N/A BS.ToolTipsInit() BS.ToolTipsDestroy() Permite mostrar un elemento dinámico informativo para el usuario.
27 Waves NO N/A AUTO BS.WavesInit() BS.WavesDestroy() Permite mostrar un efecto cuando se hace click en un elemento.

Para poder visualizar correctamente los expresado en la tabla se incluye en esta documentación el código de inicialización de todos los módulos comentados y documentados en app.js.

Códigos de Error

Para los módulos descriptos anteriormente y que necesitan parámetros de entrada, Bodystyle tiene internamente un módulo de gestión de errores uqe muestra, en caso de que se produzca un error, un mensaje a través de la consola del navegador con un determinado formato que le permite al desarrollador donde estuvo la falla.

Bodystyle dice: M0504 Problema con el ID: El id que ingresa a las funciones tiene que estar precedido por el caracter #.

Los dos primeros dígitos pertenecen al ID del módulo y los demás dígitos al codigo del error, en este caso sería un ID erroneo que se envió por parámetro.
Para conocer todos los códigos de errores Ver Gestión de Errores.

`r`n