Guías y Códigos de C, C++, HTML, HAML, PHP, Python, Ruby, Ruby on Rails, Django, JavaScript, Jquery, Angular, MySQL, PostgreSQL, Comandos de Linux y muchos más para practicar y aprender.

jueves, 2 de abril de 2015

Guía Jquery

<!-- Guía Jquery by dM -->

--- ¿Qué es JQuery? ---

jQuery es una biblioteca de JavaScript, permite simplificar la
manera de interactuar con los documentos HTML, manipular el
árbol DOM, manejar eventos, desarrollar animaciones y agregar
interacción con la técnica AJAX a páginas web.

Cada sentencia en JQuery contiene un "selector", para seleccionar
uno o más elementos HTML del documento.

-Ejemplo:
$(selector).acccion();

-Ejemplo:
$(elemento).metodoAEjecutar();

La función $() hace una petición al documento HTML para encontrar
el elemento especificado por el selector, después regresa un objeto
JQuery que es una colección de todos esos objetos que buscó.

En este punto el evento "document ready" es disparado en el
navegador para dar señal de que el documento esta listo para
ser manipulado por JQuery.

El documento puede ser reconocido especificando el documento como tal
y mandando llamar la función ready(), es decir, que cuando el documento
este listo entonces se disparen los eventos.

$(document).ready()

No es posible interactuar de forma segura con el contenido de una página
hasta que el documento no se encuentre preparado para su manipulación.
jQuery permite detectar dicho estado a través de la declaración
$(document).ready() de forma tal que el bloque se ejecutará sólo una
vez que la página este disponible.

El bloque $(document).ready()

<script>
  $(document).ready(function() {
      console.log('el documento está preparado');
  });
</script>


Es buena practica especificar una función JavaScript anónima junto con
los paréntesis de la función ready(), ejemplo:

<script>
    $(document).ready(function(){
        alert("¡Hola esto es una alerta!");
    });
</script>

En el caso de los eventos, ejemplo:

<script>
    $(elemento).click(function(){
       //Código a ejecutar.
    });
</script>

------------------------
###### Selectores ######
------------------------

Los selectores nos permiten obtener contenido del documento
para poder manipularlo. Digamos que es la parte query de jQuery.

Al ser utilizados, los selectores retornan un array de objetos que
coinciden con los criterios especificados. Este array no es un conjunto
de objetos del DOM, más bien son objetos de Query con un gran número
de funciones y propiedades predefinidas para realizar operaciones con
los mismos.

Selector  Descripción:

- #id = Encuentra elementos por ID o identificador
- .clase = Encuentra elementos por clase
- etiqueta.clase = Encuentra elementos del tipo de la etiqueta que tengan
la clase "clase"
- etiqueta#id.clase = Encuentra elementos del tipo de la etiqueta que tienen
el ID "id" y la clase "clase"
- * = Encuentra todos los elementos de la página

-Repaso:
Existe algo llamado selectores, los selectores nos permiten
levantar una etiqueta por su nombre, id e incluso por su class.
Para levantar un elemento por su id. Primero que nada cuando
usamos como en el ejemplo anterior:

<script>
    $(document).ready(function(){
       //Código a ejecutar cuando se carga la página
    });
</script>

Lo que estamos haciendo es levantar un objeto document que es el
padre de todos los elementos de html, ya sean h1, p, ul, div, span, etc.
Lo que estamos diciendo con el evento ready() es que cuando toda la
página esté lista, cuando todas las etiquetas se hayan cargado,
ejecute el código que tiene dentro de la función.

En el caso de que queramos levantar un elemento por su id deberíamos
usar el caracter # seguido por el nombre del id de la siguiente forma:

<script>
    $("#id_del_elemento")
</script>

-------------------------------------

<!-- Uso de selectores con etiquetas, id y class -->
<!doctype html>
<html lang="en">
<head> 
  <title>Prueba Selectores</title>
  <meta charset="UTF-8">
  <script src="jquery-1.9.1.js" type="text/javascript"></script><html>
  <script type="text/javascript">
  $(document).ready(function() {
    $('p').click(function() {
      alert("Es un párrafo");
    });
    $('b').click(function() {
      alert("Está en negrita");
    });
    $('span').click(function() {
      //alert("Está la etiqueta span");
    });
    $('#span_id').click(function() {
      alert("Etiqueta span con id");
    });
    $('.span_class').click(function() {
      alert("Etiqueta span con class");
    });
  });
  </script>
</head>
<body> 
  <p>Párrafo 1</p>
  <b>Letra A</b>
  <br />
  <br />
  <span>Etiqueta span</span>
  <br />
  <br />
  <span id="span_id">Etiqueta span con id</span>
  <br />
  <br />
  <span class="span_class">Etiqueta span con class</span>
</body>
</html>

-------------------------------------

*Dato: Los Jquery descargados como: jquery-1.9.1.js representan una librería que
se puede manipular para hacer modificaciones, el codigo viene indentado para ser mas
legible, a diferencia de las librerías con la extensión .min.js como: jquery-1.9.1.min.js
que es una versión de la librería donde el codigo viene comprmido, sin indentación lo que
hace el fichero mas liviano al momento de descargarse, util cuando se hace el llamado a
la librería desde un servidor externo.

-------------------------------------

<!--
jQuery provee una manera de correr código cuando el DOM
de una página ya fue descargado y esta listo para ser
utilizado, éste es el evento document.ready, y así es
como se escribe el manejador para este evento:
 -->
<html>
  <head>
      <title>XXX</title>
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
      <meta charset="UTF-8">
  </head>
  <script type="text/javascript">
  $("document").ready(function () {
    alert("¡La página acaba de cargar!");
  });
</script>
<body>
  XXXXXXXXXXXX 
</body>
</html>
<!--
El símbolo "$" indica que este es una sentencia de jQuery
puede ser reemplazada por la palabra "jQuery" pero lo común
es usar el símbolo de dólar ya que es lo más corto.
-->

-------------------------------------

<!--
Podemos crear contenido HTML pasando como parámetro el código a la función $().

Por ejemplo:

var p = $('<p>Nuevo Párrafo</p>');

Adicionalmente podemos usar los métodos html() y text() para obtener y asignar contenido:

html(): retorna el HTML contenido en el primer elemento seleccionado.
html(htmlString): le asigna el valor de la variable htmlString como contenido HTML a todos los elementos encontrados.
text(): retorna el texto contenido en el primer elemento seleccionado.
text(htmlString): le asigna el valor de la variable htmlString como texto a todos los elementos encontrados.

Si pasamos HTML la función text(), el código será escapado y mostrado como texto.

Por ejemplo, partiendo del siguiente HTML:
-->

-------------------------------------

<!-- Hola Mundo en Jquery
imprimir en el documento -->
<html>
    <head>
        <title>jQuery Hello World</title>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <meta charset="UTF-8">
    </head>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#texto").html("Hola mundo con JQuery"); //Este texto se escribira en el documento en donde esta la etiqueta con el id especificado
        });
    </script>
    <script>
        $(document).ready(function() {
            $("p").html("Esto es un párrafo"); // El texto se escribirá en todas las etiquetas (<p>)
        });
    </script>
<body>    
<div id="texto"> <!-- Etiqueta con identificador donde se escribira el texto-->
</div>
<p></p> <!-- Aqui se imprime otro texto enviado en el script -->
</body>
</html>

