Foros del Web » Programando para Internet » Javascript »

Tabs dinámicos desde otra Página

Estas en el tema de Tabs dinámicos desde otra Página en el foro de Javascript en Foros del Web. Un Saludo al Club Delphi! De tiempo me inclino a realizar una consulta. En el afán de crear una página con Pestañas Dínámicas he encontrado ...
  #1 (permalink)  
Antiguo 19/07/2010, 07:42
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 19 años, 5 meses
Puntos: 0
Pregunta Tabs dinámicos desde otra Página

Un Saludo al Club Delphi!
De tiempo me inclino a realizar una consulta.
En el afán de crear una página con Pestañas Dínámicas he encontrado esta web, me interesó el TabPane que tienen, todo ok, solo que mis conocimientos de JScript no alcanzan a explicarse ¿Cómo lograr llamar a una determinada pestaña dinámicamente desde otra página?. Si observan en la parte inferior tienen unos links:
Tab Pane
Usage
API
Implementation
Look & Feel
Demo
Download

Si clickan en cualesquiera de las 5 primeras les lleva a la pestaña correspondiente.
Necesito realizar el mismo efecto de llamar a una pestaña determinada, pero DESDE OTRA PÁGINA, de dos formas: Una sobre la misma página y otra que abra una nueva, algo así como se hace en:
<a href="http://www.forosdelweb.com/f13/tabs-dinamicos-desde-otra-pagina-825973/f13/tabs-dinamicos-desde-otra-pagina-825973/..." target=_self>Tab Pane</a>
<a href="http://www.forosdelweb.com/f13/tabs-dinamicos-desde-otra-pagina-825973/f13/tabs-dinamicos-desde-otra-pagina-825973/..." target=_blank>Tab Pane</a>
Si me encuentro en la misma página funciona a la perfección la llamada a estas pestañas en forma dinámica. Pero Yo requiero que encontrándome en otra página llame a una determinada pestaña (self) y por otro lado abriendo una nueva (blank).
Pueden descargar su ejemplo ahí está con los CSS y Scripts correspondientes. Con el que voy trabajando es: tab.webfx.css
Código PHP:
<script type="text/javascript">
//<![CDATA[

var tabPane;

function 
showArticleTabsName ) {
    if (
typeof tabPane != "undefined" ) {

        switch ( 
sName ) {

            case 
"main":
                
tabPane.setSelectedIndex);
                break;

            case 
"usage":
                
tabPane.setSelectedIndex);
                break;

            case 
"api":
                
tabPane.setSelectedIndex);
                break;

            case 
"implementation":
                
tabPane.setSelectedIndex);
                break;

            case 
"looknfeel":
                
tabPane.setSelectedIndex);
                break;
        }
    }
}

// help tips
htDom "Document Object Model 1 is a standard developed by the W3C.<br />" +
        
"<a href=\"http://www.w3.org/DOM/\" target=\"_blank\">http://www.w3.org/DOM/</a>";

//]]>
</script> 
Código PHP:
<script type="text/javascript">
//WebFX Layout Include
var articleMenu= new WebFXMenu;
articleMenu.left  384;
articleMenu.top   86;
articleMenu.width 140;
articleMenu.add(new WebFXMenuItem("Tab Pane""javascript:showArticleTab( \"main\" )"));
articleMenu.add(new WebFXMenuItem("Usage""javascript:showArticleTab( \"usage\" )"));
articleMenu.add(new WebFXMenuItem("API""javascript:showArticleTab( \"api\" )"));
articleMenu.add(new WebFXMenuItem("Implementation""javascript:showArticleTab( \"implementation\" )"));
articleMenu.add(new WebFXMenuItem("Look &amp; Feel""javascript:showArticleTab( \"looknfeel\" )"));
articleMenu.add(new WebFXMenuItem("Demo""demo.html"));
articleMenu.add(new WebFXMenuSeparator);
articleMenu.add(new WebFXMenuItem("Download""http://webfx.eae.net/download/tabpane102.zip"));
webfxMenuBar.add(new WebFXMenuButton("Article Menu"nullnullarticleMenu));

webfxLayout.writeTitle("Tab Pane");
webfxLayout.writeMenu();
webfxLayout.writeDesignedByEdger();

</script> 
Código HTML:
<p>
<a href="javascript:showArticleTab( 'main' )">Tab Pane</a><br />
<a href="javascript:showArticleTab( 'usage' )">Usage</a><br />
<a href="javascript:showArticleTab( 'api' )">API</a><br />
<a href="javascript:showArticleTab( 'implementation' )">Implementation</a><br />
<a href="javascript:showArticleTab( 'looknfeel' )">Look &amp; Feel</a><br />
<a href="demo.html">Demo</a><br />
<a href="http://webfx.eae.net/download/tabpane102.zip">Download</a>
</p> 

Espero vuestro aporte del Script correspondiente para que funcione estas llamadas desde otra página.
Gracias.

Última edición por Deiv; 19/07/2010 a las 07:48
  #2 (permalink)  
Antiguo 19/07/2010, 08:36
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Tabs dinámicos desde otra Página

Hola

