Junio 24

2017
Ejemplo

Como configurar las novedades

Para definir las novedades  se las podemos enviar o cuando creamos el objeto novelty(novedades) o utilizando la funcion setNovelties(novedades);

Donde novedades es un JSON con dos (2) definiciones obligatorias, y una regla a cumplir. Las definiciones obligatorias son:

  • News
    • Lo primero que tenemos que tener en cuenta es que los nombre de las novedades tienen que empezar por NoveltyX, donde X es el indice de la novedad empezando siempre en UNO (1).
    • Esta definicion tiene otras dos (2) definiciones
      • title: Define el titulo de la ventana de la novedad
      • message: Definde la novedad. Se puede tulizar tags HTML (sin scripts) que se desee, pero tienes que tener en cuenta que esta dentro de un tag <p></P>. Por lo que si quieres definir, por ejemplo, un DIV, primero tienes que cerrar con </p>. Al igual que si deseas incluir un nuevo parrafo primero deberas cerrar el anterior.
  •  Buttons.
    • Aqui definiremos los botones atras, adelante, saltar o los que tu necesites. Debes tener en cuenta que estos tres (3) botones, aunque son opcionales, son fijos y no se pueden cambiar, lo unico que puedes hacer es personalizar el texto que aparece en el boton.
    • [texto del boton]: Definiremos el texto que va a aparecer en el boton.
    • Como en todas las definiciones cada boton tiene otras dos (2) definiciones, las cuales son las que emplearemos para configurar el boton.
      • class: Asignaremos la class CSS que va a utilizar el boton. Por defecto hay dos gray y blue.
      • step: Indicaremos que accion es la que realiza el boton:
        • -1: Ir para atras. Siempre de 1 paso en 1 paso.
        • 0: Saltar el paso.
        • +1: Ir para adelante. Siempre de 1 paso en 1 paso.
        •  {"Func":"[nombre de la funcion]", "Vars":"[variable u objeto que utilice tu funcion]"}: Incluyendo este array podemos enviar nuestra propia funcion, con nuestras propias variables. Esto da la flexibilidad de poder utilizar codigo JAVASCRIPT esterno.
    • Hay que tener en cuenta que los botones se repetiran exactamente los mismos textos en todas las ventanas de novedades.

Ejemplo de uso 1


<script src="/novelty/Novelty.js"></script>
<script type="text/javascript">
novedades = {
'News': {
'Novelty1': { /* Definicion de la novedad, SIEMPRE EMPEZAR EN 1*/
'title': 'Title 1',
'message': 'bla bla bla 1'
},
'Novelty2': {
'title': 'Title 2',
'message': 'bla bla bla 2'
},
'Novelty3': {
'title': 'Title 3',
'message': 'bla bla bla 3'
},
'Novelty4': {
'title': 'Title 4',
'message': 'bla bla bla 4'
},
'Novelty5': {
'title': 'Title 5',
'message': 'bla bla bla 5'
}
},
'Buttons': {
'Back': {
'class': 'blue',
'step': '-1'
},
'Skip': {
'class': 'gray',
'step': '0'
},
'Next': {
'class': 'blue',
'step': '+1'
}
}
}
var Novelty = noveltyJS(novedades);
$(document).ready(function () {
Novelty.start();
});
</script>

Ejemplo de uso 2


<script src="/novelty/Novelty.js"></script>
<script type="text/javascript">
var Novelty = noveltyJS();
$(document).ready(function () {
novedades = {
'News': {
'Novelty1': { /* Definicion de la novedad, SIEMPRE EMPEZAR EN 1*/
'title': 'Title 1',
'message': 'bla bla bla 1'
},
'Novelty2': {
'title': 'Title 2',
'message': 'bla bla bla 2'
},
'Novelty3': {
'title': 'Title 3',
'message': 'bla bla bla 3'
},
'Novelty4': {
'title': 'Title 4',
'message': 'bla bla bla 4'
},
'Novelty5': {
'title': 'Title 5',
'message': 'bla bla bla 5'
}
},
'Buttons': {
'Atras': {
'class': 'blue',
'step': '-1'
},
'Saltar': {
'class': 'gray',
'step': '0'
},
'Siguiente': {
'class': 'blue',
'step': '+1'
}
}
}
Novelty.setNovelties(novedades);
Novelty.start();
});
</script>

Ejemplo de Uso 3

<script src="/novelty/Novelty.js"></script>
<script type="text/javascript">
var Novelty = noveltyJS();
$(document).ready(function () {
params = {
'News': {
'Novelty1': {
'title': 'Realice su registro',
'message': 'bla bla bla 1'
},
'Novelty2': {
'title': 'Registrar Usuario',
'message': '[formulario de registro sin boton enviar]'
}
},
'Buttons': {
'Opciones': {
'class': 'gray',
'step': '+1'
},
'OK': {
'class': 'gray',
'step': {"Func":"Registrar Usuario", "Vars":"objetoUsuario"} /* Aqui iria el boton enviar */
}
}
}
Novelty.setNovelties(params);
Novelty.start();
});
</script>


0 Comentarios

Ejemplo Help2.JPG
Help1.JPG


Archivo