-------------------------------------

<!-- Escribir html en el documento, usando una función -->
<head>
  <meta charset="UTF-8">
  <title>Prueba jQuery</title>
  <script src="jquery-1.9.1.js" type="text/javascript"></script><html>
  <script type="text/javascript">
     $('document').ready(function() {
      $("#boton1").click(function() {
        $('.cosas').html('<li>Casa</li>');
      });    
     });
  </script> 
</head>
<body> 
  <ul class="cosas">
    <li>Puerta</li>
    <li>Techo</li>
    <li>Ventana</li>
    <li>Piso</li>
  </ul>
</body>
<button id="boton1">Activar</button>
</html>

-------------------------------------

<!-- Hola Mundo con alerta js -->
<html>
    <head>
        <title>jQuery Hello World</title>
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <meta charset="UTF-8">
    </head>
    <script type="text/javascript">
        $(document).ready(function() {
            alert("Hola mundo");
        });
    </script>   
<body>
  xxxxxxxxxx
</body>
</html>

-------------------------------------
<!-- Funciones -->
<html>
    <head>   
      <title>Prueba</title>
      <meta charset="UTF-8">       
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
      <script>
            $(document).ready(function() {
              $("#boton1").click(function() {
                  //alert("¡Alerta 1 Activada!");
                  $("#x").html("Alerta 1 activada");
              });
              $("#boton2").click(function() {
                  //alert("¡Alerta 2 Activada!");
                  $("#x").html("Alerta 2 activada");
              });
            });
        </script>
    </head>
<body>
  <button id="boton1">Activar 1</button> <p />
  <button id="boton2">Activar 2</button>
  <div id="x"></div>
</body>
</html>

-------------------------------------
<!-- Mas ejemplos de funciones simples -->
<html>
 <head>
    <meta charset="UTF-8">
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#perro").click(function() {
            $("#caja").html("Usted escogió un Perro");
          });
          $("#gato").click(function() {
            $("#caja").html("Usted escogió un Gato");
          });
          $("#conejo").click(function() {
            $("#caja").html("Usted escogió un Conejo");
          });
       });
    </script>
  </head>
<body>
  Por favor escoja un animal <p />
  <button id="perro">Perro</button>
  <button id="gato">Gato</button>
  <button id="conejo">Conejo</button>
  <p id="caja"> ... </p> 
</body>
</html>

-------------------------------------

<!-- Activar funcion, funcion con Jquery activada desde un enlace o un botón
el (id) define que funcion usará -->
<html>
    <head>   
      <title>Prueba</title>
      <meta charset="UTF-8">       
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
      <script>
            $(document).ready(function() {
                $("#h").click(function(){
                    alert("Escribirá en el html un Hola Mundo ");
                    $("p").html("Hola Mundo");
                });
                $('#btn').click(function () {
                    alert("Activó la función");
                });
            });
        </script>
    </head>
<body>
    <div id="h">
        <a href="#">Función Hola Mundo</a>
    </div>
    <br />
    <button id="btn">Botón</button>
    <br />
    <p></p>
</body>
</html>

-------------------------------------

<!-- Activar una alerta en Jquery -->
<html>
    <head>   
        <title>Prueba</title>
        <meta charset="UTF-8">       
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                $("#h").click(function(evento){
                    alert("Alerta activada!");
                    evento.preventDefault();
                });
            });
        </script>
    </head>
<body>
    <div id="h">
        <a href="#">Activar alerta</a>
    </div>   
</body>
</html>

-------------------------------------

<!-- Formulario y función con Jquery -->
<html>
 <head>
   <title>prueba</title>
   <script src="jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         $("#boton").click(function(){
            var nombre = $("#nombre").val();
            $("#saludo").html('Hola ' + nombre);
         });
      });
   </script>
 </head>
 <body>
    <form action="javascript:void(0);">
       <input type="text" id="nombre" />
       <input type="button" id="boton" value="Enviar" />
       <div id="saludo"></div>
    </form>
 </body>
</html>

-------------------------------------

<!-- Validacion sencilla de campo vacío con alert -->
<html>
 <head>
   <title>prueba</title>
   <meta charset="UTF-8">
   <script src="jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         $("#boton").click(function(){
            var nombre = $("#nombre").val();
            //$("#saludo").html('Hola ' + nombre);
            if (nombre == '') {
              alert("El nombre es requerido");
            }
            else {
              alert("¡Datos enviados!");
            }
         });         
      });
   </script>
 </head>
 <body>
    <form action="javascript:void(0);">
       <b>Nombre: </b><input type="text" id="nombre" />
       <input type="button" id="boton" value="Enviar" />
       <div id="saludo"></div>
    </form>
 </body>
</html>

-------------------------------------

<!-- Validacion sencilla de un campo vacío con mensaje y estilo -->
<html>
 <head>
    <title>prueba</title>
    <meta charset="UTF-8">
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $("#boton").click(function(){
            var nombre = $("#nombre").val();           
            if (nombre == '') {
              $("#error_mensaje").html('¡Campo requerido!');
              //alert("El nombre es requerido");
            }
            else {
              alert("¡Datos enviados!");
            }
         });         
      });
    </script>
    <style type="text/css">
      span#error_mensaje {
        color: #FF0000;
      }
    </style>
  </head>
  <body>
    <form action="javascript:void(0);">
      <b>Nombre: </b><input type="text" id="nombre" />
      <span id="error_mensaje"></span>
      <br />
      <input type="button" id="boton" value="Enviar" />
    </form>
  </body>
</html>

-------------------------------------

<!-- Copiar párrafo de un elemento a otro -->
<html>
 <head>
    <title>prueba</title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#copiar").click(function(){
             var parrafo = $("#parrafo1").html();
             $("#parrafo2").html(parrafo);
          });
       });
    </script>
 </head>
 <body>
    <p id="parrafo1"> XXXXXXXXXX </p>
    <a id="copiar" href="#"> Copiar </a>
    <p id="parrafo2"> ... </p>
 </body>
</html>

-------------------------------------

<!-- Copiar cadena de un elemento a otro -->
<html>
 <head>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#valor_1").keyup(function(){
             var valor = $(this).val();
             $("#valor_2").val(valor);
          });
       });
    </script>
 </head>
 <body>
    <form action="javascript:void(0);">
       Escribir algo
       <input type="text" id="valor_1" />
       <br />
       <textarea id="valor_2" cols="40" rows="10"></textarea>
    </form>
 </body>
</html>

-------------------------------------

<!-- Cambiar una cadena por otra -->
<html>
 <head>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $("#cambiar").click(function() {
            variable = "YYYYYYY";
            $("#parrafo").html(variable);
          });
       });
      </script>
 </head>
 <body>   
    <a id="cambiar" href="#">
      <button>cambiar</button>
    </a>   
    <p id="parrafo"> XXXXXXX </p>
 </body>
</html>

-------------------------------------

<!-- Método hover en Jquery -->
<html>
  <head>
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var texto = $("#caja").html();
        $("#caja").hover(
        function() {
          $(this).html('XXXXX');//Mouse arriba del elemento         
        },
        function() {
          $(this).html(texto);//Mouse fuera del elemento
        }
      );
    });
 </script>
 <style type="text/css">
   #caja {
     background-color: #ccc;
     width: 100px;
     height: 100px;
     padding: 10px;
   }
 </style>
  </head>
