Concept de base de la manière dont javascript remplace une entrée html par quelque chose d'interactif?

Question

Il s'agit d'une question conceptuelle de très bas niveau.

J'ai un site de contenu où les utilisateurs peuvent évaluer les commentaires laissés par d'autres utilisateurs en utilisant un formulaire déroulant avec deux choix, +1 ou -1. Je voudrais "transformer" cela en une belle flèche vers le haut/bas, à la reddit commentaires.

Je comprends qu'il y a un moyen de le faire par CSS + javascript, mais je ne comprends pas ce qu'est cette méthode et comment cela fonctionne afin que je puisse commencer à l'examiner. Que dois-je faire exactement pour transformer cette liste déroulante en un widget de vote haut/bas?

Je n'ai pas besoin d'aide pour le classement actuel des commentaires, l'algo pour cela ou quoi que ce soit, je veux juste comprendre comment remplacer cet élément de l'interface utilisateur par quelque chose de plus convivial.

Answer 1

La technique de base consiste à utiliser javascript pour masquer l'élément de formulaire réel (probablement en définissant un style de display:none), puis ajoutez votre widget via les méthodes de manipulation DOM. Ensuite, définissez onclicks sur les flèches haut/bas pour mettre à jour la valeur de l'élément caché, en l'augmentant/diminuant d'une unité à chaque fois.

Answer 2

Vous devez avoir deux images pour cela. Et quand il est cliqué mieux faire un ajax demande et mettre à jour la valeur à la base de données.

Si le classement est seulement pour une seule fois, vous pouvez désactiver les images après une mise à jour réussie de la base de données.

Dans SO, ils utilisent quatre images pour upvote et downvote. Deux d'entre eux indiquent le statut cliqué et deux d'entre eux pour le statut par défaut. Lorsque vous cliquez sur une image avec le statut par défaut, un appel est effectué sur le serveur et s'il réussit, l'image devient une image active.

Answer 3

Vérifie-les.

http://developer.yahoo.com/yui/examples/button/btn_example07.html

Et peut-être ces

http://developer.yahoo.com/yui/examples/button/btn_example04.html

Je crois qu'ils travaillent tous sur marque en ligne ou javascript génération.