Mostrando entradas con la etiqueta Jquery. Mostrar todas las entradas
Mostrando entradas con la etiqueta Jquery. Mostrar todas las entradas

martes, 17 de noviembre de 2015

7 - Tutorial de Laravel 5 - Validar con Ajax JSON y mensajes flash



Bienvenid@s, en este capítulo del Tutorial de Laravel 5 continuamos viendo aspectos de validación de formularios, concretamente nos centraremos en realizar una petición vía ajax al servidor para validar el formulario con el cual estuvimos trabajando en el capítulo anterior, de existir algún error obtendremos una respuesta en formato json con los posibles mensajes de error, esto lo controlaremos desde el método response(array $errors) de la clase MiFormulario, igualmente recibiremos una respuesta json desde la acción validarMiFormulario de ser válido el formulario para mostrar un mensaje de enhorabuena en la vista.

Manejaremos dos posibilidades la utilización de la tecnología ajax para el caso de que el usuario tenga activado javascript, que es lo normal y la extraña posibilidad de que lo tenga desactivado, en este caso controlaremos la petición directa al servidor.

También veremos otro punto importante, el cual es la redirección enviando mensajes flash.

El código de cada uno de los ejercicios los podéis ver a continuación:

Vista miformulario.blade.php:


@extends('layouts.home')
@section('title', 'Mi formulario')
@section('description', 'Validar Mi formulario')
@section('keywords', 'validar, mi, formulario')

@section('content')

<h1>Mi Formulario</h1>

<div class="text-success" id='result'>
    @if(Session::has('message'))
        {{Session::get('message')}}
    @endif
</div>

<form method="post" action="{{url('home/validarmiformulario')}}" id='form'>
    <div class="form-group">
        <label for="nombre">Nombre: </label>
        <input type="text" name="nombre" class="form-control" value="{{Input::old('nombre')}}" />
        <div class="text-danger" id='error_nombre'>{{$errors->formulario->first('nombre')}}</div>
    </div>
    
    <div class="form-group">
        <label for="email">Email: </label>
        <input type="text" name="email" class="form-control" value="{{Input::old('email')}}" />
        <div class="text-danger" id='error_email'>{{$errors->formulario->first('email')}}</div>
    </div>
    {{csrf_field()}}
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>

<script>
 $(function(){
     $("#form").submit(function(e){
         
         var fields = $(this).serialize();
         $.post("{{url('home/validarmiformulario')}}", fields, function(data){
             
             if(data.valid !== undefined){
                 $("#result").html("Enhorabuena formulario enviado correctamente");
                 $("#form")[0].reset();
                 $("#error_nombre").html('');
                 $("#error_email").html('');
             }
             else{
                 $("#error_nombre").html('');
                 $("#error_email").html('');
                 if (data.nombre !== undefined){
                    $("#error_nombre").html(data.nombre); 
                 }
                 if (data.email !== undefined){
                     $("#error_email").html(data.email);
                 }
             }
             
         });
         
         return false;
     });
 });
</script>

@stop


Clase MiFormulario.php:

<?php

namespace App\Http\Requests;
use App\Http\Requests\Request;

class MiFormulario extends Request{
    
    protected $redirect = "home/miformulario";
    
    public function rules(){
        return [
            'nombre' => 'required|min:3|max:12|regex:/^[a-z]+$/i',
            'email' => 'required|email',
        ];
    }
    
    public function messages(){
        return [
            'nombre.required' => 'El campo nombre es requerido',
            'nombre.min' => 'El mínimo permitido son 3 caracteres',
            'nombre.max' => 'El máximo permitido son 12 caracteres',
            'nombre.regex' => 'Sólo se aceptan letras',
            'email.required' => 'El campo email es requerido',
            'email.email' => 'El formato de email es incorrecto',
        ];
    }
    
    public function response(array $errors){
        if ($this->ajax()){
            return response()->json($errors, 200);
        }
        else
        {
        return redirect($this->redirect)
                ->withErrors($errors, 'formulario')
                ->withInput();
        }
    }
    
    public function authorize(){
        return true;
    }
    
}


Acción validarMiFormulario del controlador HomeController:

    public function validarMiFormulario(MiFormulario $formulario){
        $validator = Validator::make(
                $formulario->all(), 
                $formulario->rules(),
                $formulario->messages()
                );
        if ($validator->valid()){
            
            if ($formulario->ajax()){
                return response()->json(["valid" => true], 200);
            }
            else{
            return redirect('home/miformulario')
                    ->with('message', 'Enhorabuena formulario enviado correctamente');
            }
        }
    }





domingo, 1 de noviembre de 2015

Crop Image Plugin - Recortar imagen con PHP y jQuery


Crop Image Plugin es un plugin desarrollado con PHP y jQuery que te permite recortar imágenes, puedes seleccionar la posición y la anchura y altura que deseas extraer, por ejemplo, puede ser muy útil para dar la opción a los usuarios de configurar sus imágenes de pérfil, de un modo similar a los sistemas utilizados por Twitter ó Facebook.

Para descargar el plugin lo pueden hacer en el siguiente enlace ... http://www.phpclasses.org/package/9433-PHP-Crop-an-image-to-a-given-position-and-size.html


Crop Image Plugin - Recortar imagen con PHP y jQuery


martes, 22 de septiembre de 2015

Upload Multiple Images Ajax - Vista previa y subida múltiple de imágenes


El plugin upload-multiple-images-ajax te permite realizar subidas mútiples de imágenes a través de la tecnología ajax, este plugin está desarrollado con jQuery y PHP, entre sus características puedes encontrar la posibilidad de validar las imágenes tanto del lado del cliente como del servidor, por ejemplo, indicar el tipo de imágenes permitidas, el tamaño mínimo y máximo, el número máximo de imágenes que puede ser subidas, ... y por supuesto la previsualización de las imágenes antes de subirlas, con la posibilidad de quitar alguna de ellas si no te gusta a través de un botón de eliminar, el plugin es totalmente compatible con los estilos CSS de bootstrap 3.

Para descargar el plugin puedes hacerlo a través de Github siguiendo el siguiente enlace: https://github.com/ManuDavila/upload-multiple-images-ajax




viernes, 18 de septiembre de 2015

Ámbito y uso de la palabra this en el desarrollo de plugins jQuery