<body>
  <div id="caja">
    Posicione el mouse arriba
  </div>
</body>
</html>

-------------------------------------

<!--Syntaxis del método .attr

Return the value of an attribute:
$(selector).attr(attribute)

Set the attribute and value:
$(selector).attr(attribute,value)

Set attribute and value using a function:
$(selector).attr(attribute,function(index,currentvalue))

Set multiple attributes and values:
$(selector).attr({attribute:value, attribute:value,...})
-->

<!-- Cambiar los atributos de una imagen con el metodo .attr -->
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
  $(document).ready(function(){
    $("#aumentar").click(function(){
      $("img").attr("width", "200");
    });
    $("#normal").click(function(){
      $("img").attr("width", "100");
    });
  });
</script>
</head>
<body>
<img src="firefox-icon.png" width="100"> <br />
<button id="aumentar">Aumentar</button>
<button id="normal">Normal</button>
</body>
</html>

-------------------------------------

<!-- Datepicker con Jquery -->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

-------------------------------------

<!-- Datepicker con Jquery, editando atributos -->
<html>
<head>
    <meta charset="utf-8" />
    <title>Seleccionar una fecha con jquery-ui</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script>
        $(function() {
            $("#fecha").datepicker(
                {
                    dateFormat: "dd/mm/yy",
                    dayNames: [ "Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado" ],
                    dayNamesMin: [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa" ],
                    firstDay: 1,
                    gotoCurrent: true,
                    monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Deciembre" ]
                }
            );
        });
    </script>
    <style>
        #fecha {
            width:100px;
            text-align:center;
        }
    </style>
</head>
<body>
    <h1>Ejemplo de seleccionar una fecha con jquery-ui</h1>
    <form>
        <p>Fecha: <input type="text" name="fecha" id="fecha" value=""></p>
    </form>
</body>
</html>

-------------------------------------

<!-- Ejemplo de aplicación con un diálogo para entrada de textos
  y fechas, mediante el componente jQuery UI Datepicker. -->
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Dialogo para formulario simple</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="jquery.ui.datepicker-es.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.2.sunny.css" />
  <script>
    $(function () {
    $(function () {
    $.datepicker.setDefaults($.datepicker.regional["es"]);
    $("#datepicker").datepicker({
    firstDay: 1
    });
    });
    $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
    "Aceptar": function () {
    var texto1 = document.getElementById('nombre').firstChild;
    var newText1 = document.createTextNode(el_nombre.value);
    texto1.parentNode.replaceChild(newText1, texto1);
    var texto2 = document.getElementById('fecha').firstChild;
    var newText2 = document.createTextNode(datepicker.value);
    texto2.parentNode.replaceChild(newText2, texto2);
    $(this).dialog("close");
    },
    "Cerrar": function () {
    $(this).dialog("close");
    }
    }
    });
    $("#abrir")
    .button()
    .click(function () {
    el_nombre.value = document.getElementById('nombre').firstChild.nodeValue;
    datepicker.value = document.getElementById('fecha').firstChild.nodeValue;
    $("#dialog").dialog("option", "width", 600);
    $("#dialog").dialog("option", "height", 300);
    $("#dialog").dialog("option", "resizable", false);
    $("#dialog").dialog("open");
    });
    });
  </script>
</head>
<body>
  <div id="dialog" title="Formulario simple">
  Nombre:<input type="text" id="el_nombre" value="" /><br />
  Fecha:<input type="text" id="datepicker" />
  </div>
  Nombre: <strong id="nombre">Julio</strong><br />
  Fecha: <strong id="fecha">11/07/1975</strong><br />
  <hr />
  <button id="abrir">Abrir diálogo</button>
</body>
</html>

-------------------------------------

<!-- Validación con jQuery.validate, mensaje de alerta junto al campo -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Validación con jQuery.validate</title>
  <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
  <script src="js/jquery.validate.js" type="text/javascript"></script>
  <script>
  $(document).ready(function () {
    $("#form1").validate();
   
    $("#txtNombre").rules("add", {
        required: true,
        messages: {
            required: "<span>El campo nombre es obligatorio</span>"
        }
    });

    $("#txtPwd").rules("add", {
        required: true,
        minlength: 6,
        messages: {
            required: "<span>El password no puede ser nulo.</span>",
            minlength: $.validator.format("<span>El largo mínimo permitido es {0} caracteres.</span>")
        }
    });

    $("#txtEdad").rules("add", {
        required: true,
        min: 18,
        messages: {
            required: "<span>Debe entrar una edad.</span>",
            min: $.validator.format("<span>La edad mínima debe ser {0} años.</span>"),
            max: $.validator.format("<span>La edad máxima debe ser {0} años.</span>")
        }
    });

    $("#txtEmail").rules("add", {
        email: true,
        messages: {
            email:"<span>Debe ingresar un email válido o dejarlo en blanco</span>"
        }
    });

    $('#btn').click(function () {
        $("#form1").valid();
        $("#form1").submit();
    });
  });
  </script>
  <style>
    span {
      color: red;
      padding-left: 5px;
      display:inline;
    }
  </style>
</head>
<body>
  <form id="form1" action="#">
    Nombre: <input name="txtNombre" type="text" id="txtNombre" /> <br />
    Password: <input type="password" name="txtPwd" id="txtPwd" /> <br />
    Edad: <input name="txtEdad" type="number" id="txtEdad" min="18" max="60"/> <br />
    Email: <input name="txtEmail" id="txtEmail" type="email" /> <br />   
    <input id="btn" type="button" value="Enviar"/>
  </form>
</body>
</html>

-------------------------------------

<!-- Dialog básico -->
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Uso básico</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(function () {
  $("#dialog").dialog();
  });
</script>
</head>
<body>
Diálogo:
<div id="dialog" title="Dialogo básico">
  <p>
    Diálogo básico amodal. Puede ser movido, redimensionado
    y cerrado haciendo clic sobre el botón 'X'.
  </p>
</div>
</body>
</html>

-------------------------------------

<!-- Uso de  (dialog)
Es una ventana de diálogo , cuenta con una barra de título y área de contenido, se puede mover,
cambiar de tamaño y se cierra con el icono de 'x' por defecto.-->
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>

-------------------------------------

<!-- Activar (dialog) con boton-->
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Dialogo modal</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script>
    $(function () {
      $("#dialog").dialog({
        autoOpen: false,
        modal: true
    });
    $("#abrir").button().click(function () {
        $("#dialog").dialog("open");
      });
    });
  </script>
</head>
<body>
  Diálogo:
  <div id="dialog" title="Dialogo básico">
    XXXXXXXXXXX
  </div>
  <button id="abrir">Abrir diálogo</button>
</body>
</html>

-------------------------------------

<!-- Ejemplo de Dialog extendido -->
<html>
<head>
<title>Caja de diálogo jQuery UI</title>
  <meta charset="UTF-8"> 
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script>
  $(document).ready(function(){
     $("#dialogo").dialog({
        modal: true,
        title: "Caja con opciones",
        width: 550,
        minWidth: 400,
        maxWidth: 650,
        show: "fold",
        hide: "scale"
     });
  });
  </script>
