jQuery Monthpicker un selector de fecha muy sencillo, permite al usuario seleccionar un año y un mes a partir de una pequeña ventana emergente , ofreciendo una devolución de llamada con la selección del año y del mes, este plugin es relativamente simple, el plugin no contiene documentación alguna, pero en esta nota lo explicamos.

Ejemplo:https://cdn.rawgit.com/lugolabs/monthpicker/master/examples/index.html

Aunque podemos deducir por el ejemplo que se tiene la manera de usarse, también podemos deducir por el código del plugin.

1.- Incluimos la referencia del plugin

  <script src="jquery-1.11.1.js"></script>
  <script src="jquery.monthpicker.js"></script>
  <link rel="stylesheet" type="text/css" href="jquery.monthpicker.css">

2.- incluimos el div donde queremos mostrar la fecha seleccionada.

 <a href="#monthpicker" id="monthpicker"></a>

3.- Por ultimo creamos el script con el código que indica los años deseados.

$(function() {
$('#monthpicker').monthpicker({
years: [2015, 2014, 2013, 2012, 2011],
topOffset: 6,
onMonthSelect: function(m, y) {
console.log('Month: ' + m + ', year: ' + y);
}
});
});

Este selector de fecha sin duda es muy básico, por lo que si quieres es recuperar la información seleccionada tendrás que meterlo en un campo oculto en el método  onMonthSelect.

4.- Agregar los meses en español

