Remarque: Je n'ai que quelques jours d'expérience avec jQuery, bien que j'ai cherché autour pour essayer de résoudre le problème et testé mais cela ne fonctionne tout simplement pas.jQueryUI Empilable (Supprimer le contenu sur un autre onglet)
Ce que je suis en train de réaliser:
Je vais avoir des problèmes avec .selectable, j'ai créé un sélectionnable de jQueryUI avec quatre différents onglets, chaque onglet affiche un contenu différent ajouté à ce (un classe pour l'image, un append pour un bouton et un append pour le texte du paragraphe).
Voici un aperçu visuel de ce que je suis en train de réaliser: http://puu.sh/gELQi/211165f55a.png
- Mon actuelle jQuery = http://jsfiddle.net/p5gsby49/8/
Mon problème
Actuellement, en cliquant sur un onglet, il affiche correctement le contenu de cet onglet, mais dès que vous cliquez sur un autre/même onglet à nouveau il:
Ajouter le contenu chevauchant le précédent onglet
- bouton est ajouté sur chaque nouveau clic de même ou un autre onglet
- nouvelle classe d'image est ajoutée et poussé sous l'onglet précédent
- paragraphe te xt chevauche
Ce que je dois
je besoin d'un moyen pour que le chaque clic onglet (même ou un autre onglet), il efface tout le contenu précédent de le dernier onglet (tous les boutons/paragraphes/classes d'image).
En outre, un autre problème avec le jQueryUI .selectable() est qu'il permet de sélectionner plusieurs onglets à la fois, si vous faites glisser votre curseur sur les onglets de mon JSFiddle, vous verrez ce que je veux dire, je veux seulement être capable de sélectionner un au maximum.
Mon code décomposé
jQuery
//Tab Content added in relation to tab number
if ($('#elements .elementOne').hasClass('ui-selected')) {
// Tab 1
$(".elementOneInfo").addClass("elementOneInfoImage");
$(".elementOneInfo").append("<button><a href='/clans'>MORE<two</button>");
$(".elementOneInfo").append("<p>"+textOne+"</p>");
}
if ($('#elements .elementTwo').hasClass('ui-selected')) {
//Tab 2 etc.
$(".elementTwoInfo").addClass("elementTwoInfoImage");
[...]
HTML
<div class="container elements-wrapper">
<div class="col-md-12">
<div class="row">
<!-- Where new content is added -->
<div class="col-md-7 elements-info">
<div class="elementOneInfo"></div>
<div class="elementTwoInfo"></div>
<div class="elementThreeInfo"></div>
<div class="elementFourInfo"></div>
</div>
<!-- Where tabs exist -->
<div class="col-md-5 elements-titles-wrapper">
<ul id="elements">
<li class="elementOne light ui-widget-content"><h3>Title1</h3></li>
<li class="elementTwo dark ui-widget-content"><h3>Title2</h3></li>
<li class="elementThree light ui-widget-content"><h3>Title3</h3></li>
<li class="elementFour dark ui-widget-content"><h3>Title4</h3></li>
</ul>
</div>
</div>
</div>
</div>
SCSS
/* Tabs */
.elements-titles-wrapper {
padding:0;
ul {
list-style: none;
padding-left: 0;
}
li > h3 {
color: white;
margin:0;
padding: 15px 0 15px 15px;
}
.light {
background-color: $aqua;
}
.dark {
background-color: $dark_aqua;
}
.active {
background-color: #75c5e0;
}
.ui-selected {
background: $light_aqua;
}
.ui-selecting {
background: $light_aqua;
}
}
/* Tab Content Added */
.elements-info {
padding:0;
p {
color:white;
font-size:12px;
background: rgba(0,0,0,.5);
padding: 10px;
position:absolute;
bottom:0;
margin-bottom: 0;
@include font(Open-Sans);
}
button {
background: $cream;
border-radius:5px;
margin: 5px 0 0 5px;
a {
color:$brown;
@include font(Open-Sans);
padding: 4px 8px;
text-decoration: none;
}
}
/* Random Background Images for testing */
.elementOneInfoImage {
background: url(http://wallpaperkick.com/wp-content/uploads/2015/02/gray-wallpaper.jpg) no-repeat center right;
height:224px;
}
.elementTwoInfoImage {
background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/red-wallpaper-4.jpg) no-repeat center right;
height:224px;
}
.elementThreeInfoImage {
background: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/Green-Wallpaper-3.jpg) no-repeat center right;
height:224px;
}
.elementFourInfoImage {
background: url(http://walldiskpaper.com/wp-content/uploads/2014/11/Blue-Light-Wallpaper-Image-Picture.png) no-repeat center right;
height:224px;
}
}
Merci pour la lecture, j'espère que quelqu'un peut être en mesure de me éclairer sur la façon dont cela pourrait se faire, je suis en mesure d'ajouter le look and feel de l'image visuelle que j'ai envoyé avec un onglet, mais dès que j'ai ajouté la commutation des onglets dans le mélange, il n'a tout simplement pas fonctionné.
Vous apposent un bouton Plus encore et encore. Avez-vous besoin que cela soit généré une seule fois ou que ça marche bien maintenant? –
@Joker Je veux que le bouton ne soit appliqué qu'une seule fois sur chaque onglet, ce n'est pas seulement le bouton mais les classes de texte et d'images sont ajoutées encore et encore le bouton semble plus dominant mais ils font la même chose. Chaque fois que l'on clique sur un onglet (identique ou différent), je veux effacer le contenu de l'onglet précédent et appliquer les nouvelles informations. –