</head>
<body>
  <h1>Caja de diálogo jQuery UI</h1>
  <p>Cuando se terminen de cargar los scripts, aparecerá una caja de diálogo...</p>
  <div id="dialogo">
     <p>Esta es la caja de diálogo más básica, que se puede redimensionar y arrastrar a otra posición. Además, se puede cerrar con el icono del aspa "X" que aparece en el titular de la caja.</p>
  </div>
</body>
</html>

-------------------------------------
-------------------------------------
<!--
########### Bootstrap ###########

Es un frameworks CSS que utiliza técnicas avanzadas CSS y JS
para proveer a las páginas la capacidad o la propiedad de ser
web responsive o adaptables a todo tipo de pantallas y dispositivos.
Librería muy utilizda para páginas que son visualizadas en pc y dispositivos
móbiles como smartphones y tablets.
-->
-------------------------------------
-------------------------------------

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Plantilla básica de Bootstrap</title>
    <!-- CSS de Bootstrap -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  </head>
  <body>
    <h1>¡Hola mundo!</h1>
    <h1>¡Hola mundo!</h2>
    <h1>¡Hola mundo!</h3>
    <b>¡Hola mundo!</b>
    <!-- Librería jQuery requerida por los plugins de JavaScript -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Todos los plugins JavaScript de Bootstrap (también puedes
         incluir archivos JavaScript individuales de los únicos
         plugins que utilices) -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

-------------------------------------

<!-- Pasando atributos CSS al DOM con Jquery -->
<!doctype html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>jQuery desde Cero</title>
      <script src="jquery-1.9.1.js" type="text/javascript"></script>
    </head>
<script type="text/javascript">
$('document').ready(function() {
      $('p').css({
        //'border': '3px solid green',
        //'background-color': 'blue',
        'border': 'ridge 1px',
        'width': '500px'
      });
});
</script>
<body>   
    <p>texto de prueba</p>
    <p>texto de prueba 2</p>
    <p>texto de prueba 3</p>
    <p>texto de prueba 4</p>
    </body>
</html>

-------------------------------------

<!-- Mover un elemento dentro de otro, usando una función -->
<html>
    <head>
        <title>zxx</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="jquery-1.9.1.js" type="text/javascript"></script>
        <script type="text/javascript">       
        $('document').ready(function() {
            $("#activar").click(function() {
                $('#cuerpo1').appendTo('#cuerpo2');
            });
        });
        </script>
    </head>
<style type="text/css">
#cabecera {
    border:ridge 1px;
    height: 50px;
    background-color: yellow;
}
#cuerpo1 {
    border:ridge 1px;
    height: 100px;
    background-color: blue;
}
#cuerpo2 {
    border:ridge 1px;
    height: 200px;
    background-color: red;
}
</style>
<body>
<div id="cabecera">
    Cabecera
</div>
<p />
<div id="cuerpo1">
    <p>Xxxxxxxxxxxxx
    xxxxxxxxxxxxxxxx
    xxxxxxxxxxxxxxxx</p>
</div>
<p />
<div id="cuerpo2">
    xxx
</div>
<div>
    <button id="activar">Activar</button>
</div>
</body>
</html>

-------------------------------------

<!-- Arrastrar o mover elementos en el DOM -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mover objeto en todo el documento jQuery</title>
    <script src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jquery.js"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jqueryui.js"></script>   
    <style type="text/css">
        #mueveme{
            width:100px;
            height:100px;
            border:1px solid black;
        }
    </style>
    <script type="text/javascript">
        var x=$(document);
        x.ready(inicio);
        function inicio(){
            var x=$("#mueveme");
            x.draggable();
        }
    </script>
</head>
<body>
   <div id="mueveme">Mueveme</div>
</body>
</html>

-------------------------------------

<!-- Efectos aplicados a elementos -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Algunos efectos que trae con sigo jQuery UI</title>
    <script src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jquery.js"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jqueryui.js"></script>
    <style type="text/css">
        .divefectos{
            width:200px;
            height:200px;
            text-align:left;
            border:1px solid black;
            position:relative;
            background:#CCC;
            margin-left: 20px;
        }
    </style>
    <script type="text/javascript">
        $('document').ready(function () {
            $("#boton1").click(function (){ $("#efecto1").effect( 'blind' , "slow" ); });
            $("#boton2").click(function (){ $("#efecto2").effect( 'bounce' , "slow" ); });
            $("#boton3").click(function (){ $("#efecto3").effect( 'shake' , "slow" ); });
            $("#boton4").click(function (){ $("#efecto4").effect( 'clip' , "slow" ); });
            $("#boton5").click(function (){ $("#efecto5").effect( 'drop' , "slow" ); });
            $("#boton6").click(function (){ $("#efecto6").effect( 'explode' , "slow" ); });
            $("#boton7").click(function (){ $("#efecto7").effect( 'puff' , "slow" ); });
            $("#boton8").click(function (){ $("#efecto8").effect( 'fade' , "slow" ); });
            $("#boton9").click(function (){ $("#efecto9").effect( 'fold' , "slow" ); });
        });
    </script>
</head>
<body>
<div id="efecto1" class="divefectos">Desaparece hacia arriba</div>
<input type="button" value="Efecto blind" id="boton1">
<p>------------</p>
<div id="efecto2" class="divefectos">Rebote vertical</div>
<input type="button" value="Efecto bounce" id="boton2">
<p>------------</p>       
<div id="efecto3" class="divefectos">Rebote horizontal</div>
<input type="button" value="Efecto shake" id="boton3">
<p>------------</p>
<div id="efecto4" class="divefectos">Desaparece desde el centro</div>
<input type="button" value="Efecto clip" id="boton4">
<p>------------</p>
<div id="efecto5" class="divefectos">Combina transparencia con movimiento hacia la izquierda</div>
<input type="button" value="Efecto drop" id="boton5">
<p>------------</p>
<div id="efecto6" class="divefectos">Lo divide en 9 pedazos y los explota con transparencia</div>
<input type="button" value="Efecto explode" id="boton6">
<p>------------</p>
<div id="efecto7" class="divefectos">Hace lo mismo sin dividirlo y con escala mas cada vez mas grande</div>
<input type="button" value="Efecto puff" id="boton7">
<p>------------</p>
<div id="efecto8" class="divefectos">El objeto desaparece</div>
<input type="button" value="Efecto fade" id="boton8">
<p>------------</p>
<div id="efecto9" class="divefectos">El objeto se pliega</div>
<input type="button" value="Efecto fold" id="boton9">
</body>
</html>
<!--
El método "effect" recibe parametros, en primer lugar especificaremos
el tipo de efecto que queramos entre comillas (ya sea simples o dobles)
algunos tipos de efectos que existen son:
#####
blind – Desaparece hacia arriba
bounce – Rebote vertical
shake – Rebote horizontal
clip – Desaparece desde el centro
drop – Combina transparencia con movimiento hacia la izquierda
explode – Lo divide en 9 pedazos y los explota con transparencia
puff – Hace lo mismo sin dividirlo y con escala mas cada vez mas grande
fade – El objeto desaparece
fold – El objeto se pliega
#####
Y en segundo lugar especificaremos el tiempo que queremos que tarde
la animación, lo podemos especificar con números o también con una palabra.
Si son números, no tienen que llevar comillas, pero si son palabras si.
Las palabras para el tiempo son:
#####
slow – Lento
fast – Rápido
#####
-->