Un plugin jQuery tiene un propósito, lógicamente no vas a crear un plugin para realizar una salida "Hola Mundo", se supone que el trabajo que tienes entre manos es más complejo que eso, de no ser así, mejor ponerse a cotillear en el mural de Facebook, ¡Nooo! que se pierde el tiempo, mejor inventar algo ó por qué no, conocer el ambito y uso de la palabra reservada this en el desarrollo de plugins con jQuery.

Un plugin tan básico como el siguiente te dá la estructura básica para cosas más complejas, el típico "Hola Mundo" cansa ...

(function($){
	/* Método */
	$.fn.holamundo = function(){
		this.html("Hola Mundo cansino");
	};
})(jQuery);

$(function(){
	/* Llamar al método */
	$("body").holamundo();
});


Dentro del método podéis encontrar la palabra this: this.html("Hola Mundo cansino"), curiosa esta palabra y tan útil, ya que con esta palabra estamos accediendo-referenciando al elemento que está llamando al método, en el ejemplo anterior a "body". this nos proporciona información, veamos como obtener un string con el selector que realiza la llamada ...


(function($){
	/* Método */
	$.fn._selector = function(){
	
		//Acceso al selector
		var self = this.selector;
		$(self).text(self);
		};
})(jQuery);

$(function(){
	/* Llamar al método */
	$("body")._selector();
});


Si ejecutáis este código vais a ver como os muestra en el body el string "body", hemos accedido a lo más íntimo del elemento con this.selector. A tener en cuenta la importancia de utilizar la palabra reservada var al declarar variables dentro de los métodos, en los métodos casi todo es intimidad, que nadie se cuele en tu casa y te forme un lío.

El ámbito de this dentro del método también es muy importante aclararlo, un método puede tener en su código interno la llamada a otro método, dentro de la llamada a este método this deja de referenciar al padre y se somete a este otro que convive en su interior, vean el siguiente ejemplo ...


<script>

(function($){
	/* Método */
	$.fn.egocentrico = function(){
	
			//Elemento padre
			this.prepend("<p>Aquí afuera soy el puto amo</p>");
			//Detectar el evento click para los elementos p hijos del elemento padre
			this.find("p").on("mouseover", function(){
				//p interno, this hace referencia al elemento p
				$(this).html("Aquí dentro mando yo");
			});
		};
})(jQuery);

$(function(){
	/* Llamar al método */
	$("#yo").egocentrico();
});
 
</script>

<div id="yo"><p>Que pasa chaval?</p></div>


Como podéis ver this funciona de forma distinta, según los casos descritos en el ejemplo, curioso también el método find() que nos permite acceder a los elementos internos, con un simple this.find("p"), en la construcción de plugins seguro que utilizaréis más de una vez el método find(), bueno y por el momento creo que está bien, es un buen comienzo conocer el ámbito y uso de la palabra reservada this en el desarrollo de plugins, si habéis entendido este concepto, ya tenéis las puertas abiertas para escribir vuestro propios plugins jQuery. A seguir investigando.


jueves, 17 de septiembre de 2015

jQuery explode effect - Efecto explosión


El método explode os permitirá dar un efecto explosión a elementos div.

El método explode poseé dos argumentos options y callback:

El argumento options tiene las siguientes opciones: pieces, columns, pixels y speed.

pieces: para indicar el número de piezas que conformarán la explosión.
columns: para indicar el número de columnas.
pixels: para indicar los píxeles de expansión de la explosión.
speed: para indicar la velocidad de la explosión.

Por defectos el argumento options viene configurado de la siguiente manera:


 var defaults = {
  pieces: 20,
  columns: 4,
  pixels: 50,
  speed: 500
 };

El argumento callback te permitirá incluir instrucciones una vez ha finalizado la animación.

A continuación puedes ver una serie de ejemplos, haz click sobre los elementos:



jQuery explode effect - Efecto explosión by jQuery Manual





Código fuente con el plugin y los ejemplos ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>

<script>

(function($){
/* Author: Manu Dávila | Web: http://jquery-manual.blogspot.com */
$.fn.explode = function(options, callback){
 var defaults = {
  pieces: 20,
  columns: 4,
  pixels: 50,
  speed: 500
 };
 
 if (options === undefined){options = defaults;}
 if (callback === undefined){callback = function(){}};
 if (options.pieces === undefined){options.pieces = defaults.pieces;}
 if (options.columns === undefined){options.columns = defaults.columns;}
 if (options.pixels === undefined){options.pixels = defaults.pixels;}
 if (options.speed === undefined){options.speed = defaults.speed;}
 
 var background_color_piece = this.css("backgroundColor");
 var background_image_piece = this.css("backgroundImage");
 var border_radius_piece = this.css("borderRadius");
 
 this.append("<table style='width: 100%; height: "+this.height()+"px;'></table>");
 for (x = 0; x < (options.pieces/options.columns); x++)
 {
  content = '';
 
  var block = "style='background-color: "+background_color_piece+"; background-image: "+background_image_piece+"; padding: 5px; background-size: 100% 100%; background-repeat: no-repeat; border-radius: "+border_radius_piece+";'";
  
  for (y = 0; y < options.columns; y++)
  {
   content = content + "<td "+block+"></td>";
  }
 
  this.find("table").append("<tr>"+content+"</tr>");
 }
 
 this.css("background", "transparent");
 this.find("table").css({position: "relative"});
 this.find("table").animate({width: "+="+options.pixels, height: "+="+options.pixels, opacity: "-=1", left: "-="+(options.pixels/2), top: "-="+(options.pixels/2)}, options.speed, function(){callback(); $(this).remove();}); 
};
})(jQuery);

 $(function(){
 $("#box-1").on("click", function(){
   $(this).explode({columns: 8, pieces: 64, pixels: 100}, 
   function(){
   $("#box-1").css({backgroundColor: "orange"}); 
   });
 });
 
 $("#img-1").on("click", function(){
   $(this).explode({columns: 4, pieces: 16, pixels: 300, speed: 800}, 
   function(){ 
   $("#img-1").css({backgroundImage: "url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEsomZLE4xMMymwuehFoP1YS9-lZwWcdySyJ9cDSXWBAybrBhEAJoDf8RKMn8MvSPfyfp5eGEVkgBzvKv7o2dn7_iru_BtFgossaTVa8yNU0UpjM2s9-MIFhI0aMr-MI6u7Dzyf8PROKs/s1600/jquery.png)",  backgroundSize: "100% 100%"}); 
   });
 });
 
 $("#img-2").on("click", function(){
   $(this).explode({columns: 10, pieces: 108, pixels: 500, speed: 800}, 
   function(){ 
   $("#img-2").css({backgroundImage: "url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibogdTxELh9pPum7wBneX99F-q1ZDU-XA218Gx3EDpz0wDlcREqB-UiRNwhF56fLaEuE7_9YMBAtlhttj2C4IpH5za0l_HSaYULnq0I9sYcafBvxxaSl-l1P1mWpPRQRm2Npi1Fglvyog/s1600/color.jpeg)", backgroundSize: "100% 100%"}); 
   });
 });
 });
