Lascapi.fr

Menu

Étiquette : javascript

AngularJS : focus automatique dans un tableau

Comment gérer le focus des éléments d’un tableau de manière automatique avec AngularJs ? Mes recherches brute.

Contrainte : il y a des groupes de lignes et des lignes. Il y a donc besoin de deux autofocus différents. Et lors de la suppression d’une ligne par exemple, le focus doit rester dans la même colonne.

  • ngFocus permet d’exécuter une expression quand le focus arrive sur l’élèment,
  • $watch exécute une fonction quand la valeur d’une variable change,
  • L’attribut autofocus de <input> indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé,
  • Un autofocus.js qui permet d’ajouter un attribut directement dans le html,
  • la fonction focus() de javascript

On peut utiliser autofocus="true" ou la version autofocus.js pour la création de groupe et de ligne.

Pour le changement de ligne sélectionné on peut utiliser la fonction focus() qui pointe vers un élément récupéré avec :
document.getElementsByName(nameElementFocused)[0]
Notez qu’on récupère le premier élément de la liste, même si celle-ci doit en théorie n’en contenir qu’un si les noms sont uniques.

Drag and Drop dans une OnePage

Je continue les recherches pour faire le fameux jeu de présentation en glisser/déposer et du coup je découvre plein de choses interressantes, la première c’est que jquery permet de faire ça simplement. Et puis plein de tuto au résultat vraiment sympa :

Et puis en marge de cette magnifique découverte (pour moi … ) j’ai trouvé des scripts qui peuvent être super intéressant pour optimiser son site, à savoir headjs pour les scripts et bLazy (ou Be Lazy) pour le chargement progressif des images.

Code du script jquery miniaturisé
Code du script jquery miniaturisé

La mise en place du drag&drop dans une one page n’est pas si évidente que ça ! Il faut arriver à concilier les deux bibliothèques javascript et leur css respective !

Mais c’est faisable quand même ^^ Voici un exemple de drag and drop.

 

OnePage Dynamic

Ok, aujourd’hui je commence le développement d’un page de présentation d’un nouveau procédé de production chimique. La commande est simple, une one page avec un petit jeu éducatif dedans, à savoir un jeu de glisser/déposer.

Première difficulté, reprendre contact avec la multitude de projet et bibliothèque qui pullulent sur le web pour faire ce genre de chose et faire le tri entre le bon grain et livrais.

Exemple de ce qui est possible de faire en jeux one page :

Un tuto intéressant pour refaire ses armes avec JQuery : http://www.snoupix.com/slideshow-jquery-accessible_tutorial_28.html

Deux projets super interressant !!

Le premier test de la journée : http://lascapi.fr/flowchem/one-page-dynamic-20140106/

Et pour finir le wireframe pas du tout définitif du projet.

Wireframe du site en one page