-------------------------------------

<!-- Efectos aplicados a un formulario -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Algunos efectos que trae con sigo jQuery UI</title>
    <script src="googledrive_jquery.js" type="text/javascript"></script>
    <script src="jQueryUI.js" type="text/javascript"></script>
    <style type="text/css">
        #area_form {
            width: 500px;
            /*border: ridge 1px;*/
            text-align: right;
        }
    </style>
    <script type="text/javascript">
      $('document').ready(function () {
        //$("#boton1").click(function (){ $("#efecto1").effect( 'drop' , "slow" ); });
        $("#boton1").click(function () {
            $("#efecto1").effect( 'drop' , "slow" );
        });
        $("#boton2").click(function () {
            $("#efecto2").effect( 'drop' , "slow" );
        });
        $("#boton3").click(function () {
            $("#efecto3").effect( 'drop' , "slow" );
        });
        $("#boton4").click(function () {
            $("#efecto4").effect( 'drop' , "slow" );
        });
        $("#boton5").click(function () {
            $("#efecto5").effect( 'drop' , "slow" );
        });
        $("#boton6").click(function () {
            $("#efecto6").effect( 'drop' , "slow" );
        });
        $("#boton7").click(function () {
            $("#efecto7").effect( 'drop' , "slow" );
        });
      });
    </script>
</head>
<body>
<!--div id="efecto1" class="divefectos">
    <p>XXXXXX</p>
</div>
<input type="button" value="Eliminar" id="boton1"-->
<div id="area_form">
    <form action="#" method="get">
        <div id="efecto1" class="divefectos">
            Fecha: <input type="text" name="fecha">
            <input type="button" value="x" id="boton1">
        </div>
        <p />
        <div id="efecto2" class="divefectos">
            Hora de inicio: <input type="text" name="hora_inicio">
            <input type="button" value="x" id="boton2">
        </div>
        <p />
        <div id="efecto3" class="divefectos">
            Hora de finalización: <input type="text" name="hora_finalización">
            <input type="button" value="x" id="boton3">
        </div>
        <p />
        <div id="efecto4" class="divefectos">
            Asistentes: <input type="text" name="asistentes">
            <input type="button" value="x" id="boton4">
        </div>
        <p />
        <div id="efecto5" class="divefectos">
            Asunto: <input type="text" name="asunto">
            <input type="button" value="x" id="boton5">
        </div>
        <p />
        <div id="efecto6" class="divefectos">
            Puntos tratados: <input type="button" value="x" id="boton6"><br />
            <textarea name="puntos_tratados" rows="10" cols="40"></textarea>
        </div>
        <p />
        <div id="efecto7" class="divefectos">
            Acuerdos: <input type="button" value="x" id="boton7"><br />
            <textarea name="acuerdos" rows="10" cols="40"></textarea>
        </div>       
        <p />
        <input type="submit" value="Guardar">
        <input type="reset" value="Borrar">
    </form>
</div>
</body>
</html>

-------------------------------------

<!-- Desplazar/mover elementos de una lista / -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mover elementos de una lista con jQuery</title>
    <!--script src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jquery.js"></script>
    <script type="text/javascript" src="https://googledrive.com/host/0BygD_wcLS3rmSENDOURWVEZSZW8/jqueryui.js"></script-->
    <script src="googledrive_jquery.js" type="text/javascript"></script>
    <script src="jQueryUI.js" type="text/javascript"></script>
    <style type="text/css">
      #area_form {
        width: 500px;
        border: ridge 1px;
        text-align: right;
      }
      ul{
        list-style:none;
      }
      ul li{
        padding-top: 5px;
        border: ridge 1px red;
        background-color: #F2F2F2;
      }
      #campo {
        /*border: ridge 1px;*/
      }
    </style>
  <script type="text/javascript">
    $('document').ready(function () {
        $("ul").sortable();
    });
  </script>
</head>
<body>
  <div id="area_form">
    <form action="#" method="get">
    <ul>
      <li>Fecha: <input type="text" name="fecha"></li>
      <p />
      <li>Hora de inicio: <input type="text" name="hora_inicio"></li>
      <p />
      <li>Hora de finalización: <input type="text" name="hora_finalización"></li>
      <p />
      <li>Asistentes: <input type="text" name="asistentes"></li>
      <p />
      <li>Asunto: <input type="text" name="asunto"></li>
      <p />
      <li>Puntos tratados: <br>
        <textarea name="puntos_tratados" rows="10" cols="40"></textarea><br />
      </li>
      <p />
      <li>
        Acuerdos:<br />
         <textarea name="acuerdos" rows="10" cols="40"></textarea>
       </li>
      <p />
      <li>
        <input type="submit" value="Guardar">
        <input type="reset" value="Borrar">
      </li>
    </ul>
    </form>
  </div>
</body>
</html>

-------------------------------------

<!-- Seleccionar varios elementos de una lista con jQuery -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Seleccionar varios elementos de una lista con jQuery</title>
    <script src="googledrive_jquery.js" type="text/javascript"></script>
    <script src="jQueryUI.js" type="text/javascript"></script>
    <style type="text/css">
    ul{
        list-style:none;
    }
    ul li{
        border: 1px solid gray;
        width:200px;
        height:30px;
    }
    ul .ui-selecting{
        background:yellow;
    }
    ul .ui-selected{
        background:red;
    }
  </style>
    <script type="text/javascript">
    $('document').ready(function () {
      $("ul").selectable();
    });
  </script>
</head>
<body>
   <ul>
     <li>Elemento 1</li>
     <li>Elemento 2</li>
     <li>Elemento 3</li>
     <li>Elemento 4</li>
     <li>Elemento 5</li>
  </ul>
</body>
</html>

-------------------------------------

<!-- Borrar o remover elementos del dom -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>remove demo</title>
  <!--script src="https://code.jquery.com/jquery-1.10.2.js"></script-->
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
  <script>
  $('document').ready(function () {
    $( "#enlace" ).click(function() {
      $( "a" ).remove();
    });
    $( "#titulo" ).click(function() {
      $( "h1" ).remove();
    });
    $( "#parrafo" ).click(function() {
      $( "p" ).remove();
    });
  });
  </script>
  <style>
  a {
    background-color: yellow;
  }
  h1 {
    background-color: blue;
  }
  p {
    background-color: red;
  }
 
  </style>
</head>
<body>
<a href="#">Esto es un enlace</a>
<h1>Esto es un título</h1>
<p>Esto es un párrafo...</p>
<br />
<button id="enlace">Borrar enlace</button>
<button id="titulo">Borrar título</button>
<button id="parrafo">Borrar párrafo</button>
</body>
</html>

-------------------------------------

<!-- Borrar o remover elementos del dom, ejemplo de un formulario -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Algunos areas que trae con sigo jQuery UI</title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
        #area_form {
            width: 500px;
            border: ridge 1px;
            text-align: right;
        }
    </style>
    <script type="text/javascript">
      $('document').ready(function () {
        $("#boton1").click(function () {
            $("#area1").remove();
        });
        $("#boton2").click(function () {
            $("#area2").remove();
        });
        $("#boton3").click(function () {
            $("#area3").remove();
        });
        $("#boton4").click(function () {
            $("#area4").remove();
        });
        $("#boton5").click(function () {
            $("#area5").remove();
        });
        $("#boton6").click(function () {
            $("#area6").remove();
        });
        $("#boton7").click(function () {
            $("#area7").remove();
        });
      });
    </script>
