Scribd Logo
Upload

Welcome to Scribd!

  • Usar Un Plug-In Jquery: Ejemplo Vamos A Usar Nuestro Plug-In en Una Página Con Varios Enlaces

    Uploaded by

    Katairu
    7 views2 pages
    jquery parte del capitulo original del libro de la segunda edicion.

    Original Title

    3

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    jquery parte del capitulo original del libro de la segunda edicion.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views2 pages

    Usar Un Plug-In Jquery: Ejemplo Vamos A Usar Nuestro Plug-In en Una Página Con Varios Enlaces

    Uploaded by

    Katairu
    jquery parte del capitulo original del libro de la segunda edicion.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Usar un plug-in jQuery

    El uso de un plug-in es muy sencillo. Basta con llamarlo (por su nombre) en el cdigo de la pgina.
    Ejemplo
    Vamos a usar nuestro plug-in en una pgina con varios enlaces.
    El documento Html inicial es:

    <!doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    </head>
    <style>
    .tooltip { width: 150px;
    padding: 3px;
    background-color: #9CF;
    border: black 1px solid;
    color: black;}
    a { color: black}
    </style>
    </head>
    <body>
    <p><a href="#" rel="Explicacin del enlace 1" class="info">Vnculo 1
    </a></p>
    <p><a href="#" rel="Explicacin del enlace 2" class="info">Vnculo 2
    </a></p>
    <p><a href="#" rel="Explicacin del enlace 3" class="info">Vnculo 3
    </a></p>
    </body>
    </html>
    Observaciones:
    El atributo relde las etiquetas del vnculo <a>ya contiene el texto del tooltip.
    El aspecto del tooltip ya est previsto por la clase .tooltip.
    Veamos el script:

    <script>
    $(document).ready(function(){
    var options = {
    offsetX: 30,
    offsetY: 5,
    tooltipcss: "tooltip"
    };
    $("a.info").mi_tooltip(options);
    });
    </script>
    Algunas explicaciones:
    var options = {
    offsetX: 30,
    offsetY: 5,
    tooltipcss: "tooltip"
    };
    Determina los parmetros que se pasan al plug-in, es decir, la separacin vertical, horizontal y el

    nombre de la clase de estilo de la ventana tooltip.


    $("a.pop").mi_tooltip(options);
    Para todos los enlaces que tengan la clase pop, se va a llamar al plug-in mi_tooltip.
    El archivo final completo se convierte en:

    <!doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="jquery.js"></script>
    <script src="jquery.mi_tooltip.js"></script>
    <script>
    $(document).ready(function(){
    var options = {
    offsetX: 30,
    offsetY: 5,
    tooltipcss: "tooltip"
    };
    $("a.info").mi_tooltip(options);
    });
    </script>
    <style>
    .tooltip { width: 150px;
    padding: 3px;
    background-color: #9CF;
    border: black 1px solid;
    color: black;}
    a { color: black;}
    </style>
    </head>
    <body>
    <p><a href="#" rel="Explicacin del enlace 1" class="info">Vnculo
    1</a></p>
    <p><a href="#" rel="Explicacin del enlace 2" class="info">Vnculo
    2</a></p>
    <p><a href="#" rel="Explicacin del enlace 3" class="info">Vnculo
    3</a></p>
    </body>
    </html>

    You might also like