$(function() {
$('#monthpicker').monthpicker({
years: [2015, 2014, 2013, 2012, 2011],
months:['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
topOffset: 6,
onMonthSelect: function(m, y) {
console.log('Month: ' + m + ', year: ' + y);
}
});
});

The post jQuery Monthpicker un selector de fecha muy sencillo appeared first on Develoteca.

Código de de barras con javascript y jQuery, JsBarcode y jQuery, este plugin te ayuda a generar código de barra para utilizar en tus sistemas o simplemente para generar códigos de barras útiles para tus productos.

El ejemplo lo puedes ver en la siguiente dirección: https://github.com/lindell/JsBarcode

El generador de este plugin: http://lindell.me/JsBarcode/

Teniendo en cuenta este plugin podemos crear de forma sencilla diferentes tipos de códigos de barras, los códigos que soporta este plugin son:

1. CODE128
2. EAN
3. UPC
4. CODE39
5. ITF14
6. ITF
7. Pharmacode

Para generar este código con los datos deseados tenemos que tener en consideración usar los scripts del código, en caso contrario usar el script que contiene todos los códigos.

Incluir los scripts que necesitamos para el código (si no lo conocemos incluimos el que contiene todos los códigos esto será un poco más pesado).

1.- Ejemplo para código 128

<script src="CODE128.js"></script>

<!-- ==ClosureCompiler==-->
<!-- @output_file_name JsBarcode.all.min.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/CODE128.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/CODE39.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/EAN_UPC.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/ITF.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/ITF14.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/pharmacode.js -->
<!-- @code_url https://raw.github.com/lindell/JsBarcode/master/JsBarcode.js -->
<!-- ==/ClosureCompiler== -->

1.- Todo el código.

<!-- Si requieres todos -->

<script src="JsBarcode.all.min.js"></script>

2.- Incluimos el canvas donde queremos mostrar el código.

<canvas id="barcode"></canvas>

3.- Referenciamos la etiqueta canvas para generar el codigo de barras.

$("#barcode").JsBarcode("Hi!");

4.- Controlamos el ancho y alto.

$("#barcode").JsBarcode("Javascript is fun!",{width:1,height:25});

5.- También podemos controlar otras opciones.

{
width: 2,
height: 100,
quite: 10,
format: "CODE128",
displayValue: false,
fontOptions: "",
font:"monospace",
textAlign:"center",
fontSize: 12,
backgroundColor:"",
lineColor:"#000"
}

6.- Otro ejemplo de uso con el formato EAN

$("#barcode").JsBarcode("9780199532179",{format:"EAN",displayValue:true,fontSize:20});

The post Código de de barras con javascript y jQuery, JsBarcode y jQuery appeared first on Develoteca.

BSConfirmation – Simple Popover con jQuery y Bootstrap, este pop-over es una simple demostración de una ventana pequeña aplicable a cualquier proyecto web, sin duda este pequeño plugin nos ayuda a manipular de forma estratégica la información presentada al usuario, lo interesante que tiene este plugin es que esta realizado para ser usado con bootstrap y la forma de implementar es la siguiente.
Ejemplo:http://oscaruhp.github.io/BSCONFIRM/

1.- Primero tienes que incluir las referencias de jQuery, bootstrap y del plugin:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
                
        
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
        <script src="confirmation.js"></script>

2.- El elemento que queremos monitorear

<div class="container" style="margin:350px auto;">
          <button href="http://develoteca.com" target="_blank" class="btn btn-lg btn-danger" id="test">Click to toggle popover</button>
        </div>

3.- A continuación se agrega el script propio del plugin para crear una ventana sencilla y efectiva con bootstrap que puedes utilizar para mostrar cierta información.

        <script type="text/javascript">
            var first = $('#test').confirmation({
                onShow: function() {
                    console.log('Start show event');
                },

                onShown: function() {
                    console.log('Show event has been completed');
                },

                onHide: function() {
                    console.log('Start hide event');
                },

                onHidden: function() {
                    console.log('Hide event has been completed');
                },

                onInserted: function() {
                    console.log('Template has been added to the DOM');
                },

                onCancel: function() {
                    console.log('canceled');
                },

                onConfirm: function() {
                    console.log('confirmed');
                }
            });
        </script>

Puedes descargar el plugin y comentarnos donde lo implementaste.

The post BSConfirmation – Simple Popover con jQuery y Bootstrap appeared first on Develoteca.

Un slider con Bootstrap, algo diferente para implementar en bootstrap, ya conocemos el clásico slider de html5 y si no lo conoces puedes ver este enlace:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_range.

Si ya conoces el elemento html5, puede ser que te interese cambiar el aspecto, bueno pues esto lo vas ha lograr con Bootstrap slider que es un plugin para crear aspectos diferentes con jQuery, este plugin tiene la facultad de generar distintos tipos de presentación.

Por ejemplo puedes usar este plugin para convertir una etiqueta tipo input a un simple slider, o si lo prefieres puedes configurar el slider teniendo en consideración lo siguiente:

1.- Un intervalo,

2.- Cambiar de apariencia (colores),

3.- Cambiar de posición horizontal, vertical

4.- Activar y desactivar el componente.

Si gustas puedes ver el ejemplo en la siguiente dirección: http://seiyria.com/bootstrap-slider/ para utilizar el plugin tienes que hacer lo siguiente:

1.- incluir las referencias del plugin, la hoja de estilos y jQuery plugin

<link href="dependencies/css/bootstrap.min.css" rel="stylesheet">
 <link href="css/bootstrap-slider.css" rel="stylesheet">
<script type='text/javascript' src="dependencies/js/jquery.min.js"></script>
<script type='text/javascript' src="js/bootstrap-slider.js"></script>

2.- Crear los componentes html, los cuales se convertirán en elementos slider.

<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/>

3.- Agregamos el código que convertirá el elemento en un slider.

// With JQuery
$('#ex1').slider({
formatter: function(value) {
return 'Current value: ' + value;
}
});

The post Un slider con Bootstrap, algo diferente appeared first on Develoteca.

jQuery ScrollBox para mostrar imágenes o texto de forma elegante, aunque muchas veces podemos mostrar listas o grupos de contenido, siempre hay una opción que nos permite mejorar dicha presentación de imágenes, bueno pues jQuery ScrollBox es una alternativa que te puede resultar interesante.

Tan solo tienes que mires cuidadosamente este plugin para que puedas imaginar en que proyecto usarlo, los ejemplos son claros y los puedes encontrar en la siguiente dirección: http://wmh.github.io/jquery-scrollbox/ 

Algunos ejemplos usan imágenes para mostrar el potencial de este plugin y otros ejemplos usan contenido que se mueve de un lado a otro, tomate la libertad de usar este plugin en cualquier código siempre y cuando este se encuentre en una etiqueta ul como se indica en el siguiente ejemplo:

<ul>

<li>item 1</li>


<li>item 2</li>


<li>item 3</li>

</ul>



1.- Para la implementación solo necesitas incluir el siguiente código:



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.scrollbox.js"></script>

2.- El etiquetado html con el contenido:

<div id="demo" class="scroll-text">

<ul>

<li>item 1</li>


<li>item 2</li>


<li>item 3</li>

</ul>

</div>

3.- Crear el código para hacer la referencia:

$('#demo').scrollbox();

4.- Utiliza las opciones que aparecen en el sitio del autor: http://wmh.github.io/jquery-scrollbox/ 

The post jQuery ScrollBox para mostrar imágenes o texto de forma elegante appeared first on Develoteca.

Tiny Colorpicker, selector de color redondo con jQuery, es una librería que se implementa para mostrar un selectores de color a los formularios o interfaz de usuario, lo interesante de este plugin es que puedes seleccionar el color de un logo obteniendo los colores del mismo logo, la implementación puedes hacerla creando la referencia adecuada al div requerido.
En la siguiente dirección puedes encontrarte un ejemplo: http://baijs.com/tinycolorpicker/ en donde se muestran ejemplos con este plugin, la manera de usar es la siguiente:

1.- Incluir las referencias de la librería

<link rel="stylesheet" href="tinycolorpicker.css" type="text/css" media="screen"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js">

<script src="jquery.tinycolorpicker.js"></script>

2.- Incluir el código para la creación del picker

<div id="colorPicker">
<a class="color">
<div class="colorInner"></div>

</a>

<div class="track"></div>


<ul class="dropdown">
<li></li>
</ul>

<input type="hidden" class="colorInput"/>
</div>

3.- Incluir el script que convertirá tú código en el picker que deseas

$(document).ready(function()
{
var $box = $('#colorPicker');
$box.tinycolorpicker();
});

The post Tiny Colorpicker, selector de color redondo con jQuery appeared first on Develoteca.

FaceMocion jQuery, emociones estilo facebook emoticons, este plugin esta inspirado en la funcionalidad que tiene facebook que nos permite seleccionar el estado que provoca una publicación, este plugin convierte un elemento input en un icono que al pasar el ratón nos muestra un contenedor de emociones en el cual podemos seleccionarlo .

En el siguiente enlace puedes ver el ejemplo funcionando: http://oscaruhp.github.io/FaceMocion/

Este plugin te puede servir para implementar en algún sistema en donde necesites recolectar información del estado de animo del usuario, la implementación es como se indica a continuación.

1.- Primero tienes que incluir los archivos que necesita el plugin:

 <!-- Bootstrap and JQuery -->
 <link rel="stylesheet" href="bootstrap.min.css"> <!-- Optional -->
 <script src="jquery.min.js"> </script>
 
 <!-- Plugin --> 
 <link href="faceMocion.css" rel="stylesheet" type="text/css" />
 <script src="faceMocion.js"></script> 

2.- Posterior a eso tienes que crear tus campos input que estarán en tu formulario.

<input type="hidden" value="amo" class="facemocion"/>
 <input type="hidden" value="asombro" class="facemocion"/>     

3.- Por último llamar al plugin de la siguiente forma:

$(".facemocion").faceMocion();

4.- Puedes agregar opciones al plugin, para poder crear interesantes emociones (las que desees)

$(".facemocion").faceMocion({emociones:[
         {"emocion":"amo","TextoEmocion":"I love"},
         {"emocion":"molesto","TextoEmocion":"It bothers me"},
         {"emocion":"asusta","TextoEmocion":"it scares"},
         {"emocion":"divierte","TextoEmocion":"I enjoy"},
         {"emocion":"gusta","TextoEmocion":"I like"},
         {"emocion":"triste","TextoEmocion":"It saddens"},
         {"emocion":"asombro","TextoEmocion":"It amazes me"},
         {"emocion":"alegre","TextoEmocion":"I am glad"}
         ]});

The post FaceMocion jQuery, emociones estilo facebook emoticons appeared first on Develoteca.

Colores en un input html con JQuery Palette Color Picker, sin duda el usar el elemento input tipo color, no es suficiente ya que en ocasiones la presentación del selector no es muy amigable y no esta de acuerdo a nuestro diseño, es por eso que aquí tienes un plugin para implementar en esa aplicación,sitio html o portal que estas creando.

jQuery Pallete Color Picker tiene la facultad de restringir o definir los colores que utilizarías, puedes ver el ejemplo en uso: https://htmlpreview.github.io/?https://raw.githubusercontent.com/carloscabo/jquery-palette-color-picker/master/demo.html

A continuación se presenta la implementación de este plugin, lo único que tienes que hacer es lo siguiente:
1.- incluir los estilos (css) y los archivos javascript(js).

<link rel="stylesheet" href="src/palette-color-picker.css">
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script src="src/palette-color-picker.js"></script>

2.- Incluir los elementos html (input) para convertir en color

<!-- <input type="text" name="UNIQUE_NAME"> -->
<input type="text" name="colorin">

3.- El uso basico quedaria de la siguiente forma:

$(document).ready(function(){
  $('[name="colorin"]').paletteColorPicker();
 });

4.- Adicional a esto puedes agregarle opciones al plugin de la siguiente forma:

$(‘[name=”colorin”]’).paletteColorPicker({ colors: [
{“primary”: “#E91E63”},
{“primary_dark”: “#C2185B”},
{“primary_light”: “#F8BBD0”},
{“accent”: “#CDDC39”},
{“primary_text”: “#212121”},
{“secondary_text”: “#727272”},
{“divider”: “#B6B6B6”}
]

});

Con estos simples pasos tienes un resultado que puede sacarte de apuros, en general trabajar con el plugin dejara un poco más presentable tu proyecto web que estés realizando.

The post Colores en un input html con JQuery Palette Color Picker appeared first on Develoteca.

jQuery Toasr Plugin es un plugin realizado para mostrar mensajes de texto estilo Toast (Clase utilizadas en el SDK android), al usar este plugin tenemos la facultad de mostrar un mensaje tipo toast de diferente color, además de eso se pueden cambiar de iconos para tener una solución diferente muy amigable y muy llamativa, lo interesante de este plugin es que es muy configurable que puedes inclusive mover de lugar (izquierda, derecha, centro), en general este plugin tiene configuraciones que permiten controlar los elementos Toast generados, pero bueno no se diga más y veamos la implementación, también puedes apoyarte con la documentación oficial que se encuentra en el siguiente enlace: http://kamranahmed.info/toast

Vamos a empezar a implementar el plugin de la siguiente forma:

Paso 1.- Incluir las referencias a los archivos css y js de la siguiente forma:

 <link rel="stylesheet" href="css/jquery.toast.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.toast.js"></script>

Paso 2.- Posterior a esto podemos usar el toast incluyendo el siguiente código

<script>
$.toast('Mensaje del Toast');
</script>

Otro Ejemplo, en este ejemplo podemos ver claramente otra forma de usar el Toast, donde su principal función es la siguiente:

<script>
$.toast({
    heading: 'Information',
    text: 'Loaders are enabled by default. Use `loader`, `loaderBg` to change the default behavior',
    icon: 'info',
    loader: true,        // Change it to false to disable loader
    loaderBg: '#9EC600'  // To change the background
});
</script>

The post Jquery Toast Plugin appeared first on Develoteca.

jQuery Flip efecto muy llamativo, este efecto te puede servir para mostrar contenido en la parte trasera de un elemento html y lograr por ejemplos mostrar una pequeña descripción con un efecto.

En la siguiente dirección te puedes encontrar un ejemplo:http://nnattawat.github.io/flip/ de como quedaría el efecto de este plugin.

La implementación se guía de 3 pasos en concreto:

1.- Incluye los archivo necesarios (Plugin y jQuery) 

<script src="https://code.jquery.com/jquery-2.1.4.min.js">
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js">

2.-El HTML que quieres manipular con el flip front y back.

<div id="card"> 
<div class="front"> 
     Front content
   </div>
<div class="back">
     Back content
  </div>
</div>

3.- Posterior a esto el script de jQuery que permite lograr ese efecto

$("#card").flip();

4.- Agrega las opciones del plugin necesarios como por ejemplo:
a).- Efecto a hacer clic en el elemento HTML
b).- Efecto al pasar el mouse sobre el elemento HTML.
c).- Efecto controlado con botones HTML.
d).- Efecto de movimiento: eje x ó eje y

Este plugin es muy recomendable para usar en un portafolio, en una galería de imágenes o simplemente en algún elemento HTML que quieres resaltar.

The post jQuery Flip efecto muy llamativo appeared first on Develoteca.

Efecto Zoom con Zoomify, es un plugin que muestra imágenes con un efecto único, debido a que este plugin muestra el efecto zoom que sin duda es algo atractivo al usuario final, puedes ver un ejemplo para que tengas una idea clara de como funciona: http://indrimuska.github.io/zoomify/ en este mismo enlace te puedes encontrar varios ejemplos de imágenes que al presionarlos te muestran la imagen en zoom.

Implementar el plugin es muy sencillo ya que lo que el plugin requiere es crear referencias y utilizarlas, podemos ver en la siguiente explicación como integrarlo.

Paso 1.- Integra las referencias a los archivos css

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/vendor/zoomify/dist/zoomify.min.js"></script>
<link href="css/vendor/zoomify/dist/zoomify.min.css" rel="stylesheet">

Paso 2.- Crear las etiquetas, pueden ser etiquetas img o divs.

<img src="http://yourshot.nationalgeographic.com/u/ss/fQYSUbVfts-T7Ehj8_lPSALDyndvMSNW9paJ9-zKyhc9WOHwTz_HJZV1PUjKLmZxxfsKxzFlKTfmZvJDie7bugKZJhz0j4GfrgatGr1FIhSZBX_3kPYK3nG_dcxSuosO98066GwetCM2h6dHQzncc5rh_NLVATYunSKedq1kLzVM/" class="img-responsive img-thumbnail zoomify" style="transform: scale(1) translate(0px, 0px);">

Paso 3.- Crear el script que convertirá a todas las imágenes.

$('img.myImage1').zoomify(); // Default settings

Puedes configurar tambien otras opciones que estan disponibles en este plugin, como por ejemplo zoomIn y zoomOut, ademas de esas opciones hay eventos que el plugin maneja: zoom-in.zoomify, zoom-in-complete.zoomify, zoom-out.zoomify, zoom-out-complete.zoomify

http://indrimuska.github.io/zoomify/

The post Efecto Zoom con Zoomify appeared first on Develoteca.

3 Galerías con modal integrado, estos plugins te ayudaran a resolver muchos problemas.

Sin duda una de las características que agrada al usuario internauta es la integración de las diferentes galerías, es por eso que aquí te presentamos 3 interesantes plugins que pueden apoyarte en tu proyecto.

Todos los plugins funcionan con jQuery.

1.- Bootstrap Photo Gallery jQuery

Este es un plugin con un galería responsiva realizada para Bootstrap, esta galería tiene como principal ventaja la visualización de un modal con imagen que se visualiza al presionar cualquier imagen de la galería.

El ejemplo lo puedes ver funcionando en :https://rawgit.com/michaelsoriano/bootstrap-photo-gallery/master/demo.html

La documentación esta en la siguiente dirección: http://michaelsoriano.com/create-a-responsive-photo-gallery-with-bootstrap-framework/

2.- jQuery Poptrox

Este plugin esta realizado para mostrar contenido en un modal, el contenido puede tener la siguiente característica:

1.- YouTube

2.- Vimeo

3.- Wistia

4.- Brightcove

5.- Pistas de Soundcloud

6.- Contenido de iframes

7.-Contenido AJAX

El ejemplo lo puedes ver en la siguiente dirección:

http://htmlpreview.github.io/?https://github.com/n33/jquery.poptrox/blob/master/demo/demo1.html

La documentación esta disponible en: https://github.com/ajlkn/jquery.poptrox

3.- Viewer.js

Es un plugin es un plugin que presenta galerias de fotos de una forma efectiva, la diferencia que existe con este plugin es que tiene unas propiedades que permiten configurar la galería y propiamente las opciones que presenta como por ejemplo:

1.- button
2.-navbar
3.- title
4.- toolbar
5.- tooltop
6.- movable
7.- zoomable
8.- rotatable
9.-scalable
10.- transition
11.- fullscreen
12.- keyboard

El ejemplo funcional lo encuentras en: http://fengyuanchen.github.io/viewerjs/

La documentación para que implementes en tu sitio esta en: https://github.com/fengyuanchen/viewerjs 

The post 3 galerías con modal integrado appeared first on Develoteca.

Carrito de compras simple con jQuery Minicart, html y paypal, Minicart es un plugin de jQuery que integra de forma rápida un carro de compras sin necesidad de usar ningún lenguaje de programación del lado del servidor, en pocas palabras funciona solo con jQuery, se integra de forma muy simple ya que aprovecha la ayuda que paypal brinda “Envio de datos mediante el método post”, sin duda una gran utilidad a la hora de vender productos por internet sin la necesidad de conocer a profundidad el entorno para esta plataforma de pago.

Este plugin se basa en el uso simple de Paypal: https://www.paypal.com/cgi-bin/webscr?cmd=p/xcl/web-accept-to-sc-button-outside

Enlace del plugin con desmotración: http://minicartjs.com/
Enlace de la documentación: https://github.com/jeffharrell/minicart#customization

¿Como se implementa? y ¿que necesitas para implementar este plugin?

1.- Incluir los archivos js, tanto de jQuery y minicart.js

<script src="//cdnjs.cloudflare.com/ajax/libs/minicart/3.0.6/minicart.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2.- Crear los elementos html que contendran la informacion de compra “Productos”, en este caso puedes implementarlo en tu proyecto HTML simple.

<input class="item" type="button" value="200" data-description="Película de Ironman " data-title="ironman II" />
<input class="item" type="button" value="150" data-description="Película de Ironman" data-title="ironman I" />

3.- Posterior a eso implementar mediante un script la creación del carrito de compras

paypal.minicart.render();

4.-  Crear los observadores de eventos tanto del botón ver carrito y el botón agregar a carrito

$('#viewcart').click(function (e) {
e.stopPropagation();
paypal.minicart.view.show();
});
$('.item').click(function (e) {
e.stopPropagation();
paypal.minicart.cart.add({
business: 'uhperezoscar@gmail.com',
item_name: $(this).attr("data-title"),
amount: $(this).attr("value"),
currency_code: 'USD',
});
});

The post Carrito de compras simple con jQuery Minicart, html y paypal appeared first on Develoteca.

Para reconocer la voz usa annyang, una librería javascript muy buena que nos ayuda a realizar eventos con la voz, es decir lo que hace es capturar el sonido de la voz y transformarlo en palabras o frases que posteriormente pueden ser programadas para realizar acciones, el funcionamiento es muy simple ya que no tienes que tener gran conocimiento para implementar la funcionalidad de los comandos, en el siguiente vídeo podrás encontrarte una breve demostración implementada en una galería realizada con bootstrap que al recibir palabras “siguiente” y “anterior” la galería reacciona para mostrar los elementos mencionados, cabe mencionar que el ejemplo esta realizado con asp.net pero el código es html, así que lo puedes realizar hasta en un editor de texto sin la necesidad de instalar visual studio.

Vídeo:

El código te lo encuentras en el siguiente enlace: https://github.com/oscaruhp/jqueryPlugins/blob/master/annyang/HtmlPage1.html 

El ejemplo funcional te lo encuentras en:  http://oscaruhp.github.io/jqueryPlugins/ 

1.- Código de la galería:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Control con voz</title>
   
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img {width: 70%;margin: auto;}</style>


</head>

<body>
    


<div class="container">

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>


<li data-target="#myCarousel" data-slide-to="1"></li>


<li data-target="#myCarousel" data-slide-to="2"></li>


<li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>


    <!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">
        <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
      </div>



<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>

    

<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
      </div>



<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>

    </div>


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>


  

    <script>
        function anterior() {
            $('#myCarousel').carousel('prev');
            
        }
        function siguiente() {
            $('#myCarousel').carousel('next');
        }
    </script>
</body>

</html>

2.- Código que se debe de incluir para la ejecución de los comandos.

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>
    <script>
        if (annyang) {
            // Let's define our first command. First the text we expect, and then the function it should call
            var commands = {
                'siguiente': function () {
                    siguiente();
                },
               
                'anterior': function () {
                    anterior();
                },
            };
            annyang.setLanguage('es-MX');
            annyang.addCommands(commands);
            annyang.debug();
            annyang.start({ continuous: false });
        }
</script>

3.- Código final “Galería con voz”

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Control con voz</title>
   
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style>.carousel-inner > .item > img,.carousel-inner > .item > a > img {width: 70%;margin: auto;}</style>


</head>

<body>
    


<div class="container">

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>


<li data-target="#myCarousel" data-slide-to="1"></li>


<li data-target="#myCarousel" data-slide-to="2"></li>


<li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>


    <!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">
        <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
      </div>



<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
      </div>

    

<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Flower" width="460" height="345">
      </div>



<div class="item">
        <img src="http://www.w3schools.com/bootstrap/img_flower2.jpg" alt="Flower" width="460" height="345">
      </div>

    </div>


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>


  

    <script>
        function anterior() {
            $('#myCarousel').carousel('prev');
            
        }
        function siguiente() {
            $('#myCarousel').carousel('next');
        }
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>
    <script>
        if (annyang) {
            // Let's define our first command. First the text we expect, and then the function it should call
            var commands = {
                'siguiente': function () {
                    siguiente();
                },
               
                'anterior': function () {
                    anterior();
                },
            };
            annyang.setLanguage('es-MX');
            annyang.addCommands(commands);
            annyang.debug();
            annyang.start({ continuous: false });
        }
</script>
</body>

</html>

The post Para reconocer la voz usa annyang, una librería javascript muy buena appeared first on Develoteca.

jQuery ImageLens un plugin para lentes de aumento, este plugin nos muestra imágenes con un efecto que aparece al parecer el mouse del ratón, este plugin puede ser muy útil para realizar muestras de elementos con más detalles, también puede servir para mostrar elementos con color, pasando de imagen de color blanco y negro a una imagen de color.

Los ejemplos del plugin puedes encontrártelos en: http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx

Lo interesante del plugin es que solo necesita el archivo jquery y el archivo js del plugin agregar algunas instrucciones y listo, tendrás un resultado muy prometedor, el lugar donde puedes usar este plugin es por ejemplo en la venta de ropa, donde el usuario desea ver más de cerca el tipo de tela en la cual la ropa esta construida y como es la tela.

Para tener un idea clara de como usar este plugin, a continuación tienes una explicacion muy breve y explicado por pasos (Recuerda que si quieres más ejemplos puedes visitar la url del autor: http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx ):

Paso 1. – Incluye código referencial de jQuery y la librería imageLens.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

Paso 2.- Agrega las etiquetas con el tamaño original del imagen y redimenciona la imagen a un tamaño más pequeño

<img id="img_01" src="http://www.dailycoding.com/Uploads/2011/03/imageLens/sample01.jpg" width="384" height="240" />

Paso 3.- Crea las instrucciones referenciales al elemento img con jQuery y el plugin:

<script>
$("#img_01").imageLens();
</script>

The post jQuery ImageLens un plugin para lentes de aumento appeared first on Develoteca.

Plugin jQuery para crear un Multiselect con Bootstrap, sin duda una de las mejoras opciones que existen para mostrar una lista en un dropdown con opciones multiples, Bootstrap Multiselect tiene la facultad de modificar una etiqueta tipo select y convertirlo en cualquiera de estos ejemplos: http://davidstutz.github.io/bootstrap-multiselect/#further-examples

No es sencillo implementar ya que tiene muchas opciones, pero vamos con la documentación que esta en linea en mucho mas sencillo ver el comportamiento y el código de cada uno de los ejemplos, en este texto no se explicara a detalle la instalación de cada uno de los ejemplos: http://davidstutz.github.io/bootstrap-multiselect/ si no que se explicara la implementación básica toca realiza la implementación utilizando la documentación de los autores.

Para su implementación:

1.- incluimos las referencias del plugin.

<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
 
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

2.- El elemento html (En este caso un elemento select lleno de option)

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

3.- La creación de las referencias del plugin:

<!-- Initialize the plugin: -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>

The post Plugin jQuery para crear un Multiselect con Bootstrap appeared first on Develoteca.

clockface un plugin para mostrar un reloj de selección de tiempo, este es un timepicker para Twitter Bootstrap sencillo pero poderoso y fácil de implementar, este plugin tiene 3 formas de presentarse en forma de input, component y también inline a continuación te presentamos la forma de usar este plugin.

1.- Para usar input simplemente se realiza lo siguiente:

Código del input html

<input type="text" id="t1" value="2:30 PM" data-format="hh:mm A" class="input-small">

Código del plugin para jQuery

$(function(){
    $('#t1').clockface();  
});

2.- Para usar como componente se realiza lo siguiente:

Código del input html

<div class="input-append">
    <input type="text" id="t2" value="14:30" class="input-small" readonly="">
    <button class="btn" type="button" id="toggle-btn">
        <i class="icon-time"></i>
    </button>
</div>

Código del plugin para jQuery

$(function(){
    $('#t2').clockface({
        format: 'HH:mm',
        trigger: 'manual'
    });   
 
    $('#toggle-btn').click(function(e){   
        e.stopPropagation();
        $('#t2').clockface('toggle');
    });
});

3.- Para usar inline (reloj abierto)

Código del input html

<div id="t3" class="well" style="padding: 0; float: left"></div>

Código del plugin para jQuery

$(function(){
    $('#t3').clockface({
        format: 'H:mm'
    }).clockface('show', '14:30'); 
});

La url del sitio oficial es la siguiente: http://vitalets.github.io/clockface/index.html donde puedes encontrarte varios ejemplos y además un enlace de descarga de plugin, en la parte de documentación del plugin puedes encontrarte el uso de métodos, parámetros y eventos.

The post clockface un plugin para mostrar un reloj de selección de tiempo appeared first on Develoteca.

Crear un organigrama con jQuery y OrgChart, si quieres crear un organigrama web de forma rápida sin tantas complicaciones puedes utilizar una lista <ul> en html y luego convertirla en un organigrama simple, sencillo y fácil.

1.- Lo primero que tienes que hacer es ver los ejemplos para saber si es lo que buscabas, aquí puedes ver esos ejemplos: https://github.com/dabeng/OrgChart

2.- Luego de eso tienes que crear la estructura que deseas convertir, esto lo haces utilizando etiquetas con jerarquía, en este caso vamos a usar las etiquetas html llamadas <ul>, si tienes dudas de como usar estas etiquetas puedes visitar el siguiente sitio: http://www.w3schools.com/tags/tag_ul.asp en donde te encontraras con ejemplos y explicaciones de esta etiqueta.

3.- Para empezar a usar este plugin tienes que hacer lo siguiente:

a).- Incluir archivos necesarios js y css

<link href="css/jquery.orgchart.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="js/jquery.orgchart.js"></script>

b).- Crear la estructura html

<ul id="CaballerosZodiaco" style="display:none">
 <li>Atenea
 <ul>
 <li>Dohko de Libra
 <ul>
 <li>Shiryu</li>
 </ul>
 </li>
 <li>Camus de Acuario
 <ul>
 <li>Crystal Saint
 <ul>
 <li>Hyoga de Cisne</li>
 </ul>
 </li>
 </ul>
 </li>
 <li>Mu de aries
 <ul>
 <li>Kiki</li>
 </ul>
 
 </li>
 </ul>
 
 </li>
 </ul>
<!-- en la siguiente etiqueta saldrá el resultado: -->
 <div id="Organigrama-resultante">
 
 </div>

c).- Crear la referencia a los elementos <ul> creados.

<script>
$('#Organigrama-resultante').orgchart({
'data': $('#CaballerosZodiaco')
});
</script>

Puedes mirar el siguiente vídeo para la implemetación

The post Crear un organigrama con jQuery y OrgChart appeared first on Develoteca.

jQuery Snow, efecto nieve con jQuery un toque navideño, sin duda la época mas fría es el mes de diciembre y con ella se empieza el espíritu navideño, muchos sitios empiezan a buscar opciones especificas como es el caso de los copos de nieve en web, si eres de las personas que esta en esa situación, que ya le encargaron crear el efecto nieve en un sitio, proyecto o aplicación web, la solución la tienes en el siguiente plugin: http://workshop.rs/2012/01/jquery-snow-falling-plugin/

Este plugin puede generar el efecto de nieve de forma rapida, sencilla y sin complicaciones.

Primero que nada tienes que ver el ejemplo para saber lo que vas ha realizar, este ejemplo lo puedes ver en el siguiente enlace:http://workshop.rs/projects/jqsnow/ si estas convencido de usar este plugin vamos a implementarlo de la siguiente forma:

1.-Crea las referencias a los archivos js y jquery (Descargate los archivos en la parte de arriba)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="jquery.snow.js"></script>

2.- Una vez creada la referencia ponemos el siguiente código al final del documento html de la siguiente forma.

$(document).ready( function(){
    $.fn.snow();
});

3.- Si lo que quieres es cambiar la configuración del plugin lo puedes hacer con las siguientes opciones.

//minSize - min size of snowflake, 10 by default
//maxSize - max size of snowflake, 20 by default
//newOn - frequency in ms of appearing of new snowflake, 500 by default
//flakeColor - color of snowflake, #FFFFFF by default
$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' });

The post jQuery Snow, efecto nieve con jQuery un toque navideño appeared first on Develoteca.

elevateZoom para mostrar el zoom de imágenes,es un complemento de zoom de imagen gratuito con opciones para el zoom de ventana, zoom interno, zoom del objetivo.

Este plugin ser distribuye bajo licencia GPL y MIT, es muy sencillo de implementar, la documentación nos permite crear diferentes formas de mostrar el zoom, en la siguiente dirección puedes ver los ejemplos: http://www.elevateweb.co.uk/image-zoom/examples

1.-Para implementar el plugin es necesario incluir primero jQuery y luego el plugin como se hace en el siguiente código:

<script  type="text/javascript" src="jquery.js"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

2.- incluir un atributo data-zoom-image en tus etiquetas html de img, que tengan la imagen original (la cual sera imagen de zoom):

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

3.- colocar el script del plugin que convierte la imagen en una imagen con zoom.

$("#img_01").elevateZoom();

The post elevateZoom para mostrar el zoom de imágenes appeared first on Develoteca.