</script>

<style>
#box-1{
width: 150px; 
height: 150px; 
border-radius: 4px;
background-color: orange;
border-radius: 50%;
}

#img-1{
width: 160px; 
height: 160px; 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEsomZLE4xMMymwuehFoP1YS9-lZwWcdySyJ9cDSXWBAybrBhEAJoDf8RKMn8MvSPfyfp5eGEVkgBzvKv7o2dn7_iru_BtFgossaTVa8yNU0UpjM2s9-MIFhI0aMr-MI6u7Dzyf8PROKs/s1600/jquery.png);
background-size: 100% 100%;
border-radius: 50%;
}

#img-2{
width: 160px; 
height: 160px; 
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibogdTxELh9pPum7wBneX99F-q1ZDU-XA218Gx3EDpz0wDlcREqB-UiRNwhF56fLaEuE7_9YMBAtlhttj2C4IpH5za0l_HSaYULnq0I9sYcafBvxxaSl-l1P1mWpPRQRm2Npi1Fglvyog/s1600/color.jpeg);
background-size: 100% 100%;
}


</style>

</head>
<body>
<div style="margin: 100px;">
<h2>jQuery explode effect - Efecto explosión by <a href="http://jquery-manual.blogspot.com">jQuery Manual</a></h2>
<div id="box-1"></div>
<hr />
<div id="img-1"></div>
<hr />
<div id="img-2"></div>
</div>
</body>
</html>


miércoles, 16 de septiembre de 2015

jQuery Spinbox - Crear un input number con jQuery y CSS3


Hola, en esta ocasión os traigo un método jQuery llamado spinbox que os servirá para emular el elemento input number de HTML5, el método spinbox puede ser muy útil para implementarlo en navegadores en los que el elemento input number no es compatible, de hecho, es peculiar que un navegador como Google Chrome en el S.O Android no acepta este elemento.

El método spinbox acepta las opciones fundamentales del input number como son: min, max, value y step. Cada una de ellas pueden ser configuradas al gusto.

Por defecto las opciones vienen con los siguientes valores:

 var defaults = {
  min: 0,
  max: 100,
  value: 0,
  step: 1
 };


Los icono de incremento y decremento son proporcionados por Font Awesome, estilizar el spinbox ya es cuestión de lo que necesitéis, CSS3 está en vuestras manos.

A continuación podéis ver unos ejemplos con un spinbox básico, un spinbox con números negativos y un spinbox con número en punto flotante y al final el código con el plugin y los ejemplos.



Spinbox by jQuery Manual

Por defecto

Números negativos: {min: -50, max: 50, value: -50}

Números en punto flotante: {min: 0, max: 10, value: 0, step: 0.1}



Código fuente del plugin con los ejemplos ...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
<!-- Icons -->
<link rel="stylesheet" type="text/css" href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" />

<script>

(function($){ 
/* Author: Manu Dávila | Web: http://jquery-manual.blogspot.com */
 $.fn.spinbox = function(options){
 var defaults = {
  min: 0,
  max: 100,
  value: 0,
  step: 1
 };
 if (options === undefined){options = defaults;}
 if (options.min === undefined) {options.min = defaults.min;}
 if (options.max === undefined) {options.max = defaults.max;}
 if (options.value === undefined) {options.value = defaults.value;}
 if (options.step === undefined) {options.step = defaults.step;}
 
 options.min = parseFloat(options.min);
 options.max = parseFloat(options.max);
 options.value = parseFloat(options.value);
 options.step = parseFloat(options.step);
 
 var input = this.find("input");
 var spin_up = this.find(".spin-up");
 var spin_down = this.find(".spin-down");
 
 input.val(options.value);
 
 spin_up.on("click", function(){
 
 if (Number(input.val()) !== NaN){
 
  if (parseFloat(input.val()) > options.max || parseFloat(input.val()) < options.min)
  {
   input.val(options.max);
   return;
  }
  
  if (parseFloat(input.val()) < options.max)
  {
  
   value = parseFloat(input.val())+options.step;
   if (String(value).match(/\./) && String(options.step).match(/\./))
   {
    max_decimal = String(options.step).split(".")[1];
    value = value.toFixed(max_decimal);
   }
   input.val(value);
  }
 }
 });
 
 spin_down.on("click", function(){
 if (Number(input.val()) !== NaN){
 
  if (parseFloat(input.val()) < options.min || parseFloat(input.val()) > options.max)
  {
   input.val(options.min);
   return;
  }
  
  if (parseFloat(input.val()) > options.min)
  {
   value = parseFloat(input.val())-options.step;
   if (String(value).match(/\./) && String(options.step).match(/\./))
   {
    max_decimal = String(options.step).split(".")[1];
    value = value.toFixed(max_decimal);
   }
   input.val(value);
  }
 }
 });
 
 
 };
})(jQuery);

 $(function(){
 $("#spinbox-1").spinbox();
 $("#spinbox-2").spinbox({min: -50, max: 50, value: -50});
 $("#spinbox-3").spinbox({min: 0, max: 10, value: 0, step: 0.1});
 });
</script>

<style>
.input-spinbox{
 border: 1px solid #D2E3EB;
 border-radius: 2px;
 padding-top: 5px;
 padding-bottom: 5px;
 padding-right: 2px;
 padding-left: 2px;
}

.input-spinbox:focus{
 border-color: 2px solid #2C426D;
}

.spin-up{
position: relative; 
left: -18px; 
top: -6px;
background-color: #5371AE;
color: #fff;
border-radius: 2px 2px;
}

.spin-down{
position: relative;
left: -36px;
top: 6px;
background-color: #5371AE;
color: #fff;
border-radius: 0px 0px 2px 2px;
}

.spin-up:hover, .spin-down:hover{
 cursor: pointer;
}

</style>

</head>
<body>
<h1>Spinbox by <a href="http://jquery-manual.blogspot.com">jQuery Manual</a></h1>
<h3>Por defecto</h3>
<div id="spinbox-1">
 <input type="text" name="spinbox-1" class="input-spinbox" />
 <span class="spin-up fa fa-angle-up fa-lg"></span>
 <span class="spin-down fa fa-angle-down fa-lg"></span>
