Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 3 de 3

Tema: Capitulo 1 (jquerry y html)

Vista Híbrida

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de codomodragon
    Fecha de Ingreso
    11 nov, 09
    Ubicación
    Venezuela
    Mensajes
    1,281
    Poder de Reputación
    18

    Capitulo 1 (jquery y html)

    Para comenzar

    partiremos con la primiza de que ya todos los lectores tienen un conocimiento básico de como usar la librería jQuerry, de lo contrario les sugiero que sigan el curso de jQuerry de cctw que se encuentra en este link

    Recordando

    la librería jQuerry no es mas que un gran grupo de funciones basadas en javascript pero que gracias a su facilidad de uso nos permite realizar una gran variedad de efectos en distintos momentos de la ejecución de una pagina... o en español ;) nos permite ejecutar efectos al cargar la pagina, antes de presionar un link o input o incluso justo después de haberlo presionado; esto nos permite crear muchísimos efectos y mejorar en gran medida el aspecto de la web.

    Capas desplegables

    este elemento consiste en mostrar una capa o ocultarla al apretar un botón de la web sin que esta se recargue, algo así como el menú de administración de wordpress. Para esto vamos a utilizar 2 métodos el ".hide" y el ".show" para ocultar y mostrar dicha capa, ambos métodos para ejecutarlos siguen esta estructura:
    Código PHP:
    $("id o class").show("animacion", { direction"direcion a comensar" }, tiempo a tardar); 
    ok parece algo confuso pero vamos a explicarlo paso a paso para no perdernos oky (a lo jorgens XD), el "id o class" es donde se colocara el id o la clase de la capa donde queremos que se aplique este método, la "animación" es el tipo de efecto que queremos que muestre al aparecer la capa(que aparezca, se estire, se mueva, etc), las animaciones disponibles las podemos encontrar en este link, la dirección es donde queremos que empiece a salir el menú (up, left,right,dow), es el tiempo en milisegundos que tardara en moverse a su posición designada.

    ejemplo
    Código HTML:
    <div>
    <p>click para mostrar o ocultar</p>
    <a id='mostrar'>mostrar</a>
    <a id='ocultar'>ocultar</a>
    </div>
    <div id='desplegable'>
    <p>hola mundo</p>
    </div>
    Código PHP:
    $(function(){
      $(
    "#mostrar").click(function(){
        $(
    "#desplegable").show("slide", { direction"up" }, 1000);
      });
      $(
    "#ocultar").click(function(){
        $(
    "#desplegable").hide("slide", { direction"up" }, 1000);
      }); 
    Me estoy tardando debido a enormes problemas con el internet
    Última edición por codomodragon; 12/06/2014 a las 03:15
    OMG WTF BBQ
    Disculpen cualquier error o metidota de pata, la universidad me tiene loco y candado.

    www.mangasve.com.ve el lugar venezolano del manga

    http://www.rauch.cl/cctw.jpg

  2. #2
    Recien Llegado! Merodeador
    Fecha de Ingreso
    05 feb, 14
    Ubicación
    Valladolid, España
    Mensajes
    5
    Poder de Reputación
    0
    Hola a todos.
    Soy nueva en esto de las webs, y después de seguir el curso de CCTW de Html, CSS y jQuery, me surgen dudas de éste último.
    Es una duda súper general, así que espero que me podáis responder.
    No me queda claro qué es el archivo mijquery.js y el funciones.js.
    He entendido que "mijquery.js" es el archivo donde escribimos toooooooodo el código que encontramos en la web de jquery: http://code.jquery.com/jquery-1.11.1.min.js , que vendría a ser como el nuevo idioma que tiene que aprender el archivo html de nuestra página, y que el "funciones.js" sería el archivo donde vamos colocando las funciones que vamos a emplear. ¿Es así?
    Entonces, por qué en muchos de los ejemplos que veo en el foro, colocan los script dentro del archivo html? ¿no habría que colocarlos en el "funciones.js"?

    Muchas gracias por aclararme esta duda existencial, a ver si al final consigo mi web.

    Sois todos los mejores. Es increíble que haya tanta gente dispuesta a ayudar tan desinteresadamente!

  3. #3
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,044
    Poder de Reputación
    21
    @Amayachocolate,

    Todo archivo de Javascript (con extensión .js) se debe incluir en el archivo HTML para que el navegador sepa que debe ejecutar o utilizar el código dentro de estos archivos.

    Hay dos formas de decirle esto al navegador:

    Código dentro de la etiqueta script

    Código:
    <html>
      <head>
        <script>
          function sumar(a, b) {
            return a + b;
          }
    
          alert("3 + 3 = " + sumar(3, 3));
        </script>
      </head>
      <body>
        <h1>Bienvenidos a mi sitio web</h1>
      </body>
    </html>
    Dentro de un archivo .js
    (el archivo se llamará functions.js)

    Código:
    function sumar(a, b) {
      return a + b;
    }
    En este caso la función sumar nunca es utilizada, por lo que hay que usarla en el archivo HTML, mezclando ambas formas:

    Código:
    <html>
      <head>
    
        <script src="functions.js"></script>
        <script>
          alert("3 + 3 = " + sumar(3, 3));
        </script>
      </head>
      <body>
        <h1>Bienvenidos a mi sitio web</h1>
      </body>
    </html>
    De esta forma el navegador entiende que debe incluir el archivo functions.js y sabrá dónde buscar la función sumar.

    En resumen, podríamos decir que los archivos .js son los que definen lo que se puede hacer y le decimos al navegador dónde (en que página) debe hacerlo al incluirlos con la etiqueta script.

    Espero que te ayude :),

    Saludos!

Temas Similares

  1. como convertir mi pagina a dinamica, ajax, jquerry
    Por codomodragon en el foro Curso de jQuery
    Respuestas: 0
    Último Mensaje: 02/06/2014, 20:54
  2. Menu desplegable con Jquerry
    Por saul123 en el foro Tutoriales Varios
    Respuestas: 1
    Último Mensaje: 05/04/2011, 18:27
  3. CAPITULO UNO
    Por sel en el foro Curso Paso a Paso con Html-Kit.
    Respuestas: 1
    Último Mensaje: 26/07/2008, 14:50

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •