如何将Google地图放在带有jQuery标签的标签面板中?

时间:2011-02-08 10:51:01

标签: jquery google-maps tags struts2 jtabbedpane

我有一个带有Struts2的Web项目。我的主页,它是用jQuery选项卡制作的。其中两个标签必须包含Google地图,但标签不会显示。我正在使用jQuery Struts2插件,即我使用的是jQuery标签,而不是本机jQuery。在jQuery web中有一个解决方案,但我不知道如何处理jQuery标签或在何处放置代码。

您在这里是代码:

网主页:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <sj:head jqueryui="true"/>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Localizadroid Beta</title>
</head>
<body>
    <h1>Localizadroid - Versión 4.1.1</h1>
    <s:url id="ajaxAmigos" value="/friendsTab.action"/>
    <s:url id="ajaxPeticiones" value="/showFriendRequest.action"/>
    <s:url id="ajaxMapasAgregar" value="/tabMaps.action"/>
    <s:url id="ajaxMapasEditar" value="/editMaps.action"/>
    <s:url id="ajaxBuscar" value="searchFriend.action"/>


    <sj:tabbedpanel id="localtabs"> 
        <sj:tab id="tab1" target="home" label="Home" />
        <sj:tab id="tab2" target="amigos" label="Amigos"/>
        <sj:tab id="tab3" target="peticiones" label="Peticiones de Amistad"/>
        <sj:tab id="tab4" target="buscar" label="Buscar amigos"/>
        <sj:tab id="tab5" target="mapasAgregar" label="Mapas - Agregar marcadores"/>
        <sj:tab id="tab6" target="mapasEditar" label="Mapas - Editar marcadores"/>

        <sj:div id="home">
        </sj:div>
        <sj:div id="amigos" href="%{ajaxAmigos}" indicator="indicator">
        </sj:div>
        <sj:div id="peticiones" href="%{ajaxPeticiones}" indicator="indicator">
        </sj:div>
        <sj:div id="buscar" indicator="indicator">
            <s:form id="buscador" action="searchFriend.action" method="post">
                <s:actionerror />
                <p>Introduzca el nombre de la persona que busca</p>
                <p><s:textfield name="friendSearch" size="30" /></p>
                <s:submit method="execute" key="label.searchFriends" align="center" />
                <sj:a id="ajaxBuscar" formIds="buscador" href="%{ajaxBuscar}" targets="buscar" indicator="indicator" button="true" buttonIcon="ui-icon-refresh">
                Buscar
                </sj:a>
            </s:form> 
        </sj:div>
        <sj:div id="mapasAgregar" href="%{ajaxMapasAgregar}" indicator="indicator">
        </sj:div>
        <sj:div id="mapasEditar" href="%{ajaxMapasEditar}" indicator="indicator">
        </sj:div>
    </sj:tabbedpanel>
</body>
</html>

googleMaps JSP页面是一个典型的JSP页面,其中包含地图:

有人可以帮我吗?谢谢你这么匹配!

1 个答案:

答案 0 :(得分:0)

您应该将目标div放在选项卡式面板标签之外,而不需要为基于ajax的标签创建额外的div。

请试试这个:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> 
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head>     
        <sj:head jqueryui="true"/>     
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">     
        <title>Localizadroid Beta</title> 
    </head> 
    <body>     
        <h1>Localizadroid - Versión 4.1.1</h1>     
        <s:url id="ajaxAmigos" value="/friendsTab.action"/>     
        <s:url id="ajaxPeticiones" value="/showFriendRequest.action"/>     
        <s:url id="ajaxMapasAgregar" value="/tabMaps.action"/>     
        <s:url id="ajaxMapasEditar" value="/editMaps.action"/>     
        <s:url id="ajaxBuscar" value="searchFriend.action"/>       
        <sj:tabbedpanel id="localtabs">          
            <sj:tab id="tab1" target="home" label="Home" />         
            <sj:tab id="tab2" href="%{ajaxAmigos}" label="Amigos"/>         
            <sj:tab id="tab3" href="%{ajaxPeticiones}" label="Peticiones de Amistad"/>         
            <sj:tab id="tab4" target="buscar" label="Buscar amigos"/>         
            <sj:tab id="tab5" href="%{ajaxMapasAgregar}" label="Mapas - Agregar marcadores"/>         
            <sj:tab id="tab6" href="%{ajaxMapasEditar}" label="Mapas - Editar marcadores"/>          
        </sj:tabbedpanel> 
        <div id="home"></div>         
        <div id="buscar">             
            <s:form id="buscador" action="searchFriend.action" method="post">                 
                <s:actionerror />                 
                <p>Introduzca el nombre de la persona que busca</p>                
                <p><s:textfield name="friendSearch" size="30" /></p>                 
                <s:submit method="execute" key="label.searchFriends" align="center" />                 
                <sj:a id="ajaxBuscar" formIds="buscador" href="%{ajaxBuscar}" targets="buscar" indicator="indicator" button="true" buttonIcon="ui-icon-refresh">                 
                    Buscar                
                </sj:a>             
            </s:form>          
        </div>         
    </body> 
</html>