</div>
<h3>Números negativos: {min: -50, max: 50, value: -50}</h3>
<div id="spinbox-2">
 <input type="text" name="spinbox-2" class="input-spinbox" />
 <span class="spin-up fa fa-angle-up fa-lg"></span>
 <span class="spin-down fa fa-angle-down fa-lg"></span>
</div>
<h3>Números en punto flotante: {min: 0, max: 10, value: 0, step: 0.1}</h3>
<div id="spinbox-3">
 <input type="text" name="spinbox-3" class="input-spinbox" />
 <span class="spin-up fa fa-angle-up fa-lg"></span>
 <span class="spin-down fa fa-angle-down fa-lg"></span>
</div>
</body>
</html>


lunes, 14 de septiembre de 2015

jQuery Bounce - Efecto rebote con jQuery y CSS3 animations


En esta ocasion os traigo un método jQuery llamado bounce que te permitirá asignar un efecto bounce (rebote) a los elementos visibles del DOM html, para el efecto se utiliza CSS3 animations. por ejemplo, al hacer click o pasar el mouse sobre una imagen o tal vez un determinado div puedes mostrar un atractivo efecto rebote como podrás ver en los diferentes ejemplo que vienen a continuación.

Opciones por defecto del plugin:

 defaults = {
  pixels: 20,
  duration: 0.5,
  delay: 0,
  iteration_count: 1,
  direction: 'normal',
  timing_function: 'linear'
 };



Haz click en los círculos para ver el efecto Bounce

Default

{pixels: 40, duration: 1, direction: 'alternate', timing_function: 'ease-in-out'}

{duration: 0.7, timing_function: 'cubic-bezier(30,10,30,10)'}

Pasa el mouse sobre la siguiente imagen ...



Código fuente del plugin con los ejemplos ...

<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>

<script>
//Author: Manu Dávila | Web: http://jquery-manual.blogspot.com
(function($){
$.fn.bounce = function(options){
 defaults = {
  pixels: 20,
  duration: 0.5,
  delay: 0,
  iteration_count: 1,
  direction: 'normal',
  timing_function: 'linear'
 };
 
 if (options === undefined){options = defaults;}
 if (options.pixels === undefined) {options.pixels = defaults.pixels;}
 if (options.duration === undefined) {options.duration = defaults.duration;}
 if (options.delay === undefined) {options.delay = defaults.delay;}
 if (options.iteration_count === undefined) {options.iteration_count = defaults.iteration_count;}
 if (options.direction === undefined) {options.direction = defaults.direction;}
 if (options.timing_function === undefined) {options.timing_function = defaults.timing_function;}
 
 b_plus_width = new Array();
 b_plus_height = new Array();
 b_plus_width[0] = parseInt(this.width()+options.pixels);
 b_plus_height[0] = parseInt(this.height()+options.pixels);
 b_plus_width[1] = parseInt(this.width()+(options.pixels / 1.8));
 b_plus_height[1] = parseInt(this.height()+(options.pixels / 1.8));
 b_plus_width[2] = parseInt(this.width()+(options.pixels / 1.4));
 b_plus_height[2] = parseInt(this.height()+(options.pixels / 1.4));
 b_plus_width[3] = parseInt(this.width()+(options.pixels / 1.2));
 b_plus_height[3] = parseInt(this.height()+(options.pixels / 1.2));
 
 b_less_width = new Array();
 b_less_height = new Array();
 b_less_width[0] = parseInt(this.width()-options.pixels);
 b_less_height[0] = parseInt(this.height()-options.pixels);
 b_less_width[1] = parseInt(this.width()-(options.pixels / 1.2));
 b_less_height[1] = parseInt(this.height()-(options.pixels / 1.2));
 b_less_width[2] = parseInt(this.width()-(options.pixels / 1.4));
 b_less_height[2] = parseInt(this.height()-(options.pixels / 1.4));
 b_less_width[3] = parseInt(this.width()-(options.pixels / 1.8));
 b_less_height[3] = parseInt(this.height()-(options.pixels / 1.8));
 
 animation = "animation"+Math.floor((Math.random() * 1000000000000000) + 1);

 
 this.find(".style-bounce").remove();
 
 this.append("<style class='style-bounce'>@keyframes "+animation+" {12.5%{width: "+b_less_width[0]+"px; height: "+b_less_height[0]+"px;}25%{width: "+b_plus_width[0]+"px; height: "+b_plus_height[0]+"px;}37.5.%{width: "+b_less_width[1]+"px; height: "+b_less_height[1]+"px;}50%{width: "+b_plus_width[1]+"px; height: "+b_plus_height[1]+"px;}62.5%{width: "+b_less_width[2]+"px; height: "+b_less_height[2]+"px;}75%{width: "+b_plus_width[2]+"px; height: "+b_plus_height[2]+"px;}87.5%{width: "+b_less_width[3]+"px; height: "+b_less_height[3]+"px;}100%{width: "+b_plus_width[3]+"px; height: "+b_plus_height[3]+"px;}}</style>");
 this.css("animation-name", ""+animation+"");
 this.css("animation-duration", ""+options.duration+"s");
 this.css("animation-delay", ""+options.delay+"s");
 this.css("animation-iteration-count", ""+options.iteration_count+"");
 this.css("animation-direction", ""+options.direction+"");
 this.css("animation-timing-function", ""+options.timing_function+"");
 
 
 this.append("<style class='style-bounce'>@-webkit-keyframes "+animation+" {12.5%{width: "+b_less_width[0]+"px; height: "+b_less_height[0]+"px;}25%{width: "+b_plus_width[0]+"px; height: "+b_plus_height[0]+"px;}37.5.%{width: "+b_less_width[1]+"px; height: "+b_less_height[1]+"px;}50%{width: "+b_plus_width[1]+"px; height: "+b_plus_height[1]+"px;}62.5%{width: "+b_less_width[2]+"px; height: "+b_less_height[2]+"px;}75%{width: "+b_plus_width[2]+"px; height: "+b_plus_height[2]+"px;}87.5%{width: "+b_less_width[3]+"px; height: "+b_less_height[3]+"px;}100%{width: "+b_plus_width[3]+"px; height: "+b_plus_height[3]+"px;}}</style>");
 this.css("-webkit-animation-name", ""+animation+"");
 this.css("-webkit-animation-duration", ""+options.duration+"s");
 this.css("-webkit-animation-delay", ""+options.delay+"s");
 this.css("-webkit-animation-iteration-count", ""+options.iteration_count+"");
 this.css("-webkit-animation-direction", ""+options.direction+"");
 this.css("-webkit-animation-timing-function", ""+options.timing_function+"");
 
 this.append("<style class='style-bounce'>@-moz-keyframes "+animation+" {12.5%{width: "+b_less_width[0]+"px; height: "+b_less_height[0]+"px;}25%{width: "+b_plus_width[0]+"px; height: "+b_plus_height[0]+"px;}37.5.%{width: "+b_less_width[1]+"px; height: "+b_less_height[1]+"px;}50%{width: "+b_plus_width[1]+"px; height: "+b_plus_height[1]+"px;}62.5%{width: "+b_less_width[2]+"px; height: "+b_less_height[2]+"px;}75%{width: "+b_plus_width[2]+"px; height: "+b_plus_height[2]+"px;}87.5%{width: "+b_less_width[3]+"px; height: "+b_less_height[3]+"px;}100%{width: "+b_plus_width[3]+"px; height: "+b_plus_height[3]+"px;}}</style>");
 this.css("-moz-animation-name", ""+animation+"");
 this.css("-moz-animation-duration", ""+options.duration+"s");
 this.css("-moz-animation-delay", ""+options.delay+"s");
 this.css("-moz-animation-iteration-count", ""+options.iteration_count+"");
 this.css("-moz-animation-direction", ""+options.direction+"");
 this.css("-moz-animation-timing-function", ""+options.timing_function+"");
 
};
})(jQuery);

 $(function(){
  $("#box-1").on("click", function(e){
   $("#box-1").bounce();
  });
  
  $("#box-2").on("click", function(e){
   $("#box-2").bounce({pixels: 40, duration: 1, direction: 'alternate', timing_function: 'ease-in-out'});
  });
  
  $("#box-3").on("click", function(e){
   $("#box-3").bounce({duration: 0.7, timing_function: 'cubic-bezier(30,10,30,10)'});
  });
  
  $("#img").on("mouseover", function(e){
   $("#img").bounce({pixels: 10, duration: 1, timing_function: 'ease-in-out'});
  });
 });
