Ajout de CSS à l'onglet UQ jQuery Ajout

Question

J'essaie d'ajouter 2 autres onglets d'interface utilisateur après la connexion d'un utilisateur. J'ai d'abord essayé de faire un après.

$('#slideshow').tabs('remove', '4'); 
$("#slideshow ul li:last-child").after('<li><a href="#slide5">my account</a></li><li class="last"><a href="#noslide" onclick="location.href=\'/Account/LogOut\';">log off</a></li>'); 

Cette méthode ajoute les onglets, mais jQuery pense que les 2 derniers onglets n'existent pas et l'onglet Mon compte ne fait rien.

Puis j'ai essayé l'autre méthode.

$('#slideshow').tabs('remove', '4');  
$('#slideshow').tabs('add', '#slide5', 'my account'); 
$('#slideshow').tabs('add', '/Account/LogOut', 'log off'); 

Ceci aura les 2 derniers onglets ajoutés sans aucun css en dessous de ma liste d'origine.

Le html se présente comme suit:

<div id="slideshow"> 
    <div id="slide1" class="ui-tabs-panel"></div> 
    <div id="slide2" class="ui-tabs-panel"></div> 
    <div id="slide3" class="ui-tabs-panel"></div> 
    <div id="slide4" class="ui-tabs-panel"></div> 
    <div id="slide5" class="ui-tabs-panel"></div> 

    <ul id="menuslide" class="ui-tabs-nav"> 
    <li><a href="#slide1">i</a></li> 
    <li><a href="#slide2">hope</a></li> 
    <li><a href="#slide3">this</a></li> 
    <li><a href="#slide4">gets fixed</a></li> 
    <li class="last"><a href="#slide5">login</a></li> 
    </ul> 
</div> 

CSS:

#menuslide { 
width:990px; 
height:46px; 
} 
#menuslide li { 
height:46px; 
float:left; 
display:inline; 
background:url(sepslidemenu.png) no-repeat 100% 0; 
} 
#menuslide li.last { 
background:none; 
} 
#menuslide li a, #menuslide li a:link, #menuslide li a:visited { 
height:36px; 
float:left; 
display:inline; 
font-size:1.8em; 
color:#3f7da0; 
font-weight:bold; 
padding:10px 30px 0 30px; 
} 
#menuslide li a:hover { 
background:url(slidemenu_hover.png) repeat-x; 
text-decoration:none; 
} 

Answer 1

je le fais tout droit sur php.

Code Pseudo:

if (session is logged in) 
    display menu_item_1 ... menu_item_n 
    display menu_logged_in_item_1 .... M 
else 
    display menu_item_1 ... menu_item_n 

Je ne pense pas que vous avez besoin quelque chose de spécial avec css, html ou ajax. Je vous suggère fortement de le faire à partir de votre langage de script, surtout si vous avez différents privilèges d'utilisateur (utilisateur, administrateur, éditeur ...), car vous pouvez les configurer avec élégance par rapport à votre base de données

Answer 2

dassouki: Je fais ça dans mon code serveur aussi. Mais quand je reviens seulement json de la tentative de connexion et avoir besoin de manipuler une très petite quantité de HTML. Il n'y a pas besoin d'une page pleine charge

Answer 3

je répondre à ma propre question ici

$("#slideshow ul li:last-child a").text('my account') 
$("#slideshow ul li:last-child").removeClass('last').after('<li class="last"><a href="#" onclick="location.href=\'/Account/LogOut\';">log off</a></li>'); 
$('#slideshow').tabs('select', 4);