Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje11-06-2011, 21:24 (UTC)    
Título del mensaje: Navegador y Buscador Google en tu Web

Este codigo sirve para abrir un "Navegador" en nuestra web gracias a un Iframe,
Utilizo Jquery y CSS.
Para poder utilizarlo necesitaras colocar el atributo pantalla con el valor de la pagina o busqueda que quieras ver ,a algun elemento, como un enlace imagen o caja de texto
Ejemplo:


Cita:
Enlace: <a href="TUENLACE" pantalla="QUE-QUIERES-MOSTRAR" >ENLACE</a>
Imagen: <img src="TU-IMAGEN" pantalla="QUE-QUIERES-MOSTRAR">




Si el elemento es un enlace, y no das un valor a pantalla, entonces el navegador tomara el valor de el HREF
Cita:
Ejemplo: <a href="TU-ENLACE" pantalla >ENLACE</a>



Para Cajas de texto:

Coloca tambien el atributo pantalla (sin valor) a una caja de texto (input type="text") .
Al momento de presionar Enter se abrira el navegador haciendo una busuqeda de lo que contiene la caja de texto.
Ejemplo:

Cita:
<input type="text" pantalla >

Si al momento de presionar Enter la caja esta vacia, no se hara busqueda.

Codigo:
Cita:
<!-- Codigo por http://adan-2994.es.tl/Navegador_en_tu_propia_web.htm -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>$(function(){$('*[pantalla]:not(input)').click(function(e){
if(this.tagName=="A"){e.preventDefault();
if($(this).attr('pantalla')==""){abrirpantalla($(this).attr("href"));}else{abrirpantalla($(this).attr("pantalla"));}
}});/* Codigo por http://adan-2994.es.tl/Navegador_en_tu_propia_web.htm */
$('input[type="text"][pantalla]').keydown(function(e){if(e.keyCode==13){
if(this.value !=""){abrirpantalla($(this).val());}}});
$('input[type="button"][pantalla]').click(function(){
abrirpantalla($(this).attr("pantalla"));});
$('div#pantalla input[type="text"]').keydown(function(r){if(r.keyCode==13){buscar($('div#pantalla input[type="text"]').val());}});
$('div#pantalla input[type="button"]').click(function(){buscar($('div#pantalla input[type="text"]').val());});
$('div#pantalla div#navegador img').click(function(){cerrarpantalla();});
function abrirpantalla(pag){$('div#pantalla input[type="text"]').val(pag).focus();buscar(pag);$('div#pantalla').css("display","block").animate({"opacity":1},500);}
function cerrarpantalla(){$('div#pantalla').animate({'opacity':0},300,function(){$('div#pantalla').css("display","none");$('div#pantalla iframe').removeAttr("src");});}
function buscar(url){var u=url.split(":");
if(u[0].toLowerCase()=="http" || u[0].toLowerCase()=="https") {$('div#pantalla iframe').attr("src",url);$('a#afuera').attr("href",url);}else{
todo="http://www.google.com/search?rls=es-LA&q=google&ie=utf-8&oe=utf-8&channel=suggest#hl=es&hs=vLx&rls=es-LA&channel=suggest&q="+url+"&aq=f&aqi=&aql=&oq=&pbx=1&bav=on.2,or.r_gc.r_pw.&fp=de57260bcc3390f&biw=1436&bih=720";$('a#afuera').attr("href",todo);
buscar(todo);}}
});</script>
<div id="pantalla" style="display:none;opacity:0;background-color:rgba(0,0,25,.7);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;">
<div id="navegador" style="background-color:#1a2134;margin:21px auto 0 auto;width:900px;height:500px;padding:10px;border-top-left-radius:33px;border-top-right-radius:33px;-moz-border-top-left-radius:33px;-moz-border-top-right-radius:33px;-webkit-border-top-left-radius:33px;-webkit-border-top-right-radius:33px;">
<img title="Click para cerrar" style="cursor:pointer;float:left" src="http://img.webme.com/pic/a/adan-2994/cerrar3.png"> <input style="margin:5px 5px 0 162px;padding:3px 6px;width:300px" type="text" placeholder="Direccion web"><input type="button" style="height:30px;" value="Buscar"> <a href="#" style="margin-left:40px;color:#fff;font-family:Verdana;font-size:13px;" id="afuera" target="_blank" title="Visitar pagina en nueva pestaña" >Visitar</a>
<iframe style="clear:both;margin:12px auto 0 auto;border:none;width:100%;height:85%;" >Tu navegador no soporta Iframes</iframe><p><a style="font-size:12px;font-family:tahoma;color:#fff;text-decoration:none;" href="http://adan-2994.es.tl/Navegador_en_tu_propia_web.htm" target="_blank" >Codigo</a></p>
</div></div>
<!-- Codigo por http://adan-2994.es.tl/Navegador_en_tu_propia_web.htm -->

Imagen previa:


Es posible que valla añadiendo funciones al codigo dependiendo de las necesidades que surjan (comenta si tienes una)




Fuente e informacion de: Efectos Adan



.
.
.
.
______________
COLECCION DE EMOTIKONOS PARA TU WEB PWG
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group