</script>

<style>
 #box-1{
  background-color: orange;
  width: 50px;
  height: 50px;
  border-radius: 50%;
 }
 
 #box-2{
  background-color: green;
  width: 50px;
  height: 50px;
  border-radius: 50%;
 }
 
 #box-3{
  background-color: pink;
  width: 50px;
  height: 50px;
  border-radius: 50%;
 }
</style>


</head>
<body>
<h1>jQuery bounce</h1>
<h3>Default</h3>
<div id="box-1"></div>
<h3>{pixels: 40, duration: 1, direction: 'alternate', timing_function: 'ease-in-out'}</h3>
<div id="box-2"></div>
<h3>{duration: 0.7, timing_function: 'cubic-bezier(30,10,30,10)'}</h3>
<div id="box-3"></div>
<h3>Pasa el mouse sobre la siguiente imagen ...</h3>
<img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEsomZLE4xMMymwuehFoP1YS9-lZwWcdySyJ9cDSXWBAybrBhEAJoDf8RKMn8MvSPfyfp5eGEVkgBzvKv7o2dn7_iru_BtFgossaTVa8yNU0UpjM2s9-MIFhI0aMr-MI6u7Dzyf8PROKs/s1600/jquery.png" />
</body>
</html>


jueves, 10 de septiembre de 2015

jQuery rotate - Rotación de elementos con jQuery y CSS3 Animations


Hola, en esta ocasión os traigo un método (rotate) que sin duda os va a servir para dar rotación a cualquier elemento que necesitéis, todo ello gracias a CSS3 animations, elegante y configurable a vuestro gusto a través de la posibilidad de modificar sus propiedades: duration, delay, iteration_count, direction y timing_function. Los posibles valores para cada una de estas propiedades son los que ya vienen descritos en CSS3 animations. Por defecto el plugin viene configurado de la siguiente forma:

 var defaults = {
  duration: 1,
  delay: 0,
  iteration_count: 1,
  direction: "normal",
  timing_function: "linear"
 };


A continuación podéis ver algunos ejemplos de animación con jQuery rotate:


jQuery rotate basado en CSS3 animations

Básico

Propiedades: {duration: 3, delay: 3, iteration_count: "infinite", timing_function: "ease"}

Propiedades: {duration: 1, delay: 1, direction: "reverse", iteration_count: "infinite", timing_function: "ease-in"}

Propiedades: {duration: 1, delay: 0, direction: "alternate", iteration_count: 4, timing_function: "ease-in-out"}




El código fuente del plugin con los ejemplos ...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>

<script>

(function($){ 
/* Author: Manu Dávila | Web: http://jquery-manual.blogspot.com */
 $.fn.rotate = function(options){
 var defaults = {
  duration: 1,
  delay: 0,
  iteration_count: 1,
  direction: "normal",
  timing_function: "linear"
 };
 if (options === undefined){options = defaults;}
 if (options.duration === undefined) {options.duration = defaults.duration;}
 if (options.delay === undefined) {options.delay = defaults.delay;}
 if (options.iteration_count === undefined) {options.iteration_count = defaults.iteration_count;}
 if (options.direction === undefined) {options.direction = defaults.direction;}
 if (options.timing_function === undefined) {options.timing_function = defaults.timing_function;}
 
 
 animation = "animation"+Math.floor((Math.random() * 1000000000000000) + 1);
 
 this.find(".style-rotate").remove();
 
 //Normal
 this.append("<style class='style-rotate'>@keyframes " + animation + " {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}</style>");
 this.css("animation-name", ""+animation+"");
 this.css("animation-duration", ""+options.duration+"s");
 this.css("animation-delay", ""+options.delay+"s");
 this.css("animation-iteration-count", ""+options.iteration_count+"");
 this.css("animation-direction", ""+options.direction+"");
 this.css("animation-timing-function", ""+options.timing_function+"");
 //webkit: Chrome, Safari, Opera 
 this.append("<style class='style-rotate'>@-webkit-keyframes " + animation + " {from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);}}</style>");
 this.css("-webkit-animation-name", ""+animation+"");
 this.css("-webkit-animation-duration", ""+options.duration+"s");
 this.css("-webkit-animation-delay", ""+options.delay+"s");
 this.css("-webkit-animation-iteration-count", ""+options.iteration_count+"");
 this.css("-webkit-animation-direction", ""+options.direction+"");
 this.css("-webkit-animation-timing-function", ""+options.timing_function+"");
 //moz: firefox 
 this.append("<style class='style-rotate'>@-moz-keyframes " + animation + " {from {-moz-transform: rotate(0deg);} to {-moz-transform: rotate(360deg);}}</style>");
 this.css("-moz-animation-name", ""+animation+"");
 this.css("-moz-animation-duration", ""+options.duration+"s");
 this.css("-moz-animation-duration", ""+options.delay+"s");
 this.css("-moz-animation-iteration-count", ""+options.iteration_count+"");
 this.css("-moz-animation-direction", ""+options.direction+"");
 this.css("-moz-animation-timing-function", ""+options.timing_function+"");
 };
})(jQuery);

 $(function(){
  $("#box-1").rotate();
  $("#box-2").rotate({duration: 3, delay: 3, iteration_count: "infinite", timing_function: "ease"});
  $("#box-3").rotate({duration: 1, delay: 1, direction: "reverse", iteration_count: "infinite", timing_function: "ease-in"});
  $("#btn").on("click", function(){
   $("#box-4").rotate({duration: 1, delay: 0, direction: "alternate", iteration_count: 4, timing_function: "ease-in-out"});
  });
 });
