2016

martes, 20 de diciembre de 2016

Plugin javascript para el control de rangos de contacto L-V de 8:00 a 17:00 y S-D de 10:00 a 14:00


Me he visto en la necesidad de crear un "picker" que permita la selección de rangos horarios de contacto, esto con la finalidad de poder especificar que una persona puede ser contactada por ejemplo de Lunes a Viernes de 8:00 a 17:00 y de Sábado a Domingo de 10:00 a 14:00.

Este plugin ha sido desarrollado pensando que sea utilizado junto con la librería de jQuery y al menos la hoja de estilo de Bootstrap (siempre que se quiera un diseño ajustado a Bootstrap).


A continuación los parametros que se pueden establecer en el plugin:

 return $.fn.rangeSheduleContact.defaults = {  
       days: [  
         { label: 'L', tooltip: 'Lunes', value: 'L' },  
         { label: 'M', tooltip: 'Martes', value: 'M' },  
         { label: 'X', tooltip: 'Miércoles', value: 'X' },  
         { label: 'J', tooltip: 'Jueves', value: 'J' },  
         { label: 'V', tooltip: 'Viernes', value: 'V' },  
         { label: 'S', tooltip: 'Sábado', value: 'S' },  
         { label: 'D', tooltip: 'Domingo', value: 'D' }  
       ],  
       minutes: [  
         { label: '00', value: 0 },  
         { label: '15', value: 15 },  
         { label: '30', value: 30 },  
         { label: '45', value: 45 }  
       ],  
       texts: {  
         captionEmptyRange: '<div class="alert alert-info">Especifíque un rango de contacto</div>',  
         iconButtonTextPopup: '<i class="glyphicon glyphicon-chevron-down"></i>',  
         iconButtonDeleteRange: '<i class="glyphicon glyphicon glyphicon-remove"></i>',  
         add: 'Agregar',  
         close: 'Cerrar',  
         titleBarFrom: 'Desde',  
         titleBarTo: 'Hasta',  
         errorMsgSelectDayForm: 'Debe seleccionar el día desde del rango',  
         errorMsgSelectDayTo: 'Debe seleccionar el día hasta del rango',  
         errorMsgSelectHourFrom: 'Debe seleccionar la hora desde del rango',  
         errorMsgSelectHourTo: 'Debe seleccionar la hora hasta del rango',  
         errorMsgSelectMinuteFrom: 'Debe seleccionar el minuto desde del rango',  
         errorMsgSelectMinuteTo: 'Debe seleccionar el minuto hasta del rango',  
         errorMsgDayToLessThanDayFrom: 'El día hasta debe ser un día igual o posterior al día desde',  
         errorMsgRangeInOtherRange: 'El rango especificado se encuentra dentro de otro rango existente'  
       },  
       numbersLineShow: 1,  
       hourMin: 0,  
       hourMax: 24,  
       defaultHourFrom: 8, //Pendiente  
       defaultHourTo: 17, //Pendiente  
       defaultDayFrom: 'L', //Pendiente  
       defaultDayTo: 'V', //Pendiente  
       editable: true,  
       enabled: true,  
       preventRangeNegative: true,  
       preventRangeInOtherRanges: true,  
       callbacks: {  
         callbackErrorMsg: function (element, msg) { alert(msg); },  
         callbackRangeAdd: function (element, range) { },  
         callbackRangeAdded: function (element, range) { },  
         callbackOpenPopup: function (element) { },  
         callbackClosePopup: function (element) { },  
       }  
     };  


Podéis ver el plugin funcionando y el código fuente en JSFiddle.

sábado, 2 de enero de 2016

Los plugins JavaScript/jQuery más utilizados en mis desarrollos - Parte 4 - Animate.css


Este post forma parte de una serie de artículos en los que menciono los plugins que más utilizo en mis desarrollos:

  1. Parte 1: Select2
  2. Parte 2: SweetAlert
  3. Parte 3: Noty
  4. Parte 4: Animate.css
  5. Parte 5: Waipoints
  6. Parte 5: ScrollToFixed
  7. Parte 6: Parallax

Animate.css

A pesar de no ser un plugin como tal, lo he incluido en esta serie de artículos, ya que es una hoja de estilo que se puede combinar con cualquier plugin y permite simplemente realizar animaciones de manera muy muy fácil.



Esta hoja de estilo nos permitirá que los elementos en las páginas tengan un pco más de vida. Por ejemplo, como veremos en el próximo artículo, podríamos utilizarlo junto con el plugin waypoint para ir haciendo aparecer de forma animada los elementos en la página según vamos haciendo scroll.

Veamos algunos ejemplos:


Para mayor información ir a la página oficial: https://github.com/daneden/animate.css