</head>
<body>
<div id="area_form">
    <form action="#" method="get">
        <div id="area1">
            Fecha: <input type="text" name="fecha">
            <input type="button" value="x" id="boton1">
        </div>
        <p />
        <div id="area2">
            Hora de inicio: <input type="text" name="hora_inicio">
            <input type="button" value="x" id="boton2">
        </div>
        <p />
        <div id="area3">
            Hora de finalización: <input type="text" name="hora_finalización">
            <input type="button" value="x" id="boton3">
        </div>
        <p />
        <div id="area4">
            Asistentes: <input type="text" name="asistentes">
            <input type="button" value="x" id="boton4">
        </div>
        <p />
        <div id="area5">
            Asunto: <input type="text" name="asunto">
            <input type="button" value="x" id="boton5">
        </div>
        <p />
        <div id="area6">
            Puntos tratados: <input type="button" value="x" id="boton6"><br />
            <textarea name="puntos_tratados" rows="10" cols="40"></textarea>
        </div>
        <p />
        <div id="area7">
            Acuerdos: <input type="button" value="x" id="boton7"><br />
            <textarea name="acuerdos" rows="10" cols="40"></textarea>
        </div>
        <p />
        <input type="submit" value="Guardar">
        <input type="reset" value="Borrar">
    </form>
</div>
</body>
</html>

-------------------------------------

<!-- Agregar elementos al DOM -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
  <script>
    $("document").ready(function(){
      $("#add").click(function () {
        $("#contenido").append( "<h2>Cabecera</h2>" );
      });
    });   
  </script>
  <style type="text/css">
  #contenido {
    height: 400px;
    width: 400px;
    border: ridge 1px;
    overflow: auto;
  } 
  </style>
</head>
<body>
    <div id="contenido">   
    </div>
    <button id="add">Agregar</button>
</body>
</html>

-------------------------------------

<!-- Clonar elementos del DOM clone() -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <!--script src="https://code.jquery.com/jquery-1.10.2.js"></script-->
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
    $("#clonar").click(function(){
        $("#a").clone().prependTo("#b");
    });
  });
  </script>
</head>
<body>
    <div id="a">AAA</div>
    <div id="b"></div>
    <p />
    <button id="clonar">Clonar</button>
</body>
</html>

-------------------------------------

<!-- Uso de un contador, jugando con el name de los inputs de un formulario -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XXXXXX</title>
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
    <div id="contenido"></div>
    <button id="fecha">Agregar Fecha</button>
</div>
</body>
</html>
<script>
  $("document").ready(function() {
        cont = 0;
        limite = 3;
        $("#fecha").click(function () {
            if (cont == limite) {
                alert("Exedíste el límite de adición (" + cont + ") campos");
            }
            else {
                fecha = "<div id='area_fecha'>Fecha: <input type='text' name='fecha"+cont+"'><p /></div>"
                $("#contenido").append(fecha);
                //alert(contador);
                cont=cont+1;
            }
        });
    });
</script>

-------------------------------------

<!-- Mostrar mensaje al posar el cursor sobre enlace con tooltip -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function() {
                $('[data-toggle="tooltip"]').tooltip();
            });
        </script>
    </head>
<body>
    <div class="container">
        <h1>Titulo 1</h1>
        <h2>Titulo 2</h2>
        <h3>Titulo 3</h3>
        <a href="#" data-toggle="tooltip" title="Recuerda llenar todos los datos!">Registrarse</a>       
    </div>
</body>
</html>

-------------------------------------

<!-- Alineacion de tooltip (top,bottom,left,right) -->
<!-- Mostrar mensaje al posar el cursor sobre enlace con tooltip -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script>
            $(document).ready(function() {
                $('[data-toggle="tooltip"]').tooltip();  
            });
        </script>
    </head>
<body>
    <div class="container" align="center">
        <br />
        <br />
        <br />
        <br />
        <br />
        <!--a href="#" data-toggle="tooltip" title="Recuerda llenar todos los datos!">Registrarse</a-->
        <button id="grafo" data-toggle="tooltip" data-placement="top" class="btn btn-success" title="Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí. >Grafo de menciones">Grafo de menciones</button>

        <p>.</p>
       

        <button id="grafo" data-toggle="tooltip" data-placement="bottom" class="btn btn-success" title="Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí. >Grafo de menciones">Grafo de menciones</button>

        <p>.</p>       

        <button id="grafo" data-toggle="tooltip" data-placement="left" class="btn btn-success" title="Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí. >Grafo de menciones">Grafo de menciones</button>

        <p>.</p>

        <button id="grafo" data-toggle="tooltip" data-placement="right" class="btn btn-success" title="Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí. >Grafo de menciones">Grafo de menciones</button>

    </div>
</body>
</html>

-------------------------------------