</script>

<style>
 #box-1{
  width: 150px;
  height: 150px;
  background-color: orange;
 }
 
 #box-2{
  width: 150px;
  height: 150px;
  background-color: green;
 }
 
 #box-3{
  width: 150px;
  height: 150px;
  background-color: pink;
 }
 
 #box-4{
  width: 150px;
  height: 150px;
  background-color: yellow;
 }
</style>

</head>
<body>
<h1>jQuery rotate basado en CSS3 animations</h1>
<h3>Básico</h3>
<div id="box-1"></div>
<h3>Propiedades: {duration: 3, delay: 3, iteration_count: "infinite", timing_function: "ease"}</h3>
<div id="box-2"></div>
<h3>Propiedades: {duration: 1, delay: 1, direction: "reverse", iteration_count: "infinite", timing_function: "ease-in"}</h3>
<div id="box-3"></div>
<h3>Propiedades: {duration: 1, delay: 0, direction: "alternate", iteration_count: 4, timing_function: "ease-in-out"}</h3>
<button id="btn">Click me!!</button>
<div id="box-4"></div>
</body>
</html>


jQuery - selector eq() para acceder a elementos de un modo indexado


Hola, hoy veremos un simple ejemplo de uso del selector eq() en jQuery, este selector nos permitirá acceder a los elementos de un modo indexado, es muy útil por ejemplo para recorrer todos los elementos de una clase, o acceder individualmente a ellos, igualmente para acceder a los elementos de un determinado tag html.

El ejemplo consiste en que el usuario a través de un input number pueda seleccionar el index de un elemento li, el elemento li seleccionado recibirá una clase css que resaltará su estado como activo.

Selecciona el index:
  • li 0
  • li 1
  • li 2
  • li 3


Código fuente del ejemplo ...

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>

<script>
 $(function(){
  $("#input-list").on("change", function(){
   //Eliminar la clase li-active para reiniciar la búsqueda
   $("#list li").removeClass("li-active");
   //Obtener el número index introducido por el usuario
   index = $(this).val();
   //Si el elemento existe
   if ($("#list li:eq("+index+")").length)
   {
    //Agregar la clase li-active al elemento
    $("#list li:eq("+index+")").addClass("li-active");
   }
  });
 
 });
</script>

<style>
 .li-active {
  color: yellow;
  font-weight: bold;
 }
</style>

</head>
<body>
<h3>jQuery - selector eq() para acceder a elementos de un modo indexado</h3>

Selecciona el index: <input type="number" id="input-list" min="0" max="3" value="0">

<ul id="list">
<li>li 0</li>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
</body>
</html>


miércoles, 9 de septiembre de 2015

jQuery - método accordion para crear efecto persiana


Hola, en esta ocasión vamos a ver como podemos crear un método jQuery que nos permita emular un efecto persiana sobre determinados elementos, el objetivo es que podamos pasar este método (accordion) a un elemento, por ejemplo, un button y que al hacer click sobre el mismo se muestro u oculte un determinado contenido, el método accordion contendrá tres argumentos, el primero (element) el cual utilizaremos para indicar el elemento que obtendrá el efecto persiana, el segundo (options) opcional para indicar opciones como pueden ser visible para decidir si el elemento será visible o no de inicio y duration para indicar la velocidad de la animación y y finalmente un tercero (callback) para poder incluir una llamada una vez ha finalizado la animación.

Aquí puedes ver un ejemplo del efecto persiana al hacer click sobre el botón:



Hello World


Código fuente del ejemplo:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
  
  <script>
 
 $.fn.accordion = function(element, options, callback){
 
  defaults = {
   visible: false,
   duration: 400
  };
  
  if (options === undefined){options = defaults;}
  if (callback === undefined){callback = function(){}}
  
  if (!options.visible){$(element).css({display: "none"});}
  
  $(element).addClass("accordion");
  
  this.on("click", function(){
   $(element).slideToggle(options.duration, function(){
   callback();
   });
  });
 };
  
  
    $(function(){
  $("#btn-1").accordion("#box-1", {visible: false, duration: 800}, function(){console.log("Hello World");});
    });
    </script>
  
 </head>
 <body>
   <button type="button" id="btn-1">Accordion</button>
   <div id="box-1">
  <div>Hello World</div>
  <div><a href="#">Link</a></div>
   </div>
 </body>
</html>


Extracting url data from a textarea with jQuery and Javascript


Hello, today you can see one example of how to extract url data from a textarea with jQuery and Javascript, the objetive is detect the keyup event from textarea element and to use the match() method from javascript for url indexing with a regular expression, finally, to show the html link with the finding.


  • Simple demo, write one url, example: https://www.google.com or http://www.google.com.es or http://google.com/home/index.php ...





Example code

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
  
  <script>
     $(function(){
   //Keyup event
   $("#textarea").on("keyup", function(){
    
    //Get the textarea text
    text = $(this).val();
    //find urls
    res = text.match(/http(s)?\:\/\/(www\.)?[a-z0-9\-\.]+[^www\.](\.[a-z]{2,4})[a-z0-9\/\-\_\.]*/i);
    //Yes results
    if (res !== null)
    {
     //Build the link
     $("#link-result").text(res[0]).attr("href", res[0]);
    }
    else
    {
     //Nothing
     $("#link-result").text('').attr("href", '');
    }
   });
     });
    </script>
  
 </head>
 <body>
   <textarea id="textarea" style="height: 150px; width: 100%;"></textarea>
   <div id="result">
   <a href="#" id="link-result" target="_blank"></a>
   </div>
 </body>
