Comment puis-je organiser Twitter Bootstrap Liste ouverte jusqu'à ce que ma souris se déplace en elle?
J'ai un lien qui utilise le Twitter Bootstrap Liste version 1.3.0 à montrer certains de l'information. Cette information inclut un lien, mais chaque fois que je déplace ma souris à partir du lien à la liste, la liste disparaît.
Comment je peux tenir liste ouverte assez longtemps pour permettre à la souris pour se déplacer dedans? Puis, quand la souris se déplace en dehors du lien et de la liste, se cacher?
Ou est-il un autre plugin qui peut faire cela?
- Je sais que vous avez déjà résolu votre problème, mais pour que cela soit utile pour les futurs lecteurs, merci de poster du code, donc c'est logique.
- Déjà ajouter du code.
- Dans votre question? Je ne vois pas de code dans la question.
- Dans ma réponse...
- Je ne parle pas de code dans votre réponse... je parle de mettre quelque chose de plus significatif dans votre question ci-dessus. Ce site est pour le bénéfice des futurs lecteurs ainsi que vous-même. Votre question doit être formaté de telle sorte qu'il a un sens et que si quelqu'un sait ce que tu veux dire et pourrait le comprendre.
- J'ai ajouté un lien à votre question, donc au moins le lecteur sait ce plugin, que vous êtes en train de parler.
Vous devez vous connecter pour publier un commentaire.
Avec bootstrap (testé avec la version 2) j'ai trouvé le code suivant:
Le point principal est de remplacer le modèle avec mouseleave() enabler. J'espère que cette aide.
offset: 10
. Je vous remercie.Juste pour ajouter à Marchello exemple, si vous voulez la liste de disparaître si l'utilisateur déplace la souris à l'écart de la liste et le lien source, essayez ceci.
data
propriétés.Uncaught ReferenceError: timeoutObj is not defined
Bootstrap 3 et au-dessus de
Simple, il suffit d'utiliser la
container
option et ont comme l'élément qui est l'appel de la liste. De cette façon, la liste est un enfant de l'élément qui l'appelle. Par conséquent, vous êtes techniquement toujours planant au-dessus de la mère, parce que l'enfant liste lui appartient.Par exemple:
HTML:
jQuery:
De l'exécution d'une
$.each()
boucle sur chacune de mes éléments que je veux une fenêtre pop-over lié à son parent. Dans ce cas, chaque élément a la classe depop
.CSS:
Cette partie est facultative, mais recommandée. Il se déplace de la liste en bas de 7 pixels pour un accès plus facile.
TRAVAIL DÉMO
C'est un peu hacky, mais de construire hors de marchello l'exemple, je l'ai fait (pas besoin de modèle):
La
setTimeout
permet de s'assurer qu'il est temps de déplacement de la gâchette lien vers la liste.$this.data('popover').tip()
au lieu de$(this).siblings(".popover")
, mais il se sent comme hacky que votre approche 🙂 . Votre fonction setTimeout avec l'placez le sélecteur est assez intelligent!$(this).hide();
avec$(_this).popover('hide');
Cette question sur le bootstrap github pensions de traite de ce problème. en gras souligné l'expérimental "en haut/bas/gauche/droite" de placement. Il fonctionne, plutôt bien, mais vous devez vous assurer que la liste de déclenchement n'est pas positionné de manière statique avec les css. Sinon la liste n'apparaît pas là où vous le souhaitez.
HTML:
<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>
CSS:
JS:
Voici mon point de vue: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/
Parfois, tout en déplaçant la souris de liste déclencheur réelle de la liste de contenu en diagonale, vous passez la souris sur les éléments ci-dessous. Je voulais gérer de telles situations – aussi longtemps que vous atteignez liste du contenu avant que le délai de feux, vous êtes enregistrer (la liste ne vont pas disparaître). Il nécessite
delay
option.Ce hack essentiellement des remplacements Liste
leave
fonction, mais les appels de l'original (qui démarre la minuterie pour masquer la liste). Puis il attache un auditeur àmouseenter
liste du contenu de l'élément.Si la souris entre dans la liste, la minuterie est désactivée. Puis s'il écoute
mouseleave
sur la liste et s'il est déclenché, il appelle le congé initiale de la fonction de sorte qu'il pourrait commencer à les cacher de la minuterie.container
option. J'ai corrigé cela dans ma fourchette: jsfiddle.net/5p7g4j22/1Solution a fonctionné pour nous, pour Bootstrap 3.
Enfin je résoudre ce problème. Liste disparaître est parce que la Liste ne nœud enfant de lien, c'est l'enfant du nœud de corps.
Donc, fixer, il est facile de changer
bootstrap-twipsy.js
contenu:changement
.prependTo(document.body)
à.prependTo(this.$element)
et fixer la position la cause du problème par le changement.
et certains utilisent le lien tigre liste sera la cause de liste avec un lien trop, ajoutez une durée de contenir de lien, donc le problème est résolu.
Ceci est une version de Wojtek Kruszewski solution. Cette version de la poignée liste clignoter lorsque la souris revenir à déclencher. http://jsfiddle.net/danielgatis/QtcpD/
J'ai essayé les solutions de @Wotjek Kruszewski et @danielgatis, mais ni a fonctionné pour moi. Mise en garde: je suis en utilisant Bootstrap v2.1.0, pas de v3. Cette solution est en coffeescript (pourquoi les gens sont toujours à l'aide de la plaine du javascript? =)).
off('mouseenter')
pour éviter de se retrouver avec plus d'un gestionnaire lors de l'affichage et masquage de la fenêtre pop-over sans bouger la souris à l'intérieur.Voici ce que j'ai fait:
C'est très simple et awesone solution à ce problème, que j'ai découvert par la recherche dans le bootstrap info-bulle de code. Dans le Bootstrap v3.0.3 voici la ligne de code que j'ai remarqué:
ce dit que si
container
propriété de la liste est définie alors la liste obtient appendTo() de l'élément au lieu de insertAfter() à l'élément d'origine, tout ce que vous devez faire est de simplement passer l'élément du conteneur de la propriété. En raison de appendTo() la liste devient une partie du lien sur lequel le hover événement a été " lié " et maintient ainsi la liste ouverte lorsque la souris se déplace sur elle.Cela fonctionne pour moi sur BootStrap 3:
À la fin de la conversation liée par @stevendaniels est un lien vers un Twitter Bootstrap extension appelée BootstrapX - clickover par Lee Carmichael. Cela modifie la liste à partir d'un overlarge info-bulle dans un contrôle interactif, qui peut être fermée en cliquant ailleurs sur le formulaire, un bouton de fermeture, ou après un délai d'attente. Il est facile à utiliser, et très bien fonctionné pour le projet, j'ai besoin d'elle dans. Quelques exemples de son utilisation peuvent être trouvés ici.
Je n'aimais pas les réponses que j'ai trouvé, j'ai donc combiné de réponses à certaines questions qui ont été proches de faire le code suivant. Il vous permet de terminer en haut, juste en tapant
$(selector).pinnablepopover(options);
chaque fois que vous voulez faire un "pinnable' liste.Code qui rend les choses faciles:
Exemple d'utilisation:
Après avoir vu toutes les Réponses que j'ai fait ce je pense qu'il sera utile .Vous Pouvez gérer Tout ce dont vous avez besoin.
Beaucoup de réponse ne fait pas de spectacle de retard je l'utilise. Son travail très agréable dans mon projet
/******
/*************************************************************/
/****************CODE DE SCRIPT ****************** VEUILLEZ UTILISER DE L'ENTENDRE ******/
Maintenant je viens de passer à webuiPopover, il fonctionne, tout simplement.