jQuery surligner les zones cliquables

Je voulais vous demander s'il y avait un moyen de mettre en évidence les éléments cliquables dans une page HTML de base, idéalement en appuyant sur une touche du clavier. Lorsque je construis des prototypes fonctionnels, pour gagner du temps, seules certaines fonctionnalités sont réellement développées pour montrer le flux. Je veux en quelque sorte montrer quels éléments sont cliquables, de sorte que les utilisateurs n'ont pas besoin de survoler chaque élément pour savoir ce qui peut être cliqué.jQuery surligner les zones cliquables

Idéalement, ce que je veux réaliser est lorsqu'un utilisateur appuie sur une touche prédéfinie, une boîte apparaît au-dessus de chaque lien (texte ou image ou coordonnées cartographiques), et cela devrait être réalisé automatiquement via un script, de sorte que je Je n'ai pas à le configurer manuellement pour chaque prototype que je construis.

Est-ce possible? Merci d'avance pour vos suggestions!

Source

2011-08-17 ale

Vous le feriez comme ceci:

affecter une classe CSS (à savoir highlight_class) à tous les éléments cliquables. Utilisez jquery pour gérer l'événement clé et hightlight tout élément correspondant à ceci:

$(document).keypress(function(event) { 
    if(event.which == 32){ //Space key 
     event.preventDefault(); 
     $('.highlight_class').effect("highlight", {}, 3000); 
    }   
});

Jetez un oeil à this jsfiddle

Source

2011-08-17 10:10:05

Merci pour la suggestion. Cela fonctionne très bien sur les liens en texte brut, cependant, si je veux lier une image ou une zone de carte, la surbrillance n'apparaît pas. Peut-être que je dois essayer différents types de mise en évidence? Est-ce qu'il y a aussi un moyen pour que le déclencheur fonctionne différemment, de sorte que les surbrillances soient affichées pendant que la touche est maintenue enfoncée, au lieu de faire un show/hide avec timeout? De cette façon, si vous maintenez la touche enfoncée pendant 5 secondes, vous avez le temps de voir toutes les différentes zones qui sont cliquables. – ale

Je pense que pour les images, vous devez créer votre propre fonction de surbrillance. (c'est-à-dire changer l'opacité de l'image). Si vous souhaitez afficher la surbrillance pendant qu'une touche est maintenue enfoncée, vous pouvez utiliser l'événement 'keydown()' pour activer la surbrillance et l'événement 'keyup()' pour le désactiver. –

yeh peut-être que je devrais en quelque sorte laisser la fonction créer un nouveau div au-dessus de la zone et lui attribuer une certaine couleur de sorte qu'il ressemble à un point culminant. Parce que ce n'est peut-être qu'une petite partie d'une grande image qui est en fait cliquable, pas toujours toute l'image ... – ale

Vous pouvez lier la clé que vous voulez déclencher une fonction en utilisant jQuery keypress()

Par exemple, vous pouvez créer ajouter divs cachés à votre balisage et lorsque la presse utilisateur qui touche l'affichage est basculée.

Vous pouvez également l'obtenir en utilisant le code clé. Par exemple

var code = (e.keyCode ? e.keyCode : e.which); 
if(code == 9) { //keycode for the tab key 
    $(".hidden-elements").toggle(); 
}

Hope this aide.

Source

2011-08-17 10:08:59

Jetez un oeil à la .keypress jQuery()

http://api.jquery.com/keypress/

Une idée peut être d'ajouter une classe CSS à vos articles cliquables. Vous pouvez ensuite parcourir les éléments avec cette classe et faire apparaître une infobulle, car vous connaissez votre objet et pouvez déterminer sa position.

Cependant, ne serait-il pas préférable de mettre en évidence avec une couleur claire vos lignes cliquables? Ou peut-être en ajoutant une petite icône, pour que l'utilisateur sache à première vue ce qu'il peut faire?

Source

2011-08-17 10:09:12 JohnBrighton

jQuery surligner les zones cliquables

Répondre

Questions connexes