</html>


martes, 8 de septiembre de 2015

Extraer url de un textarea con jQuery y Javascript


Hola, en esta ocasión veremos un ejemplo de como extraer una url de un textarea mezclando un poco de jQuery y Javascript. La intención es detectar el evento keyup del textarea para ir realizando una búsqueda con el método match() de Javascript pasando como argumento una expresión regular preparada para indexar urls, si ha sido encontrada alguna url, mostrar la primera coincidencia en un link. Este básico ejemplo puede servir para implementar los típicos loaders de los comentarios que podemos encontrar en plataformas como Facebook ó Twitter, una buena idea como siempre es utilizar la teconolgía AJAX para procesar la url en el servidor por ejemplo con PHP.


  • Simple demostración, escribe alguna url tipo: https://www.google.com ó http://www.google.com.es ó http://google.com/home/index.php ...





Código del ejemplo

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
  
  <script>
   $(function(){
    //Evento que ocurre cuando se suelta la tecla
    $("#textarea").on("keyup", function(){
     
     //Obtener el texto del textarea
     texto = $(this).val();
     //Realizar una búsqueda de urls en el textarea
     res = texto.match(/http(s)?\:\/\/(www\.)?[a-z0-9\-\.]+[^www\.](\.[a-z]{2,4})[a-z0-9\/\-\_\.]*/i);
     //Si hay resultados
     if (res !== null)
     {
      //Mostrar la primera url encontrada
      $("#link-resultado").text(res[0]).attr("href", res[0]);
     }
     else
     {
      //De lo contrario no mostrar nada
      $("#link-resultado").text('').attr("href", '');
     }
    });
   });
  </script>
  
 </head>
 <body>
 <textarea id="textarea" style="width: 100%; height: 150px;"></textarea>
 <div id="resultado">
  <a id="link-resultado" href="" target="_blank"></a>
 </div>
 </body>
</html>


jQuery length - Comprobar si un determinado elemento existe


En esta ocasión veremos como utilizar la propiedad length de jQuery para comprobar si un determinado elemento existe, length regresa 0 si el elemento no existe y si existe regresa el número de elementos. La propiedad length incluida como una condición en una sentencia if nos permitirá obtener un valor boolean, tengan en cuenta que 0 equivale a false, en caso de no existir, de lo contrario la condición será verdaderá ya que será mayor que 0.

A continuación pueden ver un ejemplo práctico ...

<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
  
  <script>
   $(function(){
   
    //Si la clase .exist existe, es mayor que 0
    if ($(".exist").length)
    {
     $("#result-exist").text("Existen " + $(".exist").length + " elementos con la clase .exist");
    }
    
    //Si la clase .foo no existe, es decir, no es mayor que 0
    if (!$(".foo").length)
    {
     $("#result-foo").text("No existe ningún elemento con la clase .foo");
    }
    
   });
  </script>
  
 </head>
 <body>
  <div class="exist">Existo, luego pienso</div>
  <div class="exist">Existo, luego pienso</div>
  <div class="exist">Existo, luego pienso</div>
  
  <p id="result-exist"></p>
  <p id="result-foo"></p>
  
 </body>
</html>


Insertar un elemento a continuación de otro con jQuery - after()


El método after() de jQuery es ideal cuando se trata de mover o crear un nuevo elemento justo a continuación de un determinado elemento.

Por ejemplo, tienes un div y justo después de él quieres agregar un párrafo ...


  <script>
   $(function(){
    $("div#example").after("<p>Párrafo</p>");
   });
  </script>
  
  <div id="example">Hola mundo</div>


O tal vez quieras desplazar un elemento ya existente a continuación de otro ...


  <script>
   $(function(){
    $("div#foo").after($("div#foo h4"));
   });
  </script>
  
  <div id="foo" style="border:1px solid grey; padding: 10px;">
  <h3>Yo me quedo aquí</h3>
  <h4>Yo me voy a continuación</h4>
  <h5>Yo me quedo aquí</h5>
  </div>


Mover un elemento al interior de otro con jQuery - prependTo() y appendTo()


En jQuery existen dos métodos (prependTo() y appendTo()) muy útiles cuando se trata de mover un determinado elemento hacia el interior de otro, esta interactividad puede ser muy útil en determinados momentos, un uso muy común de estos métodos es cuando los elementos de una página web tienden a ajustarse (Responsive Design) debidamente a la resolución de un Desktop, Tablet o Móvil. Supongamos que tenemos un div con un anuncio en una columna lateral, este div se encuentra bien posicionado cuando es mostrado en un Desktop, ¿pero que ocurre cuando se trata de un dispositivo Móvil por ejemplo?, la columna lateral pasa a posicionarse a un segundo plano y en consecuencia el div con el anuncio también, tal vez no quieras que ese elemento div pase a un segundo plano y quieres colocarlo por ejemplo justo encima del contenido principal, estos métodos son ideales para realizar tal función.

$(elemento).prependTo(contenedor) -> El elemento se moverá al principio del contenedor

$(elemento).appendTo(contenedor) -> El elemento se moverá al final del contenedor

A continuación puedes ver un ejemplo con ambos métodos:


<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>
  <script>
   $(function(){
    $("#btn-prepend").on("click", function(){
     $("#prepend").prependTo("#box-1");
    });
    $("#btn-append").on("click", function(){
     $("#append").appendTo("#box-2");
    });
   });
  </script>
 </head>
 <body>
 
  <h3>prependTo()</h3>
  <button type="button" id="btn-prepend">prependTo()</button>
  <div id="box-1" style="border: 1px solid grey; padding: 10px;">
   <h4>Contenedor 1</h4>
  </div>
  
  <div id="prepend" style="color: orange;">
  Con prependTo() me moveré al inicio del contenedor
  </div>
  
  <h3>appendTo()</h3>
  <button type="button" id="btn-append">appendTo()</button>
  <div id="box-2" style="border: 1px solid grey; padding: 10px;">
   <h4>Contenedor 2</h4>
  </div>
  
  <div id="append" style="color: orange;">
  Con appendTo() me moveré al final del contenedor
  </div>
  
 </body>
</html>


miércoles, 12 de agosto de 2015

Crear aplicaciones web con jQuery Mobile y HTML5







Autor: Ninja Code TV

