Utiliser les onglets jQuery comme navigateur de site?

Je souhaite utiliser les onglets jQuery en tant que navigateur, c'est-à-dire que les onglets ne contiennent rien, mais qu'à la place, lorsque l'utilisateur clique sur tous les autres onglets, il doit naviguer vers une autre page.Utiliser les onglets jQuery comme navigateur de site?

Aussi, en arrivant à cette page, je veux que le second onglet soit visible sur le chargement.

Exemple:

Page1.aspx:

Page1 | Page2 | Page3 | Page4 
Page1 content| blank | blank | blank

Les titres de l'onglet pour la page 2, 3 et 4 devraient être simplement des liens vers la page appropriée.

Page2.aspx:

Page1 | Page2 | Page3 | Page4 
    blank |Page2 content| blank | blank

Les titres de l'onglet de la page 1, 3 et 4 doit être juste des liens vers la page appropriée.

Et ainsi de suite.

Je souhaite placer les onglets dans une page maître, puis remplir le contenu de chaque page de son onglet respectif et laisser les autres vides.

Source

2009-07-23 Shimmy

êtes-vous sûr que vous avez besoin jquery pour cela? peut-être que je suis mal compris, mais il semble que vous voulez juste un nav standard ... – Jason

Je veux vraiment un nav standart – Shimmy

Je pourrais toujours vouloir utiliser quelques onglets dans certaines pages comme des «onglets» et non des liens, mais encore, Je veux que le contenu (au moins dans certains d'entre eux) réside dans différentes pages. – Shimmy

Êtes-vous sûr que vous ne voulez pas quelque chose comme ceci:

<ul> 
    <li><a href="somepage1.aspx" class="selected">Link 1</a></li> 
    <li><a href="somepage2.aspx">Link 2</a></li> 
    <li><a href="somepage3.aspx">Link 3</a></li> 
    <li><a href="somepage4.aspx">Link 4</a></li> 
</ul> 
<div id="content1"> 
    <p>Some content for page 1</p> 
</div>

Je ne vois pas ce que vous utilisez jQuery pour ...

Source

2009-07-23 00:40:00 Jason

Je donno, je voudrais fondamentalement la conception nav, je l'ai trouvé cool dans l'automatisation jQuery plutôt que de passer du temps sur la conception de la navigation, sauf si vous avez un meilleur moyen rapide d'y parvenir. jQ automatise les CSSs et le design qui est un peu ce que je cherche. – Shimmy

Pouvez-vous également poster jQ? – Shimmy

http://css.maxdesign.com.au/listamatic/ – Jason

jQuery supporte le chargement de contenu via ajax , simplement en pointant le lien A vers une URL au lieu d'un ID div. Mais pour autant que je sache, il n'y a aucun moyen de le faire passer à une autre page. Vous feriez probablement mieux de simplement utiliser les définitions css existantes pour les onglets et de ne pas utiliser le plugin ui tabs

MISE À JOUR. C'est la maquette html/css de base pour les onglets. Vous aurez besoin de télécharger une copie de jquery ui pour obtenir le css et les images, mais c'est le squelette qui fait les onglets.

<ul class="ui-tabs-nav"> 
    <li class="ui-tabs-nav-item ui-tabs-selected"><a href="/">Home</a></li> 
    <li class="ui-tabs-nav-item"><a href="/somepage.html">Some Page</a></li> 
</ul>

Source

2009-07-23 00:41:52 Mark

Vous avez raison, ce que je veux vraiment gagner ici, ce sont les onglets CSS & design plutôt que la fonctionnalité de tabulation. Avez-vous une meilleure idée (mais un codage rapide)? – Shimmy

J'ai mis à jour mon post pour refléter le squelette html de base des onglets, donc vous n'avez pas besoin d'utiliser le plugin, juste le css et les images – Mark

Inspirés par la réponse de Mark, et après quelques essais et erreurs et fouillant dans le fichier CSS jQuery UI, je me suis ce qui suit à travailler en utilisant les propres styles de jQuery UI.

<div id = "nav-bar" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> 
    <ul class = "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class = "ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Current Tab</li> 
    <li class = "ui-state-default ui-corner-top"><a href="/some_page">To Some Page</a></li> 
    </ul> 
</div>

et dans un autre fichier CSS ajouter cette

#nav-bar.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding: .5em 1em !important;}

Source

2012-09-04 16:25:19

Utiliser les onglets jQuery comme navigateur de site?

Répondre

Questions connexes