Comunidad de diseño web y desarrollo en internet online

Quiero combinar 2 funciones (Javascript y Jquery)

Citar            
MensajeEscrito el 28 Ago 2014 09:23 am
Hola, quiero combinar dos funciones, una javascript y otra jquery. El caso es que por separado me funcionan a la perfección, pero no se como juntarlas para que vayan a la vez.

Funcion javascript que me carga una pagina php dentro de un div:

Código :

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
   function cargarPagina(div, pagina){
       $(div).load(pagina);
    }
</script>


Funcion jquery que muestra un div, y oculta los otros:

Código :

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){  
      $("#boton1").click(function () {
         $('contingut1').show("slow");
         $('contingut2').hide("slow");
         $('contingut3').hide("slow");
      });
      $("#boton2").click(function () {
         $('contingut1').hide("slow");
         $('contingut2').show("slow");
         $('contingut3').hide("slow");
      });
      $("#boton3").click(function () {
         $('contingut1').hide("slow");
         $('contingut2').hide("slow");
         $('contingut3').show("slow");
      });


Todo esto se tendria que ejecutar al hacer click a estos links:

Código :

<a href="javascript:void()" onclick="cargarPagina('#contingut1','contingut/clientAlta.php')"><img id="boton1" src="assets/icons/clientNou.png" alt="Nou Client" title="Nou Client"/></a>

<a href="javascript:void()" onclick="cargarPagina('#contingut2','contingut/clients.php')"><img id="boton2" src="assets/icons/clients.png" alt="Clients" title="Clients"/></a>

<a href="javascript:void()" onclick="cargarPagina('#contingut3','contingut/ventaAlta.php')"><img id="boton3" src="assets/icons/ventaNova.png" alt="Nova Venta" title="Nova Venta"/></a>


He leído que para que se ejecuten a la vez lo puedo hacer con "easing" pero no tengo ni idea de javascript y no se usarlo...

Por circunsxik

32 de clabLevel



 

chrome
Citar            
MensajeEscrito el 29 Ago 2014 10:12 pm
Aqui tienes novato :)

Código Javascript :

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<a href="#"><img id="boton1" src="assets/icons/clientNou.png" alt="Nou Client" title="Nou Client"/></a>
<a href="#"><img id="boton2" src="assets/icons/clients.png" alt="Clients" title="Clients"/></a>
<a href="#"><img id="boton3" src="assets/icons/ventaNova.png" alt="Nova Venta" title="Nova Venta"/></a>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    function cargarPagina(div, pagina){
        $(div).load(pagina);
        return false;
    }
    
    $(document).ready(function(){
        $("#boton1").click(function (e) {
            e.preventDefault();
            $('contingut1').show("slow");
            $('contingut2').hide("slow");
            $('contingut3').hide("slow");

            cargarPagina('#contingut1','contingut/clientAlta.php');
        });
        $("#boton2").click(function (e) {
            e.preventDefault();
            $('contingut1').hide("slow");
            $('contingut2').show("slow");
            $('contingut3').hide("slow");

            cargarPagina('#contingut2','contingut/clients.php');
        });
        $("#boton3").click(function (e) {
            e.preventDefault();
            $('contingut1').hide("slow");
            $('contingut2').hide("slow");
            $('contingut3').show("slow");

            cargarPagina('#contingut3','contingut/ventaAlta.php');
        });
    });
</script>
</body>
</html>


Aunque considera que no se va a esperar a que cargue la pagina para que se muestre :) el div, así que te sugiero empezar a apreder Jquery

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.