Título: Curso: Desarrollo de WEB Apps con HTML5 y JQuery Mobile 1/4

Descripción:



Otras sugerencias ...

Curso: Desarrollo de WEB Apps con HTML5 y JQuery Mobile 2/4
jQuery Mobile 101
Curso diseño web video 4 (estilos css y maquetación final)
tutorial html 5 y css 3 | crear menu vertivcal con efecto hover
Menús en CSS y Javascript: Efectos
Responsive Design, Media Queries en Español - Parte 2
PHP Session 2 - Docker 101
PHP Session No.2 - Aplicaciones web con Backbone.js
Cómo subir una aplicación a Apple Store
Executando o Python a partir do prompt de comando do Windows
Desenvolvendo Aplicativos para Android em AIR- fechando pacote .APK
Tu pagina web en version movil
jQuery Mobile tutorial - 1- Hello World app !
Tips #3 - Git FTP, UnCSS y Babel
Responsive Web Design with JQuery
HTML5 Mobile Web App Created in 7 Minutes
CURSO BASICO DE HTML5 (lenguaje de programación) Parte 5 / Sitio Web en HTML5 galeria jQuery
Hola Mundo en 10 distintos Lenguajes de Programación
Geolocalizacion con PhoneGap.mp4
PHP Session No. 2 - Cloud Computing: El nuevo modelo de cómputo distribuido

Introducción a PhoneGap (CordovaJS) con jQuery Mobile







Autor: Alberto Angulo

Título: Introducción a PhoneGap (CordovaJS) con jQuery Mobile - Curso PhoneGap de BootCamps de AppsCo

Descripción:

Introducción a PhoneGap (CordovaJS) con jQuery Mobile - Curso PhoneGap de BootCamps de AppsCo
Docente Instructor: Alberto Mario Angulo Flórez - http://albertoangulo.co/

Otras sugerencias ...

Phonegap a tope! (Curso completo)
Curso: Phonegap, qué es y cómo empezar (Parte 1 de 2)
Clase practica | Introduccion a Phonegap
Tutorial de PhoneGap para Android | Cursos Platzi
Post aprende a crear Aplicaciones con PhoneGap
[MONOLOGO] Programas de Concursos / Adal Ramones
Phonegap y Php mediante AJAX
Como crear aplicaciones para Android muy facilmente gracias a Phonegap en DreamWeaver CS6 - Tutorial
WarCry - Guardian De Troya - HD
#1 Aula - Fazendo aplicativos com Jquery Mobile e Phonegap
Screencast - Desarrollo de Apps con Phonegap + jQuery Mobile + Android - Parte 1/2
Tutoría Creando un Website con Css3 y Jquery - Parte 2 - Curso de HTML5 BootCamps de AppsCo
Oba Oba Samba House - Use Somebody / Otherside
HTML5 y jQuery Mobile 1.3.0 en Español - WebApp desde cero con jQuery Mobile - Parte 1/3 - 11/x
Iniciar un proyecto HTML5 con librerías de apoyo Modernizr, Normalize.css y Prefix-Free
PHP and SQLite3
WarCry - Omega - 24 - El Guardián de Troya
Natural Banda Freestyle Brijidito Mijo
Building Apps that Run Everywhere with jQuery Mobile and PhoneGap
[Curso Phonegap / Cordova] Aula 01: Introdução ao Phonegap

Tutorial gratis de Phonegap para Android y iOS - Integración de jQuery Mobile







Autor: Ravi Bedre

Título: Free Phonegap Tutorial for Android & iOS for Beginners 11 - jQueryMobile Integration in Phonegap

Descripción:

This Video turorial will tell you how to integrate the jQuerymobile in Android Phonegap project.

Other Link
1) Phonegap: How to Create iPhone app using Phonegap 3 - Tutorial 1
http://youtu.be/xRIkSlS_Zx4

2) Phonegap: Configure Phonegap 3 for Android in Windows 8 - Tutorial 2
http://youtu.be/FNs5vItWN8c

3) Phonegap: How to Create Project for Android Using Phonegap 3 - Tutorial 3
http://youtu.be/rEZidg5wRWw

4) Phonegap: How to Use Notification using Phonegap 3 in Android - Tutorial 4
http://youtu.be/DxjeMuGht1Q

5) Phonegap: How to get Device Info in Android usign Phonegap 3 - Tutorial 5
http://youtu.be/51KlTXQfNtA

6) Phonegap: Phonegap3 Events in Android - Tutorial 6
http://youtu.be/SbqvvT1s3Ck

7) Phonegap: How to Integrate Database in Android using Phonegap 3 - Tutorial 7
http://youtu.be/NCIdKSeRD-E

8) Phonegap: How to Update record in android using Phonegap 3 - Tutorial 8
http://youtu.be/eMTYGHKADQU

9) Phonegap: How to Delete record from android usign phonegap 3 - Tutorial 9
http://youtu.be/dk7Y1E04qXc

10) Phonegap: How to fetch records from SQLITE using Phonegap3 Storage API - Tutorial 10
http://youtu.be/17HPQIsr2YE


Thank You
Ravi Bedre

Otras sugerencias ...

Getting Started with IBM Worklight (jQuery Mobile + Android and iOS)
Android Studio PhoneGap
How to make android and windows app using phonegap desktop
Dreamweaver jQuery mobile tutorial - Create app for Android (Cars) -part 1
Build PhoneGap Apps with jQuery Mobile
First App on Phonegap
Free Phonegap Tutorial for Android & iOS for Beginners Tutorial 4 - Use Notification in Phonegap
Free Phonegap Tutorial for Android & iOS for Beginners 07 - Integrate SLITE Database in Phonegap
MinneBar 7: Phonegap + jQuery Mobile = Awesome
JQuery Mobile + Dreamweaver full mobile site tutorial
jQuery Mobile Cordova Tutorial - Part 1 of 3
Free Phonegap Tutorial for Android & iOS for Beginners 12 - Create OptionMenu in Phonegap
JQuery mobile Tutorial - 1 - Hello World Application
Phonegap Demo using jQuery Mobile and JSON Services
Really simple demo of how to build an Android app with PhoneGap
Free Phonegap Tutorial for Android & iOS 10 - Fetch Records from SQLITE using Phonegap Storage API
Android & Phonegap with IntelliJ IDEA quick start, short guide & tutorial
SQLite Programming With Javascript
Free Phonegap Tutorial for Android & iOS for Beginners Tutorial 1 - Create iPhone App Using Phonegap