Tabs dinámicos desde otra Página

Deiv · #1 (**permalink**) 19/07/2010, 07:42

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 showArticleTab( sName ) { 
    if (typeof tabPane != "undefined" ) { 
 
        switch ( sName ) { 
 
            case "main": 
                tabPane.setSelectedIndex( 0 ); 
                break; 
 
            case "usage": 
                tabPane.setSelectedIndex( 1 ); 
                break; 
 
            case "api": 
                tabPane.setSelectedIndex( 2 ); 
                break; 
 
            case "implementation": 
                tabPane.setSelectedIndex( 3 ); 
                break; 
 
            case "looknfeel": 
                tabPane.setSelectedIndex( 4 ); 
                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", null, null, articleMenu)); 
 
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.

Adler · #2 (**permalink**) 19/07/2010, 08:36

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

Deiv · #3 (**permalink**) 20/07/2010, 15:12

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?

Adler · #4 (**permalink**) 21/07/2010, 06:07

Hola

Esto en la página desde la que intentas accedar

Código HTML:

Ver original<p>
<a href="paginalmenu.php?panel='main'">Tab Pane</a><br />
.......

Esto otro en la página donde está el menú. Colócalo justamente antes de la etiqueta </body>

Código PHP:

Ver original<?php 
if(isset($_GET['panel'])) {
?>
<script type="text/javascript">
showArticleTab('<?php echo $_GET['panel']);?>')
<?php
}
?>

Pruebalo, pero no estoy seguro que funcione con los resultados esperados

Suerte

Deiv · #5 (**permalink**) 21/07/2010, 09:02

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.

Deiv · #6 (**permalink**) 22/07/2010, 07:37

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.

Adler · #7 (**permalink**) 23/07/2010, 05:55

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<script type="text/javascript">
<?php 
if(isset($_GET['panel'])) {
?>
window.onload = function() {showArticleTab('<?php echo $_GET['panel'];?>');};
<?php
} else {
?>
window.onload = function() {showArticleTab('main');};
<?php
}
?>

Suerte

Deiv · #8 (**permalink**) 27/07/2010, 15:50

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?