Comment puis-je implémenter un sélecteur d'étiquette de style gmail?

Question

Quelle est la manière la plus simple de mettre en œuvre (quelque chose comme) l'interface de Gmail pour étiqueter les messages? Est-ce qu'une bibliothèque javascript a un widget comme celui-ci?

http://img294.imageshack.us/img294/7097/36698396.png

Comportement:

1. Cliquez sur une étiquette dans le menu déroulant pour étiqueter immédiatement le message.
2. Vérifiez plusieurs étiquettes, puis "Appliquer" pour ajouter plusieurs étiquettes (pas sûr que j'aime l'exigence "Appliquer" ...)
3. Tapez la boîte pour affiner votre liste d'étiquettes. Si vous le réduisez à 1, appuyez sur Entrée pour appliquer cette étiquette.
4. Déclenchez le widget avec la touche de raccourci "L".

Answer 1

Horace - vous voulez quelque chose de vraiment compliqué, et vous devriez prendre en compte que même avec beaucoup de pré- Composant fait, il faudra un certain temps pour obtenir quelque chose comme ça fonctionne (pour ne pas mentionner - être jolie :-)).

De toute façon, les composants pré-fabriqués sont sympas mais j'aime souvent les bidouiller moi-même, style libre comme. Voici donc quelque chose que j'ai préparé pour vous aider à démarrer: My simple label demo (warning - J'ai seulement testé ceci sur Firefox 3 et je suis à peu près sûr qu'il ne fonctionnera pas dans n'importe quoi d'autre).

C'est loin d'être joli, mais le code est assez simple et devrait être facile à comprendre.

Answer 2

Je doute qu'il y ait une solution précuit là-bas qui fait exactement ce que vous voulez, mais vous devriez être en mesure de mettre quelque chose ensemble vous-même avec une bibliothèque JavaScript décent. Quelque chose comme Ext JS serait idéal pour cela.

Quelques pages API d'intérêt potentiel:

• Ext.Panel
• Ext.form.TextArea
• Ext.menu.CheckItem
• Ext.KeyNav

Answer 3

Je cherchais une implémentation d'étiquette similaire et j'ai trébuché sur ce sujet.

Je ne peux pas ajouter à la partie JS de la question, mais en termes de « joliesse » des étiquettes, vous pourriez trouver l'article/code suivant utile:

CSS Gmail-Like Labels

Toutes les meilleur!