2009-01-28 14 views
1

Les widgets de l'interface utilisateur jQuery semblent avoir des états inactifs, actifs et de survol, mais n'ont pas d'état enfoncé (cliqué et maintenu). Est-ce un oubli? À peu près toutes les IU modernes auxquelles je peux penser ont un état dépressif. Quelqu'un at-il ajouté un tel état? Si oui, quels morceaux de code avez-vous dû toucher?L'interface utilisateur de jQuery manque-t-elle un état?


Éditer: Ce que j'aurais dû dire est que le vol stationnaire et le clic ont la même apparence. Il devrait y avoir un autre état afin que vous puissiez voir que vous avez cliqué après avoir plané.

Répondre

1

En HTML/CSS, l'état actif s'applique «pendant qu'un élément est activé par l'utilisateur, par exemple, entre le moment où l'utilisateur appuie sur le bouton de la souris et le relâche». (CSS 2.1 Section 5.11.3) Dans le cas des boutons, ce serait l'état enfoncé. Je suppose simplement que cela s'applique également à l'interface utilisateur de jQuery.

+0

Eh bien, je ne pense pas que ce soit strictement vrai. Les boutons HTML (au moins dans FF et Chrome) ont un état enfoncé (cliqué et maintenu). Certaines autres bibliothèques d'interface utilisateur ont l'état supplémentaire (comme ExtJS). Comme il est maintenant, il n'y a pas assez d'états dans l'interface utilisateur jQuery pour habiller entièrement le bouton. –

+0

Oh attends. Je vois ce que vous dites. Ça ne fait rien. –

+0

Ce que je devrais avoir dit, c'est que le vol stationnaire ressemble à cliqué-et-maintenu, donc il me manque toujours un état. Vous obtenez un changement lorsque vous passez la souris, mais pas lorsque vous cliquez. –

1

Ne pas oublier que dans votre CSS, vous pouvez combiner les pseudo-sélecteurs:

a:link { 
    color: blue; 
} 
a:hover { 
    color: green; 
} 
a:visited { 
    color: purple; 
} 
a:active { 
    /* link is active */ 
    color: red; 
} 
a:visited:hover { 
    /* hovering on a visited link */ 
    color: pink; 
} 
a:active:hover { 
    /* hovering on an active link */ 
    color: black; 
} 
a:visited:active:hover { 
    color: fuchsia; 
} 

Il y a une nette différence entre a:active et a:active:hover: un lien peut devenir actif en tabulant à l'aide du clavier. Bien qu'il ne soit pas infaillible à 100%, l'état d'être actif et plané suggère que l'utilisateur a le lien déprimé. Modifier le style de la bordure vous donnerait l'effet désiré. Le seul bogue dans ce cas est que si le lien devient actif et que l'utilisateur passe la souris dessus sans cliquer, ça va quand même être déprimé.

Essayez ce CSS pour voir ce que je veux dire:

a { 
    padding: 5px 10px; 
    background-color: gray; 
    border-color: gray; 
    border-style: outset; 
} 
a:active:hover { 
    border-style: inset; 
} 
+0

Merci. Je sais tout ça. Je me demande pourquoi l'interface de jQuery UI ne montre pas une différence entre quand vous passez la souris et quand vous appuyez sur un bouton. –

+0

C'est un désagrément particulier que j'ai avec l'interface utilisateur jQuery en ce moment. Il ne semble pas avoir un moyen de s'assurer que les ancres maintiennent leur capacité de thème et dans le cadre de l'interface utilisateur jQuery. Le code ci-dessus n'aide pas si vous voulez une interface à thème, vous devez maintenir un fichier .css séparé pour chaque thème. – CodeMonkeyKing

0

Il semble être sur le but. Remarquez que dans Themeroller il y a une zone cliquable: paramètres d'état actifs, mais elle ne se comporte pas comme l'état actif css. Une grep rapide d'un paquet jQuery UI 1.7 ne montre aucun style pour: actif. Il semble qu'ils ont conçu l'état de l'interface utilisateur pour des repères visuels à leurs widgets, laissant le: actif au développeur à utiliser.