6
votes

Comment puis-je améliorer cette interface de type JQuery Gmail?

EDIT 3: J'ai obtenu ce travail en ignorant les conseils donnés ci-dessous et l'écoute de la fenêtre, mais seulement lorsqu'un entrée , text ou textarea ne se concentre pas. Je ne suis pas sûr que ce soit la meilleure façon d'être traiter ce problème, cependant.

http://jsfiddle.net/gXPES/5/

EDIT 2: J'ai essayé aborder le keydown problème en appliquant mise au point et flou manutentionnaires à < code> entrée s. Alors j'écoute seulement pour des événements lorsque var focus_on_input == true . Mais il semble que tout ne va pas bien. Ce qui empêche certains comportements, mais ayant d'autres, un comportement plus bizarre. Par exemple, quand je onglet sur le champ de saisie, appuyez sur J et K va sauter vers le haut ou le bas de la liste. Si I cliquez sur ailleurs et mise au point de changement, ce problème est résolu. Toute pensée? EDIT: Merci à answerer aide, j'ai limité les sélecteurs lors de l'écoute keydown pour que je puisse encore taper des caractères ailleurs, mais je suis en cours d'exécution dans un nouveau numéro. Lorsque j'appuie sur J ou K les sauts de navigation flèche vers le haut ou le bas de la liste des tâches. Et quand je presse C ou # il me informe qu'aucune tâche est sélectionnée. X fonctionne comme il se doit et ne sélectionnez pas une tâche. Hébergement ce code sur jsFiddle car il n'y a aucun moyen possible de faire des commentaires dans son intégralité ici. J'ai posté tout mon JS, CSS et HTML utilisé pour l'interface elle-même. Je suis la conception d'une interface utilisateur d'inspiration Gmail pour la gestion des tâches en utilisant jQuery sur le front-end (et PHP sur le back-end, mais il est largement hors de propos à ce sujet). Je suis encore relativement nouveau pour le développement jQuery et je me rends compte Je fais un certain nombre de mauvaises choses . Jusqu'à présent, je tout simplement pas connu quoi exactement Je fais mal ni comment le résoudre . J'espérais des âmes plus savants pourraient me aider (et d'autres, je l'espère) Découvrez comment factoriser le code jQuery pour une application de plus grande taille. Pour commencer, voici un certain nombre de choses que je voudrais savoir comment faire mieux: Appeler ce code uniquement lorsque l'interface de tâche est active. Améliorer l'écoute pour le keydown . Actuellement, j'écoute pour J , K , X , Maj + 3 et C . Je vais aussi être à l'écoute sur E pour l'édition tâche, mais pas encore mis en œuvre les modifications. Le problème avec les auditeurs est liée à ma première préoccupation, est qu'ils sont toujours . Cela signifie que la touche J alors que dans un </ code>, par exemple, ne provoquera pas le comportement par défaut. </ P> </ li> <Li> <p> Utilisez moins HTML dans mon code. </ P> </ li> <Li> <p> Faire mon code en général plus DRY. </ P> </ li> </ ol> <P> Toutes les pensées, peu importe à quel point, sont plus que bienvenus. Encore une fois, je me rends compte que je ne vous suis pas ici les meilleures pratiques, mais parce que je suis stupide pour eux. Je veux apprendre, et l'espoir d'utiliser cette occasion de le faire. </ P> <P> Vive! </ P> </div>  <div class="d-flex mt-1"> <div class=""> <a class="badge badge-info" href="/tag/jquery">jquery</a> <a class="badge badge-info" href="/tag/user-interface">user-interface</a> <a class="badge badge-info" href="/tag/gmail">gmail</a> <a class="badge badge-info" href="/tag/refactoring">refactoring</a> </div> </div> <hr>  <div class="pl-5"> <small class="text-muted">12 commentaires</small> <div class="comments mt-3"> <p>Probablement pas la critique que vous recherchez, mais que diriez-vous d'utiliser <espace> pour sélectionner? Je crois que cela vérifiera / décochez des cases dans d'autres UIS, c'est donc un peu ce que j'attendrais. Je ne sais pas non plus pourquoi Gmail utilise J / K au lieu de w / s ... Les joueurs s'attendaient à ce que..mais quoi que ce soit: P <B> Edit: </ B> NVM..SPACE Fait défiler la page dans FF.</p> <hr> <p>PS: ça a l'air sexy. Je l'aime bien.</p> <hr> <p>@Mark, je pourrais certainement utiliser les deux <kbd> espace </ kb> et <kbd> x </ kbd>. Personnellement, je suis un utilisateur de Gmail Power, c'est pourquoi j'ai choisi les caractères que j'ai faits. Quels autres UIS connaissez-vous de cet usage <kbd> espace </ kbd>? <B> EDIT: </ B> GOTCHA sur FF. Même avec chrome. Qui peut être une norme de navigateur.</p> <hr> <p>@Mark, oh, et merci pour les compliments. Et RE: W / S, c'est parce que "s" est pour "Star".</p> <hr> <p>@Moshe, merci! Après s'être assis ici pendant des mois et des mois et codant (bien que ce que vous voyez juste, il a été préparé au cours des dernières 24 heures), il est agréable d'entendre des pensées à l'aspect et à la sensation. Très appréciée.</p> <hr> <p>@Joshsmith - De rien. Au fait, cet échantillon de code n'a pas à voir avec des buals.com, n'est-ce pas? ;)</p> <hr> <p>@Moshe, en effet ça fait! Je pensais que les gens snoopent un peu, mais ça va. :]</p> <hr> <p>@Joshsmith - tout ce que vous postez en ligne est dans le domaine pubien pour toujours. (Ou jusqu'à la prochaine fois que tous les moteurs de recherche effacent leurs caches respectifs, en supposant que personne ne la téléchargée tant qu'elle était en place.)</p> <hr> <p>@Joshsmith - Un conseil - lorsque vous remplissez un objectif, il ne devrait pas simplement disparaître pour toujours. Je veux pouvoir voir mes objectifs précédents, même s'ils sont terminés.</p> <hr> <p>@Moshe, oh bien sûr. Et ceci est pour les tâches, pas des objectifs. Les objectifs ont une interface utilisateur différente. Et la tâche (lorsque terminée) ne disparaîtra pour toujours non plus. Ceux-ci seront enregistrés. Vérifiez cela pour un exemple (avec des rêves, pas des buts): <a href="http://farm5.static.flickr.com/4015/5160652754_1ca488dcec_o.png" rel="nofollow Noreferrer"> Farm5.Static.flickr. COM / 4015 / 5160652754_1CA488DCEC_O.PNG </a></p> <hr> <p>@JOSH: Les chèques d'espace / décochent des trucs dans Windows. Dans FF et Chrome, entrez dans leurs options, trouvez une case à cocher, concentrez-la, puis vous pouvez appuyer sur l'espace pour le basculer. Je me suis ajouté à la liste de notify sur Goals.com.</p> <hr> <p>@Mark: Merci! J'ai depuis ajouté de l'espace comme option de sélection pour la liste des tâches. Si vous souhaitez vérifier le pré-alpha, n'hésitez pas à m'envoyer un email à Josh [at] buals.com et je vais vous mettre en place. Acclamations.</p> <hr> </div> </div> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="2186005983" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <p class="mt-4 font-weight-bold">4 Réponses :</p> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 1<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> <code> .Beydown </ code> n'a pas besoin d'être attribué à <code> $ (fenêtre) </ code> Il faut un sélecteur tel que <code> $ (': non (textarea)') </ code> </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">5 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Donc, vous suggérez-vous de lier à <code> # liste-liste-conteneur </ code> alors? Et puis peut-être ajouter quelques <code>: pas </ code> s pour les entrées et textaes? <B> Edit: </ B> Nevermind, cela ne fonctionnera pas. Alors, quelle est une bonne liste sûre de <code>: pas </ code> sélecteurs alors? </p> <hr> <p class="answer-comment"> Vous avez l'idée, limitez la portée aux éléments que vous souhaitez. </p> <hr> <p class="answer-comment"> : non (textarea): non (: texte) sont les plus importants </p> <hr> <p class="answer-comment"> L'entrée inclut les cases à cocher, qui devraient avoir le travail de finition au clavier </p> <hr> <p class="answer-comment"> Ah, Gotcha. Le problème que je vois, c'est qu'il n'entraînera pas la lettre dans d'autres intrants. Peut-être que je devrais changer ces <code> retour false </ code> à un <code> if-ele </ code> construction? </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Je serai le premier à admettre que je n'ai pas appris à le faire (et je devrais vraiment faire), mais faire glisser et laisser tomber serait une bonne option pour réorganiser les tâches de la liste. Le look est très gentil au fait. J'utilise IE8 et je n'arrive pas à utiliser les raccourcis du clavier, malheureusement - mais il semble que Jsfiddle ne me permettra pas de se concentrer sur le volet de résultats, de sorte que ce n'est pas votre code qui ne se comporte pas pour IE8. </ p> </div> <hr>  <div class="pl-5"> <small class="text-muted">6 commentaires</small> <div class="comments mt-3"> <p class="answer-comment"> Ah, je pense que c'est parce que vous ne pouvez pas changer de concentration vers le volet. Je ne peux l'utiliser que lorsque je clique dans la vitre elle-même (sur Chrome). Cela semble-t-il décent dans IE8, cependant? Je n'ai effectué aucune vérification du navigateur croisé. En ce qui concerne la fonctionnalité de Drag + Drop, cela devrait être mis en œuvre avec JQuery UI, mais pour le moment je ne sais pas si le cas d'utilisation est là pour cela. Commander au moment est fait par date d'échéance, de sorte qu'il ne serait donc pas logique de faire une traînée de traînée +. </p> <hr> <p class="answer-comment"> Hein, commandé par date, hein? Cela a du sens :) Ça a l'air bien dans IE, jolie sacré. J'aimerais avoir un but pour faire une chose aussi belle. </p> <hr> <p class="answer-comment"> jquery ui sortables pourrait ajouter ce genre de fonctionnalité assez facilement </p> <hr> <p class="answer-comment"> @Sural Dreams, démarrez une entreprise. :) </p> <hr> <p class="answer-comment"> @Josh Smith: Errr ... Je suis nerveux de faire pigeant, une entreprise sonne <B> terrifiante </ b>. :) </p> <hr> <p class="answer-comment"> @Sural Dreams, je vous entends. Et c'est terrifiant quotidiennement. P.S., si vous souhaitez être au début de notre taille, essentiellement pré-alpha, n'hésitez pas à m'envoyer un email. josh [at] buals.com </p> <hr> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 2<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> J'aime votre idée! J'ai fait quelques modifications dans votre code pour le rendre plus rationnel (<a href="http://jsfiddle.net/mottie/gxpespès/9/" relo"nofollow"> Démo mise à jour </a>): </ p> <ol> <li> J'ai supprimé toute la mise au point de saisie Lié ... Puis ajourné à l'intérieur de la fonction de clé à suivre un chèque qui ignore la touche si l'événement s'est produit dans une entrée de texte ou une zone de texte. </ LI> <li> enveloppé tout le code à l'intérieur d'un document prêt - vous pouvez donc ajouter votre code à la tête de la page. </ Li> <LI> Changé <code> Keydown </ code> à partir de <code> $ (this) </ code> to <code> $ (document) </ code> (<a href = "http: //www.quirksmode. org / dom / événements / keys.html "rel =" nofollow "> ref </a>). </ Li> <li> Ajout d'objets jQuery mis en cache ajoutés pour accélérer le script (E.G. <code> conteneur = $ ('# Taste-liste-conteneur') </ code>). </ Li> <li> Fabriqué un <code> YellowTaskMessage </ code> fonction pour ajouter des alertes. </ Li> <li> ajouté <code> jaune-tâche-message </ code> div au HTML. </ Li> <li> ajouté <code> Affichage: Aucune </ code> à <Code> .Yellow-Task-Message </ Code> dans le CSS. </ LI> <li> rationalisé quelques autres choses (par exemple non emballés <code> next_task </ code> comme il est déjà un objet JQuery). </ LI> <li> a dirigé le script via <a href="http://www.jslint.com/" rel="nofollow"> jslint </a> pour nettoyer les erreurs (ne pas compter les variables globales) </ li> </ ol> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> <div class="row mt-3"> <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0"> <div class="badge badge-score"> 0<br> votes </div> </div> <div class="col-lg-11 col-md-10 col-10 col-sm-10"> <div class="body-content"> <p> Je suis tombé sur ce projet la nuit dernière et j'étais complètement inspiré! J'ai décidé de travailler à travers la nuit et aujourd'hui et j'ai refacturé le code d'être un peu plus modulaire et d'accepter tout type de données. </ P> <p> La notion d'une tâche a été supprimée, ainsi que tout ce qui a été attribué à l'origine à une tâche. Je l'ai fait pour que cela envisage de le faire fonctionner pour tout type de données et permettez d'afficher davantage l'affichage des données et de la modification des données par d'autres moyens. Cette interface est également plus proche de l'interface Gmail plus à jour, autant que je puisse dire. </ p> <p> Changements de fonctionnalité notés: </ P> <ul> <li> plus modulaire, moins spécifique à une "tâche". </ Li> <li> Cache des boutons qui ne sont pas encore dans le contexte, une fois que vous vérifiez un article, les autres boutons s'effondrent. </ LI> <LI> La boîte de filtrage disparaîtra des éléments non trouvés dans la chaîne de recherche. </ LI> <li> a changé "Terminé" à "Archive". </ LI> <li> Le JS est appelé comme fonction où vous passez l'objet parent contenant la grille (ceci est fait de sorte que plusieurs grilles puissent exister sur la même page). </ Li> <li> La fonction accepte également une matrice JSON qui définit les objets à afficher avec les membres: ID, contenu, date dans la grille. Un exemple est intégré à ma démonstration: </ li> </ ul> <p> <a href="http://jsfiddle.net/epic720/bfjyv/7/" rel="nofollow"> http://jsfiddle.net/epic720/bfjyv/7/ </a> </ p > <p> <a href="http://jsfiddle.net/epic720/bfjyv/7/eMbedded/result/" rel="nofewe"> http://jsfiddle.net/epic720/bfjyv/7/Enbedded/result / </a> (FullScreen, aucun code) </ p> <p> aimerait tout retour d'information à ce sujet, je prévois de continuer mon travail ici et d'en faire une édition de données complète d'édition de données. </ P> </div> <hr>  <div class="pl-5"> <small class="text-muted">0 commentaires</small> <div class="comments mt-3"> </div> </div> </div> </div> <hr> </div> <div class="col-lg-3 col-md-12 col-12 col-sm-12" > <div class="related"> <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe> <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p> <a href="/question/select2-ne-s-39-affiche-pas-correctement-dans-le-mode-bootstrap" class=""> Select2 ne s'affiche pas correctement dans le mode bootstrap </a> <hr> <a href="/question/datetimepicker-ne-fonctionne-pas-avec-bootstrap-4" class=""> datetimepicker ne fonctionne pas avec bootstrap 4? </a> <hr> <a href="/question/l-39-appel-ajax-n-39-affiche-pas-de-r-eacute-ponse-en-cas-de-succ-egrave-s" class=""> L'appel Ajax n'affiche pas de réponse en cas de succès </a> <hr> <a href="/question/django-admin-comment-ajouter-du-javascript-agrave-la-fin-d-39-un-fichier" class=""> django admin - Comment ajouter du javascript à la fin d'un fichier </a> <hr> </div> <div class=""> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="4267220326" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <script type="text/javascript" src="/js/purecookie.js"></script> </div> <div class="container col-lg-8 col-md-12 ads-footer"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5975820494937925" data-ad-slot="5580301997" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </body> <footer> <div class="row col-lg-12 col-md-12 text-muted"> © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a> with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>. </div> </footer> </html>