La cuestión es que tengo el visualizador Openlayers con sus Popups. He conseguido meter dentro de los Popups la función Tabs de jQuery, y se visualiza correctamente. El problema que tengo es que no puedo cambiar de pestañas...
y no tengo ni idea de que puede ser. Si alguien tiene experiencia en Openlayers y jQuery y me puede dar algun consejo se lo agradeceria muchisimo.
Un saludo y muchas gracias!
Os dejo un pedazo del código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>La Ruta Dels Monestirs</title>
<style type="text/css">
#map {
width: 95%;
height: 85%;
border: 2px solid black;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=keyXXXXXXXXX=ca" type="text/javascript"></script>
<script src="./js/OpenLayers/OpenLayers.js"></script>
<script src="./js/jquery/jquery-1.4.2.min.js"></script>
<script src="./js/jquery/jquery-ui-1.8.2.custom.min.js"></script>
<link type="text/css" href="./js/jquery/css/redmond/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript">
var map;
var lonC = -0.3000;
var latC = 39.0350;
var zoom = 11;
var toolbar;
function creaCapaMarker(){
for (layername in map.layers) {
if (map.layers[layername].CLASS_NAME == 'OpenLayers.Layer.Markers') {
map.removeLayer(map.layers[layername]);
}
}
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
}
function putMarker(x,y,html){
var markers;
for (layername in map.layers) {
if (map.layers[layername].CLASS_NAME == 'OpenLayers.Layer.Markers') {
markers=map.layers[layername];
}
}
var size = new OpenLayers.Size(20, 30);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('./img/marker.png', size, offset);
marker1 = new OpenLayers.Marker(new OpenLayers.LonLat(x, y), icon.clone());
markers.addMarker(marker1);
marker1.events.register("click", marker1, function(marker) {
putPopup(x,y,html);
});
}
function putPopup(x,y,html){
popup = new OpenLayers.Popup.FramedCloud("chicken",
new OpenLayers.LonLat(x,y),
null,
html,
null,
true );
map.addPopup(popup);
}
function init(){
map = new OpenLayers.Map('map', {
controls: [],
numZoomLevels: 20
});
nav = new OpenLayers.Control.NavigationHistory();
map.addControl(nav);
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':fals e}));
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.MousePosition({'numDigits':4})) ;
panel = new OpenLayers.Control.NavToolbar();
panel.addControls([ new OpenLayers.Control.ZoomToMaxExtent(),nav.next, nav.previous]);
panel.deactivate();
map.addControl(panel);
var pnoa_wms = new OpenLayers.Layer.WMS( "PNOA",
"http://www.idee.es/wms/PNOA/PNOA?",
{layers: 'pnoa'} );
map.addLayers(pnoa_wms);
if (!map.getCenter()) map.zoomToMaxExtent();
map.setCenter(new OpenLayers.LonLat(lonC, latC), zoom);
creaCapaMarker();
var lonGND=-0.1875;
var latGND=38.9686;
var htmlGND=$("#htmlGND").html();
putMarker(lonGND,latGND,htmlGND);
}
</script>
<div
</head>
<body onload="init()">
<div id="map"></div>
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
event: 'mouseover'
});
});
/*jQuery(document).ready(function() {
$("#tabs").tabs({
event: 'mouseover'
});
});*/
</script>
<div id="htmlGND" style="display:none;overflow:hidden;">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin </p>
</div>
<div id="tabs-2">
<p>Morbi </p>
</div>
<div id="tabs-3">
<p>Mauris </p>
</div>
</div>
</div>
</body>
</html>
