Beaucoup utilise le plugin ddslick, pour avoir une liste avec des images et description.
Malheureusement, quand on l'utilise dans une popup ou une div ou tout autre limiteur d'espace et qu'on veut la dérouler ... appaît un scroll...
Windy permet de faire défiler rapidement des éléments. L'effet fera s'envoler les éléments comme un jeu de cartes ou des feuilles qui, pris dans un coup de vent, s'envolent. D'où le nom du plugin. Ceci est réalisé en utilisant des transformations CSS 3D et des transitions.
Il y a plusieurs options disponibles, comme la plage de propagation des éléments, la vitesse, l'ajout de navigations personnalisées, etc.
Pour les navigateurs qui ne supportent pas les transformations CSS 3D ou les transitions, il y a une navigation simple par défaut, c'est à dire faire apparaître/disparaître les éléments sans effet.
L'idée est de repartir d'un précédent post mais en retirant le TableSorter. De plus, le tri et le filtrage se fait côté serveur pour garder de petite transaction.
Sur le site http://designwithpc.com/Plugins/ddSlick, vous trouverez un plugin intéressant permettant de faire une liste avec libellé, image, description ...
Mais comment le remplir ...
Ici j'appelle une fonction qui me renvoie les éléments à afficher dans la liste et je rajoute un item correspondant à "aucun"
En partant d'un précédent post de code, j'ai rajouté :
Entete et pied fixe
Paramétrage hauteur et largeur colonne
Suppression
selection
tri multi-colonne : avec touche alt + clic souris sur nom colonne
Grâce à ce plugin, jQuery très léger vous pourrez passer en douceur aux images responsive.
En effet, ce mot est très à la mode ces derniers temps dans le développement Web. Il s'agit en fait tout simplement de pouvoir adapter vos contenus en fonction de la résolution d'écran de l'utilisateur (et donc du type d'appareil avec lequel il visite votre site).
Pour se faire, ce plugin vous offre deux solutions qui sont actuellement à l'étude pour devenir le standard des images responsive : l'élément et la nouvelle balise récemment proposée .
Une mise en garde cependant : ce plugin utilise des éléments qui ne sont pas encore considérés comme valide par le w3c !
Responsive Nav est un plugin JavaScript qui vous permet de rendre vos menus de navigation responsive.
Pour cela il utilise les transitions CSS3. Il permet également de gérer le tactile et rend ainsi votre menu accessible aux smartphones et tablettes.
Ce plugin jQuery présente un agréable effet de loupe sur les images selon les mouvements de la souris. L'image de « zoom » est séparée, ce qui vous permet de créer des effets.
Parmi les options que vous pouvez manipuler, il y a la taille de la loupe, une paramétrisation CSS, la gestion d'événements, etc.
Alpha Image est un plugin jQuery qui permet de modifier simplement la couleur de vos images.
Différentes options sont disponibles et vous pouvez choisir d'utiliser un code hexadécimal ou bien du RGB pour modifier la couleur.
Le retour de la fonction peut également contenir les données relatives à l'image en plus de l'image elle-même.
Vous trouverez ici plusieurs fonctions qui vont vous permettre de :
* Activer/désactiver un champ en cliquant sur une case à cocher
* Choisir le nombre de champs activés (les champs sont activés du 1er jusqu'à celui en face du bouton radio inclus)
* Recopier un champ dans un autre quand une case est cochée
Lorsque vous copiez un object javascript, le nouvel objet n'est pas un nouveau à part entière, sa modification entrainera la modification de l'objet copié. Les deux n'étant que des références vers une même allocation de mémoires.
Pour copier ou cloner un object javascript, il y a divers fonctions disponibles sur le net, mais toutes se plantent si une propriété de l'objet copié est une image par ex, ou un tableau vide.
Ces fonctions provoquent un 'too much recursive' car elles importent toutes les propriétés de l'objet image par exemple, toutes ses fonctions natives.
De plus, pour un tableau vide, l'object copié n'est pas un tableau.
J'ai donc développé ce petit script qui résout ce problème et renvoie bien le même ... Voir la suite
A partir du projet tablesorter, l'idée est d'avoir un exemple au plus simple, avec le minimum de fichier en utilisant le custom de son jquery ui pour faciliter le design.