<!-- Mostrar mensaje al posar el cursor sobre enlace con tooltip de CSS -->
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        button.tooltip {outline:none; }
        button.tooltip strong {line-height:30px;}
        button.tooltip:hover {text-decoration:none;}
        button.tooltip span {
            z-index:10;display:none; padding:14px 20px;
            margin-top:-30px; margin-left:28px;
            width:300px; line-height:16px;
        }
        button.tooltip:hover span{
            display:inline; position:absolute; color:#111;
            border:1px solid #DCA; background:#fffAF0;}
        .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
           
        /*CSS3 extras*/
        button.tooltip span
        {
            border-radius:4px;
            box-shadow: 5px 5px 8px #CCC;
        }
    </style>
</head>
<body>
    <center>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />       
        <button class="tooltip"> Grafo de Menciones
            <span>
                Permite apreciar gráficamente cómo las cuentas de Twitter mencionan etiquetas (hashtags) y se mencionan entre sí.
            </span>
        </button>
        <br/>
        <button class="tooltip"> Agrupamiento por temas
            <span>
                Permite apreciar gráficamente los "temas" principales tratados en los textos de los tuits.
            </span>
        </button>
    </center>
</body>
</html>

-------------------------------------

<!-- Otros tooltip´s de CSS avanzado -->
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
<style type="text/css"> 
  html {
    box-sizing: border-box;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  body {
    margin: 64px auto;
    text-align: center;
    font-size: 100%;
    max-width: 640px;
    width: 94%;
  }

  a:hover {
    text-decoration: none;
  }

  header,
  .demo,
  .demo p {
    margin: 4em 0;
    text-align: center;
  }

  /**
   * Tooltip Styles
   */

  /* Base styles for the element that has a tooltip */
  [data-tooltip],
  .tooltip {
    position: relative;
    cursor: pointer;
  }

  /* Base styles for the entire tooltip */
  [data-tooltip]:before,
  [data-tooltip]:after,
  .tooltip:before,
  .tooltip:after {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -webkit-transition:
        opacity 0.2s ease-in-out,
          visibility 0.2s ease-in-out,
          -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
      -moz-transition:   
          opacity 0.2s ease-in-out,
          visibility 0.2s ease-in-out,
          -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
      transition:        
          opacity 0.2s ease-in-out,
          visibility 0.2s ease-in-out,
          transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform:    translate3d(0, 0, 0);
    transform:         translate3d(0, 0, 0);
    pointer-events: none;
  }

  /* Show the entire tooltip on hover and focus */
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after,
  [data-tooltip]:focus:before,
  [data-tooltip]:focus:after,
  .tooltip:hover:before,
  .tooltip:hover:after,
  .tooltip:focus:before,
  .tooltip:focus:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }

  /* Base styles for the tooltip's directional arrow */
  .tooltip:before,
  [data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: transparent;
    content: "";
  }

  /* Base styles for the tooltip's content area */
  .tooltip:after,
  [data-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    width: 160px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    font-size: 14px;
    line-height: 1.2;
  }

  /* Directions */

  /* Top (default) */
  [data-tooltip]:before,
  [data-tooltip]:after,
  .tooltip:before,
  .tooltip:after,
  .tooltip-top:before,
  .tooltip-top:after {
    bottom: 100%;
    left: 50%;
  }

  [data-tooltip]:before,
  .tooltip:before,
  .tooltip-top:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: #000;
    border-top-color: hsla(0, 0%, 20%, 0.9);
  }

  /* Horizontally align top/bottom tooltips */
  [data-tooltip]:after,
  .tooltip:after,
  .tooltip-top:after {
    margin-left: -80px;
  }

  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after,
  [data-tooltip]:focus:before,
  [data-tooltip]:focus:after,
  .tooltip:hover:before,
  .tooltip:hover:after,
  .tooltip:focus:before,
  .tooltip:focus:after,
  .tooltip-top:hover:before,
  .tooltip-top:hover:after,
  .tooltip-top:focus:before,
  .tooltip-top:focus:after {
    -webkit-transform: translateY(-12px);
    -moz-transform:    translateY(-12px);
    transform:         translateY(-12px);
  }

  /* Left */
  .tooltip-left:before,
  .tooltip-left:after {
    right: 100%;
    bottom: 50%;
    left: auto;
  }

  .tooltip-left:before {
    margin-left: 0;
    margin-right: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-left-color: #000;
    border-left-color: hsla(0, 0%, 20%, 0.9);
  }

  .tooltip-left:hover:before,
  .tooltip-left:hover:after,
  .tooltip-left:focus:before,
  .tooltip-left:focus:after {
    -webkit-transform: translateX(-12px);
    -moz-transform:    translateX(-12px);
    transform:         translateX(-12px);
  }

  /* Bottom */
  .tooltip-bottom:before,
  .tooltip-bottom:after {
    top: 100%;
    bottom: auto;
    left: 50%;
  }

  .tooltip-bottom:before {
    margin-top: -12px;
    margin-bottom: 0;
    border-top-color: transparent;
    border-bottom-color: #000;
    border-bottom-color: hsla(0, 0%, 20%, 0.9);
  }

  .tooltip-bottom:hover:before,
  .tooltip-bottom:hover:after,
  .tooltip-bottom:focus:before,
  .tooltip-bottom:focus:after {
    -webkit-transform: translateY(12px);
    -moz-transform:    translateY(12px);
    transform:         translateY(12px);
  }

  /* Right */
  .tooltip-right:before,
  .tooltip-right:after {
    bottom: 50%;
    left: 100%;
  }

  .tooltip-right:before {
    margin-bottom: 0;
    margin-left: -12px;
    border-top-color: transparent;
    border-right-color: #000;
    border-right-color: hsla(0, 0%, 20%, 0.9);
  }

  .tooltip-right:hover:before,
  .tooltip-right:hover:after,
  .tooltip-right:focus:before,
  .tooltip-right:focus:after {
    -webkit-transform: translateX(12px);
    -moz-transform:    translateX(12px);
    transform:         translateX(12px);
  }

  /* Move directional arrows down a bit for left/right tooltips */
  .tooltip-left:before,
  .tooltip-right:before {
    top: 3px;
  }

  /* Vertically center tooltip content for left/right tooltips */
  .tooltip-left:after,
  .tooltip-right:after {
    margin-left: 0;
    margin-bottom: -16px;
  }   
</style>
</head>
<body>
    <center>     
     
        <p>Data attribute only <a href="#" data-tooltip="I’m the tooltip text">Tooltip</a></p>
        <p><code>.toolbar</code> <a href="#" class="tooltip" data-tooltip="I’m the tooltip text.">Tooltip</a></p>
        <p><code>.toolbar-top</code> <a href="#" class="tooltip-top" data-tooltip="I’m the tooltip text.">Tooltip</a></p>
        <p><code>.toolbar-right</code> <a href="#" class="tooltip-right" data-tooltip="I’m the tooltip text.">Tooltip</a></p>
        <p><code>.toolbar-bottom</code> <a href="#" class="tooltip-bottom" data-tooltip="I’m the tooltip text.">Tooltip</a><p>
        <p><a href="#" class="tooltip-left" data-tooltip="I’m the tooltip text.">Tooltip</a> <code>.toolbar-left</code></p>
     
    </center>
</body>
</html>

-------------------------------------

<!-- Popover, al dar click muestra una pestaña con una cabecera y un cuerpo -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script>
      $(document).ready(function(){
          $('[data-toggle="popover"]').popover();
      });
    </script>
</head>
<body>
    <div align="center">
      <h3>Ejemplo de Popover</h3>
      <a href="#" data-toggle="popover" title="Cabecera del Popover" data-content="contenido dentro del popover">Activar Popover</a>
    </div>
</body>
</html>

<!-- ********************************************************* -->
<!-- Para dar posicion al Popover(top,bottom,left,right) -->
<!--DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <ul class="list-inline">
    <li><a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Top</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Left</a></li>
    <li><a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Right</a></li>
  </ul>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();  
});
</script>

</body>
</html-->

<!-- ********************************************************* -->
<!-- Para cerrar el Popover haciendo click en cualquier lugar del doc-->
<!--DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
    <a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();  
});
</script>

</body>
</html-->

-------------------------------------

<!-- Popover con hover -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
<body>
    <script>
        $(document).ready(function() {
            $('[data-toggle="popover"]').popover();
        });
    </script>

    <div class="container" align="center">
        <h3>Popover Example</h3>       
        <a href="#" data-toggle="popover" data-trigger="hover" title="Cabecera" data-content="Cuerpo">Posa el cursor</a>
    </div>
</body>
</html>

-------------------------------------

<!-- Mostrar mensaje al posar el cursor sobre boton -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">       
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <!--<script src="jquery-1.9.1.js" type="text/javascript"></script>-->
        <script>
            $(document).ready(function() {
                $('#boton').prop('title', 'Enunciado para el boton, se muestra al posar el cursor');
                $('#boton').click(function(e){
                    alert("Hola!");
                    e.preventDefault();
                });
            });
        </script>
    </head>
<body>
    <div align="center">
        <br />
        <br />
        <button id="boton" type="" class="btn btn-success" >PRUEBA</button>
    </div>   
</body>
</html>

-------------------------------------

<!-- Ejemplo de formulario y modal, curso JS example -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Curso JavaScript</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script>
    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();  
    });
  </script>
  <style type="text/css">
    label {
        display:block;
    }
  </style>