Así de pasada tienes varias opciones. Del lado del servidor $_GET['panel'] o Request.QueryString("panel"). Del lado del cliente window.location.hash o location.search.substr(1)

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 20/07/2010, 15:12
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 19 años, 5 meses
Puntos: 0
Respuesta: Tabs dinámicos desde otra Página

Gracias por responder, pero mis conocimientos de novato en JScript no alcanzan a entender tu sugerencia. ¿Podrías ser un poco mas específico con un poco de código de que manera implementar tu sugerencia para el caso de mi pregunta por favor?
  #4 (permalink)  
Antiguo 21/07/2010, 06:07
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Tabs dinámicos desde otra Página

Hola

Esto en la página desde la que intentas accedar
Código HTML:
Ver original
  1. <p>
  2. <a href="paginalmenu.php?panel='main'">Tab Pane</a><br />
  3. .......
Esto otro en la página donde está el menú. Colócalo justamente antes de la etiqueta </body>
Código PHP:
Ver original
  1. <?php
  2. if(isset($_GET['panel'])) {
  3. ?>
  4. <script type="text/javascript">
  5. showArticleTab('<?php echo $_GET['panel']);?>')
  6. <?php
  7. }
  8. ?>
Pruebalo, pero no estoy seguro que funcione con los resultados esperados

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 21/07/2010, 09:02
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 19 años, 5 meses
Puntos: 0
Respuesta: Tabs dinámicos desde otra Página

Gracias de Nuevo Adler,

En este momento me encuentro en un CyberCafe, por lo que llegando a Casa probaré tu código y ojalá resulte.... lo que pasa es que tampoco comprendo PHP, pero trataré de munirme de información al respecto.

Ya te comento mas adelante (trataré de hacer un copy y paste y probar el código), gracias por estar pendiente del hilo.
Saludos.
  #6 (permalink)  
Antiguo 22/07/2010, 07:37
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 19 años, 5 meses
Puntos: 0
Respuesta: Tabs dinámicos desde otra Página

Bien, he probado el código y funciona perfectamente (_self) solo que..... no abre la pestaña correspondiente, siempre abre la que está por defecto: la primera, y ahora tengo ese problema, no se como solucionarlo, y por otro lado como hacer lo mismo pero para un _blank?
Saludos.
  #7 (permalink)  
Antiguo 23/07/2010, 05:55
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Tabs dinámicos desde otra Página

Hola

Si se abre la pestaña por defecto ha de ser por que la función se carga onload. Entonces podrías hacer algo como
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. <?php
  3. if(isset($_GET['panel'])) {
  4. ?>
  5. window.onload = function() {showArticleTab('<?php echo $_GET['panel'];?>');};
  6. <?php
  7. } else {
  8. ?>
  9. window.onload = function() {showArticleTab('main');};
  10. <?php
  11. }
  12. ?>
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #8 (permalink)  
Antiguo 27/07/2010, 15:50
 
Fecha de Ingreso: noviembre-2004
Ubicación: La Paz
Mensajes: 100
Antigüedad: 19 años, 5 meses
Puntos: 0
Respuesta: Tabs dinámicos desde otra Página

Hola de nuevo,
No entre al foro hasta hoy y me percato de la respuesta. Nuevamente lo probé y sigo en la misma situación. Pero realizando una y otra prueba me di cuenta de algo, verán para realizar pruebas con los código PHP en Casa Yo trabajo con un Servidor Local (XAMPP), con todos los consejos de Adler supuse que algo Yo no estaba manejando bien, pero en una última prueba que realicé sin estar conectado con el Servidor Local XAMPP (deshabilitado), es decir sin arrancar XAMPP, observé que el código recomendado igual trabaja? lo que hace SIEMPRE es abrir la Página en si, por ello deduje que el código PHP no está funcionando a cabalidad.
Revisando
Código HTML:
<p><a href="paginalmenu.php?panel='main'">Tab Pane</a><br />.......
Y por mucho que cambio aquí 'main': <p><a href="paginalmenu.php?panel='main'">Tab Pane</a><br />....... por 'usage' o 'api'
Siempre abre la otra página dinámicamente en 'main'. Para probar esto lo que hice es descargar la Página HTML:
DEMO Tab Pane (WebFX).htm luego cambié la extensión a: DEMO Tab Pane (WebFX).php
y en mi llamada coloco este código:
Código HTML:
<p><a href="DEMO Tab Pane (WebFX).php?panel='api'">Tab Pane</a><br /> <!-- API --> 
Y no muestra la pestaña adecuada (Api).
Quizá me estoy olvidando de algún paréntesis o llave que copiar? en:
Código PHP:
<script type="text/javascript">
<?php 
if(isset($_GET['panel'])) {
?>
window.onload = function() {showArticleTab('<?php echo $_GET['panel'];?>');};
<?php} else {
?>
window.onload = function() {showArticleTab('api'); };
<?php
}
?>
Estoy ya casi rindiéndome pensando que no hay solución a mi problema.
¿Podrías probar tu código por favor si no fuera mucha molestia con algunas pruebillas para la misma página?

Etiquetas: tabs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:09.