Otra ves molestando.......
Estoy checando la pagina de Jquery UI y encontre un codigo en el que se genera unos Tabs (Spry), y en el cual se utliza Ajax.........
Lo que estoy tratando de hacer y no he podido
es que al momento de apretar alguna pestaña me made a llamar otra pagina (subSpry.html) en la cual tengo solo los divs del Tab(Spry) ejemplo de la pagina de Jquery y en mi pagina principal.html es donde tengo todos los Script y estilos del ejemplo base pero al momento de invocar a subSpry.html en el div contenedor de principal.html no se muetsra con los estilos!!!!!.............Como le puedo hacer para que se visualice la pagina subSpry.html con todos los estilos correspondientes?????Les dejo el codigo:
principal.html
Código HTML:
<HTML>...... <link type="text/css" href="css/trontastic/jquery-ui-1.8.19.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script> <script> $(function() { $( "#tabs" ).tabs({ ajaxOptions: { error: function( xhr, status, index, anchor ) { $( anchor.hash ).html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); } } }); }); /*ESTA ES LA QUE SE APLICARIA A LA PAGINA DE subSpry.html*/ $(function() { $( "#tabsMio" ).tabs({ ajaxOptions: { error: function( xhr, status, index, anchor ) { $( anchor.hash ).html( "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." ); } } }); }); function ver() { alert("sssssssssss"); } </script> <style type="text/css"> /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} </style> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="test.html">Tab 1</a></li> <li><a href="subSpry.html">Tab 2</a></li> <li><a href="">Tab 3 (slow)</a></li> <li><a href="">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> ....... </HTML>
Código HTML:
<html> .. .. <div id="tabsMio"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="test.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> .. .. </html>
