Salut à vous,
Voilà, je cherche depuis un moment un script d'onglets dont les onglets tiennent sur une ligne (avec flèches de défilement si leur largeur cumulée dépasse celle du cadre) et qui me permette de créer plusieurs cadres ("instances" ?) par page.
Après avoir épluché la blogosphère (peut-être ai-je mal cherché ?), je n'en ai trouvé que deux qui répondent au moins à la première condition :
Advanced tabs (du framework Ext JS) : http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html
ApTabs (basé sur le framework Prototype) : http://www.javascriptkit.com/script/script2/apTabs/index.shtml
Advanced Tabs est sans doute le meilleur des deux, mais c'est un véritable cauchemar à intégrer. De plus, le contenu des onglets est défini dans des fichiers JS et, à moins d'être un expert dans le domaine, il est impossible de créer plusieurs instances par page.
De son côté, ApTabs est simple à intégrer (léger, CSS accessible...), mais il pose 2 gros problèmes (+1 problème mineur) que voici :
--> Il ne fonctionne pas du tout avec la version finale d'IE8 (alors qu'avec IE6 et 7, étonnamment tout va bien !). A en coire la barre d'état du navigateur, le problème réside à la ligne 233 du fichier JS...
--> Les images des flèches de défilement situées à gauche et à droite ne fonctionnent normalement uniquement si la largeur total des différents onglets n'excède pas 1000 pixels. Au-delà de 1000, les états "active" et "hover" des images (car chaque image existe en trois versions, une pour chaque état) sont ignorés ; seule l'image de l'état "inactive" est affichée. Tout revient dans l'ordre sitôt qu'on retourne en-dessous de 1000px (par exemple en fermant un des onglets). Alors pourquoi 1000px, je n'en sais strictement rien. J'ai essayé de modifier quelques chiffres dans le fichier JS un peu au hasard, sans succès bien sûr.
--> Le 3e problème est moins grave (c'est peut-être même intentionnel) : quand on passe d'un onglet à l'autre, l'image de fermeture (croix rouge) de l'onglet que l'on vient de quitter reste dans sa version "active" au lieu de retourner à l'état "inactive". Mais si le curseur de la souris survole l'image (sans cliquer), alors elle retrouve l'état "inactive".
J'ai déjà fait mention de ces problèmes sur CodingForums.com (http://www.codingforums.com/showthread.php?p=934410), mais on m'a répondu que le plus simple serait de trouver un autre script (et plus moderne). L'ennui, c'est que je n'ai que ces deux-là.
Si donc vous avez des solutions ou des conseils à me donner, je suis preneur.
Et si quelque chose n'est pas clair, je reformulerai comme il faut.
Merci de votre aide et bonne journée.
Modifié par Arcanod (12 Apr 2010 - 15:29)
Voilà, je cherche depuis un moment un script d'onglets dont les onglets tiennent sur une ligne (avec flèches de défilement si leur largeur cumulée dépasse celle du cadre) et qui me permette de créer plusieurs cadres ("instances" ?) par page.
Après avoir épluché la blogosphère (peut-être ai-je mal cherché ?), je n'en ai trouvé que deux qui répondent au moins à la première condition :
Advanced tabs (du framework Ext JS) : http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html
ApTabs (basé sur le framework Prototype) : http://www.javascriptkit.com/script/script2/apTabs/index.shtml
Advanced Tabs est sans doute le meilleur des deux, mais c'est un véritable cauchemar à intégrer. De plus, le contenu des onglets est défini dans des fichiers JS et, à moins d'être un expert dans le domaine, il est impossible de créer plusieurs instances par page.
De son côté, ApTabs est simple à intégrer (léger, CSS accessible...), mais il pose 2 gros problèmes (+1 problème mineur) que voici :
--> Il ne fonctionne pas du tout avec la version finale d'IE8 (alors qu'avec IE6 et 7, étonnamment tout va bien !). A en coire la barre d'état du navigateur, le problème réside à la ligne 233 du fichier JS...
--> Les images des flèches de défilement situées à gauche et à droite ne fonctionnent normalement uniquement si la largeur total des différents onglets n'excède pas 1000 pixels. Au-delà de 1000, les états "active" et "hover" des images (car chaque image existe en trois versions, une pour chaque état) sont ignorés ; seule l'image de l'état "inactive" est affichée. Tout revient dans l'ordre sitôt qu'on retourne en-dessous de 1000px (par exemple en fermant un des onglets). Alors pourquoi 1000px, je n'en sais strictement rien. J'ai essayé de modifier quelques chiffres dans le fichier JS un peu au hasard, sans succès bien sûr.
--> Le 3e problème est moins grave (c'est peut-être même intentionnel) : quand on passe d'un onglet à l'autre, l'image de fermeture (croix rouge) de l'onglet que l'on vient de quitter reste dans sa version "active" au lieu de retourner à l'état "inactive". Mais si le curseur de la souris survole l'image (sans cliquer), alors elle retrouve l'état "inactive".
J'ai déjà fait mention de ces problèmes sur CodingForums.com (http://www.codingforums.com/showthread.php?p=934410), mais on m'a répondu que le plus simple serait de trouver un autre script (et plus moderne). L'ennui, c'est que je n'ai que ces deux-là.
Si donc vous avez des solutions ou des conseils à me donner, je suis preneur.
Et si quelque chose n'est pas clair, je reformulerai comme il faut.
Merci de votre aide et bonne journée.
Modifié par Arcanod (12 Apr 2010 - 15:29)