</head>
<body bgcolor="red">
    <div class="container">
      <h2>Curso JavaScript</h2>
      <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Registrarse</button>
      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog modal-sm">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Registrarse en el curso</h4>
            </div>
            <div class="modal-body">
                <form action="#" method="get">
                    <label>Nombre: <input type="text" name="nombre" placeholder="Tu Nombre" required> <br /></label>
                    <label>e-mail: <input type="text" name="email" placeholder="Tu email" required> <br /></label>
                    <p></p>                   
                    <input type="submit" data-toggle="tooltip" title="Recuerda llenar todos los campos!" value="Registrarse">
                    <input type="reset" value="Borrar">
                </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Salir</button>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

-------------------------------------

<!-- Escribiendo en el DOM los datos de un JSON -->
<!DOCTYPE  html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body> 
  <p>JSON example Jquery</p>
  <div id="caja" >
  </div>
  <button>Activar</button>
</body>
</html>
<script type="text/javascript">
  var json_datos = {"usuarios":[
    {"nombre":"María","cedula":"12345678"},
    {"nombre":"Carlos","cedula":"87654321"},
  ]};
  var a ="YYY"
  $(document).ready(function() {
    $("button").click(function() {
      //alert("¡Alerta Activada!");
      //$("#caja").html(a);
      $("#caja").html(json_datos.usuarios[0].nombre);
    });
  });
</script>

-------------------------------------

<!-- Escribiendo en el DOM los datos de un JSON 2 -->
<!DOCTYPE  html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body> 
  <p>JSON example Jquery</p>
  <div id="caja" >
  </div>
  <button>Activar</button>
</body>
</html>
<script type="text/javascript">
  var json_datos = {"usuarios":[
    {"nombre":"María","cedula":"12345678"},
    {"nombre":"Carlos","cedula":"87654321"},
  ]};
  var a ="YYY"
  $(document).ready(function() {
    $("button").click(function() {
      //alert("¡Alerta Activada!");
      //$("#caja").html(a);
      $("#caja").append("Nombre: " + json_datos.usuarios[0].nombre);
      $("#caja").append(" / Cédula: " + json_datos.usuarios[0].cedula);
      $("#caja").append("<br />");
      $("#caja").append("Nombre: " + json_datos.usuarios[1].nombre);
      $("#caja").append(" / Cédula: " + json_datos.usuarios[1].cedula);
    });
  });
</script>

-------------------------------------

<!--El método .empty() elimina todos los nodos secundarios y el contenido de los elementos seleccionados.
Nota: Este método no elimina el elemento en sí, o sus atributos.-->
<!DOCTYPE html>
<html>
<head>
<!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").empty();
    });
});
</script>
</head>
<body>
<div style="height:100px;background-color:yellow">
  This is some text
  <p>This is a paragraph inside the div.</p>
</div>
<p>This is a paragraph outside the div.</p>
<button>Remove content of the div element</button>
</body>
</html>

-------------------------------------

<!-- Agregar campos de formulario al DOM usando un select form -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <script>
          var counterText = 0;
          var counterRadioButton = 0;
          var counterCheckBox = 0;
          var counterTextArea = 0;
          function addAllInputs(divName, inputType){
               var newdiv = document.createElement('div');
               switch(inputType) {
              case 'text':
                         newdiv.innerHTML = "Entry " + (counterText + 1) + " <br><input type='text' name='myInputs[]'>";
                   counterText++;
                     break;
                    case 'radio':
                         newdiv.innerHTML = "Entry " + (counterRadioButton + 1) + " <br><input type='radio' name='myRadioButtons[]'>";
                   counterRadioButton++;
                   break;
                    case 'checkbox':
                         newdiv.innerHTML = "Entry " + (counterCheckBox + 1) + " <br><input type='checkbox' name='myCheckBoxes[]'>";
                         counterCheckBox++;
                   break;    
                    case 'textarea':
                         newdiv.innerHTML = "Entry " + (counterTextArea + 1) + " <br><textarea name='myTextAreas[]'>type here...</textarea>";
                   counterTextArea++;
                   break;      
                    }
               document.getElementById(divName).appendChild(newdiv);
          }
        </script>
    </head>
<body>
<form name="myForm" method="POST">
  <div id="dynamicInputs">
  </div>
  <p />
  <select name='inputSelect'>
    <option value ="text">text field</option>
    <option value ="radio">radio button</option>
    <option value ="checkbox">checkbox</option>
    <option value ="textarea">textarea</option>
  </select>
  <br />
  <input type="button" value="Add selected input" onClick="addAllInputs('dynamicInputs', document.myForm.inputSelect.value);"><br />
</form>
</body>
</html>

-------------------------------------

<!-- Agregar campos de formulario al DOM usando un select form -->
<!-- Agregados otros campos para agregar -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>XXX</title>
        <meta charset="utf-8">
        <script>
          var EnunciadoText = 0;
          var counterText = 0;
          var counterTextArea_corto = 0;
          var counterTextArea_larga = 0;
          var counterVerdadero_Falso = 0;
          function addAllInputs(divName, inputType) {
            var newdiv = document.createElement('div');
            switch(inputType) {
              case 'enunciado':
                newdiv.innerHTML = "Enunciado, pregunta o título " + "(" + (EnunciadoText + 1) + ")" + "<br /><input type='text' name='myInputs_enunciado' ><p />";
                EnunciadoText++;
              break;
              case 'text':
                newdiv.innerHTML = "Texto Corto " + "(" + (counterText + 1) + ")" + "<br /><input type='text' name='myInputs' ><p />";
                counterText++;
              break;
              case 'textarea_corta':
                newdiv.innerHTML = "Area de Texto Corto " + "(" + (counterTextArea_corto + 1) + ")" + "<br /><textarea name='myTextAreas_corto' rows='5' cols='50' ></textarea><p />";
                counterTextArea_corto++;
              break;
              case 'textarea_larga':
                newdiv.innerHTML = "Area de Texto Largo " + "(" + (counterTextArea_larga + 1) + ")" + "<br /><textarea name='myTextAreas_larga' rows='10' cols='60' ></textarea><p />";
                counterTextArea_larga++;
              break;
              case 'verdadero_falso':
                newdiv.innerHTML = "Verdadero o Falso " + "(" + (counterVerdadero_Falso + 1) + ")" + "<br />Pregunta: <input type='text' name='myInputs_pregunta_vof'><select name='select_form[]'><option>---<option>Sí<option>No</select><p />";
                counterVerdadero_Falso++;
              break;
            }
            document.getElementById(divName).appendChild(newdiv);
          }
        </script>
    </head>
<body>
<h3>Agregar campos </h3>
<form name="myForm" method="GET">
  <div id="dynamicInputs">
  </div>
  <p />
  <hr>
  <select name='inputSelect'>
    <option value ="enunciado">Enunciado, pregunta o título</option>
    <option value ="text">Campo de Texto</option>
    <option value ="textarea_corta">Area de Texto</option>
    <option value ="textarea_larga">Area de Largo</option>
    <option value ="verdadero_falso">Verdadero o Falso</option>
  </select>
  <br />
  <br />
  <input type="button" value="Agregar" onClick="addAllInputs('dynamicInputs', document.myForm.inputSelect.value);">
  <input type="submit" value="Enviar">
</form>
</body>
</html>

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------

<!-- -->

-------------------------------------
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)