如何將谷歌地圖放入帶有jQuery標籤的標籤面板中？

我有一個web項目與Struts2。我的主頁，它是用jQuery選項卡製作的。其中兩個標籤必須包含Google地圖，但該標籤不會顯示它。我使用的是jQuery Struts2插件，即我使用jQuery標籤，而不是原生jQuery。在jQuery網頁中有一個解決方案，但我不知道如何處理jQuery標籤或放置代碼的位置。如何將谷歌地圖放入帶有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頁面：

有人能幫助我嗎？非常謝謝你！

來源

2011-02-08 Rafa Romero

：

請試試這個。標籤庫永遠是脆弱的。 – Quaternion 2011-02-08 21:14:56

您應該將目標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>

來源

2011-02-09 13:49:54 Johannes

謝謝你這麼匹配你的答案！我已經嘗試過但不起作用！問題是因爲任何需要一些尺寸計算來初始化的組件都不能在隱藏的標籤中工作，因爲標籤面板本身通過display：none隱藏，所以裏面的任何元素都不會報告它們的實際寬度和高度（0在大多數瀏覽器中）。在jQuery頁面中有一個解決方案，但我不知道如何使用標籤。你可以在這裏看到： http://docs.jquery.com/UI/Tabs#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F – 2011-02-10 10:47:08

如何將谷歌地圖放入帶有jQuery標籤的標籤面板中？

回答

相關問題