web-dev-qa-db-fra.com

Quelle est la meilleure façon d'afficher les données de la zone de sélection qui sont longues (presque une phrase de ligne)

J'ai une zone de liste pour afficher les données de la zone de sélection qui sont longues (presque une phrase de ligne). Je ne peux pas créer de zone de liste qui semble très grande.

Pour toutes les phrases que j'ai, je peux utiliser du code (par exemple, pour "Phrase1", je peux utiliser la forme abrégée "A")

Quelle est la meilleure façon d'afficher la zone de liste dans un tel état.

zone de liste

<select>
<option>Long Sentence1....</option>
<option>Long Sentence2....</option>
</select>

Zone de liste non nécessaire. Je veux juste une option précise.

Merci

usabilitygui-designlayoutux-fieldhuman-interface-guideline
2
Mike Phils

Une fenêtre contextuelle avec une phrase complète lorsque l'utilisateur survole la ligne de phrase courte serait une solution.

enter image description here

1
Bharath Selvaraj

Une option serait si vous devez absolument afficher les données dans une liste déroulante de sélection pour conserver la largeur du champ fixe et la développer lors de la sélection. Les options pourraient également se retrouver dans la liste. Bien qu'une valeur sélectionnée ne convienne pas à tous pour l'affichage

enter image description here

1
Stevy

À première vue

Je crois que votre réponse réside dans les effets Marquee, précédemment répondu ici https://stackoverflow.com/questions/337330/javascript-Marquee-to-replace-Marquee-tags .

Mon préféré doit être celui-ci: http://remysharp.com/2008/09/10/the-silky-smooth-Marquee/

Un choix de conception préféré

J'adore la solution d'Apple (parti pris personnel), qui consiste à afficher le texte normalement pendant un moment avant de faire défiler si nécessaire jusqu'à ce qu'il revienne à la valeur par défaut et s'arrêter avant le cycle suivant. Malheureusement, je pense qu'une approche JQuery ou JavaScript personnalisée est en règle si vous souhaitez obtenir les meilleurs résultats.

Une touche réactive

Pour un bon effet Marquee basé sur le premier lien (Marquee lisse et soyeux), la fonction devrait ajouter au lieu de:

$('Marquee').Marquee(optionalClass);

Aurait besoin de:

1 Donne un débordement horizontal aux classes .Marquee En CSS (en les conservant sur une seule ligne):

.Marquee {
    overflow-x: auto;
}

2 Chargez le gistfile1.js (je l'appellerais "Marquee.js") trouvé ici

3 Vérifiez tout $('.Marquee') pour le contenu débordé (dans ce cas vos boutons)

4 Appliquez Marquee si nécessaire

5 Revérifiez chaque fois que la page est redimensionnée

function isOverflowed(element){
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}
$( window ).resize(function() {
  $('.Marquee').each(function(){
    if(isOverflowed($(this))) $(this).Marquee();
  });
});

crédit de fonction isOverflowed: micnic at https://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow

J'espère que cela vous aide!

1
Leviscus Tempris