Recherche split / splitbar

Le
Zaza
Bonjour,

Je suis à la recherche de solution pour faire un split (splitbar),
c'est-à-dire 2 cadres côtes à côtes avec une barre de dimensionneme=
nt
entre les 2. Une idée ?

Merci

Xavier
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Mickaël Wolff
Le #8306071
Zaza a écrit :
Bonjour,

Je suis à la recherche de solution pour faire un split (splitbar),
c'est-à-dire 2 cadres côtes à côtes avec une barre de dimensionnement
entre les 2. Une idée ?



Des html frames ? (Non pas taper !)

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Zaza
Le #8306061
Salut Mickaël,

Des html frames ? (Non pas taper !)



Effectivement, je connais cette solution, j'y avais pensé, mais mon
besoin est d'intégrer ce "split pane" dans une page, parmi d'autres
choses, et il me semble que ce n'est pas possible avec des frames
"classiques" ... ou je me trompe ?

Merci

Xavier
Laurent vilday
Le #8306051
Mickaël Wolff a écrit :
Zaza a écrit :
Je suis à la recherche de solution pour faire un split (splitbar),
c'est-à-dire 2 cadres côtes à côtes avec une barre de dimensionnement
entre les 2. Une idée ?





Quelques unes, mais ça dépends beaucoup de la structure initiale. Mais
oui c'est évidemment possible, voilà un exemple grossier avec un bête
système de drag/drop :

* CSS/HTML :
- un DIV à gauche (divG)
- un DIV à droite (divD)
- un DIV entre les deux, c'est le splitter (divS)
- tous les 3 en tailles figées et position:absolute

* JS
- onmousedown sur le divS, déclenchement du drag/drop
- onmousemove (après un mousedown), déplacement des éléments
- onmouseup (après un mousedown), annulation des events de drop

testé OK sur FF3, OP9.5, IE8b1, Safari(win) 3.1.1

Des html frames ? (Non pas taper !)



LOL Mickaël, j'avais pas pensé à celle là :D

--
laurent
Zaza
Le #8306041
Salut Laurent,

http://mokhet.com/tests/split.html



Super ! Très simple et correspond exactement à mon besoin, grand
merci !

Xavier
SAM
Le #8306031
Laurent vilday a écrit :

Ça y est encore un coup de Laurent !
je suis sûr qu'il a fait ça en moins d'une minute ;-)

testé OK sur FF3, OP9.5, IE8b1, Safari(win) 3.1.1



Hop! dans la boite à malices

Des html frames ? (Non pas taper !)



LOL Mickaël, j'avais pas pensé à celle là :D



Ben moi j'y pense fort,
comment passer depuis (tout en frames) :
on clique le coin haut-gauche de la couleur pour la changer
et glisse les séparateurs

à : slit.html

--
sm
Laurent vilday
Le #9523831
SAM a écrit :
Laurent vilday a écrit :


>> Mickaël Wolff a écrit :

Arghh, cochon, t'as quoté comme un goret.

testé OK sur FF3, OP9.5, IE8b1, Safari(win) 3.1.1


Ça y est encore un coup de Laurent !
je suis sûr qu'il a fait ça en moins d'une minute ;-)



LOL, si seulement c'était vrai.

Plus rapide que l'éclair, moins de temps pour coder qu'il ne m'en a
fallu pour chercher une façon de remplir l'objectif et copier/coller les
morceaux adéquats. J'en rêve toutes les nuits :D

Hop! dans la boite à malices



Je me demande bien ou elle se cache elle.


J'ai essayer de fouiner un peu, mais il est pas très coopératif, il
arrête pas de me dire que je me suis planté de trajet.

Des html frames ? (Non pas taper !)


LOL Mickaël, j'avais pas pensé à celle là :D



Ben moi j'y pense fort,
comment passer depuis (tout en frames) :



OMFG. T'es sérieux ? Le HTML n'est pas prévu pour ce genre de chose IMO.
Mais bon, t'as bien raison, on en fait quand même un peu tout ce qu'on
veut du HTML alors pourquoi pas cette horreur.

on clique le coin haut-gauche de la couleur pour la changer
et glisse les séparateurs

à : slit.html



slit ? :)


Ca ira comme ça ? :)

Et là, non ne rêve pas, il m'a fallu 3 heures, pas juste 1 minute.

Bon d'accord c'est 6 Ko de HTML/CSS/JS mais pour ce prix là tu as :
- mini gestion event (position principalement)
- mini gestion style (getStyle, getBorderLeft, getPaddingTop, etc.)
- quelques fonctions annexes (toHyphen, [].indexOf, etc.)
- quelques commentaires restants il est vrai bien inutiles
- gestion d'une mise en forme BorderLayout [1] à la java
- gestion des splitters [2]

testé OK FF3, OP9.5, Safari (win) 3.1.1

OK également pour IE8b1 sauf sur un splitter (vertical à droite) qui
refuse d'entendre raison et comme IE8b1 refuse également de me fournir
le moindre message d'information. Jamais il me cause lui, ça m'énerve.

Et c'est quand que l'équipe IE va se décider d'ajouter
Array.prototype.indexOf ? grrr, c'est pas possible ça.

[1] librairie basée sur le travail de Steffen Rusitschka
Mais comme je me refuse d'utiliser prototype.js, il a bien fallu créer
ma version.

[2] Il doit rester des cas non gérés je pense.
Et c'est loin d'être du code optimisé, il doit y avoir plein de zones
d'étranglement à libérer.
Mais bon hein, c'est juste pour le fun alors ... :)

--
laurent
Laurent vilday
Le #9523821
Laurent vilday a écrit :
SAM a écrit :
Arghh, cochon, t'as quoté comme un goret.



Arf, et j'ai pas vraiment réussi à rectifier le tir. Sans parler des
fautes d'orthographe et de grammaire.

M'enfin, désolé.

--
laurent
SAM
Le #9648011
Laurent vilday a écrit :
SAM a écrit :
Laurent vilday a écrit :


>> Mickaël Wolff a écrit :

Arghh, cochon, t'as quoté comme un goret.



Ça ne me semblait pas, mébon.



Hop! dans la boite à malices



Je me demande bien ou elle se cache elle.



Erreur : j'aurais dû dire dans "ma" boite à malices, tu sais le coin du
DD où tu mets tous les trucs importants ou intéressants qu'on peut
trouver ici ou là, et qu'on ne retrouve jamais le jour où on pense que
ça pourrait servir.




Ha! non ! ce dossier est réservé :-)
Normalement il aurait dû être en consultation libre (dossier sans page
index) mais wanadoo-orange a supprimé cette possibilité. Peut-être un
jour j'y mettrai un menu ... peut-être ...

comment passer depuis (tout en frames) :



OMFG. T'es sérieux ? Le HTML n'est pas prévu pour ce genre de chose IMO.
Mais bon, t'as bien raison, on en fait quand même un peu tout ce qu'on
veut du HTML alors pourquoi pas cette horreur.



Ha! Ben ! Mondrian va apprécier le qualificatif !

Ce truc n'est pas de moi (vient de la fameuse boite) et date du siècle
dernier et du JS 1.0 maxi.
(l'auteur est indiqué dans le head, pas retrouvé l'original sur le Net)
Ça a l'avantage d'être compris par tout navigateur depuis NC3 et IE4 au
moins.

on clique le coin haut-gauche de la couleur pour la changer
et glisse les séparateurs

à : slit.html



slit ? :)



C'est t'y pas plus propre ?
(cracher = to split)


Ca ira comme ça ? :)



Ha! non ça ne va pas du tout, ce n'est pas en accord avec le travail de
Mondrian qui ne se servait que des couleurs primaires.

Et là, non ne rêve pas, il m'a fallu 3 heures, pas juste 1 minute.



T'es complètement dingue !
Mébon que sont ces 3 heures à côté des 3 WE qu'il me faudra pour
comprendre ?

Bon d'accord c'est 6 Ko de HTML/CSS/JS mais pour ce prix là tu as :



quasi pareil que le truc en frames

- mini gestion event (position principalement)
- mini gestion style (getStyle, getBorderLeft, getPaddingTop, etc.)
- quelques fonctions annexes (toHyphen, [].indexOf, etc.)
- quelques commentaires restants il est vrai bien inutiles
- gestion d'une mise en forme BorderLayout [1] à la java
- gestion des splitters [2]

testé OK FF3, OP9.5, Safari (win) 3.1.1



Ça fonctionne aussi avec mon Fx.2

Mon IE Mac cale sur : toLayout.push(root); }

iCab.3 se fout comme de ses premières chaussettes des séparateurs, rien
ne bouge.
Je sais pas c'qu'y veut :
"impossible de créer un objet à partir d'une valeur indéfinie"
ici :
".onmousemove"
dans :
" document.onmousemove = null;"


OK également pour IE8b1 sauf sur un splitter (vertical à droite) qui
refuse d'entendre raison et comme IE8b1 refuse également de me fournir
le moindre message d'information. Jamais il me cause lui, ça m'énerve.

Et c'est quand que l'équipe IE va se décider d'ajouter
Array.prototype.indexOf ? grrr, c'est pas possible ça.

[1] librairie basée sur le travail de Steffen Rusitschka
Mais comme je me refuse d'utiliser prototype.js, il a bien fallu créer
ma version.



Il y en a pour dire que prototype est codé avec les pieds.
(je ne saurais juger)

[2] Il doit rester des cas non gérés je pense.
Et c'est loin d'être du code optimisé, il doit y avoir plein de zones
d'étranglement à libérer.
Mais bon hein, c'est juste pour le fun alors ... :)



Toutafé.


--
sm
Laurent vilday
Le #9698361
SAM a écrit :
Laurent vilday a écrit :
SAM a écrit :
Laurent vilday a écrit :






>>>>
Hop! dans la boite à malices



Je me demande bien ou elle se cache elle.



Erreur : j'aurais dû dire dans "ma" boite à malices, tu sais le coin du
DD où tu mets tous les trucs importants ou intéressants qu'on peut
trouver ici ou là, et qu'on ne retrouve jamais le jour où on pense que
ça pourrait servir.



Ehehe, ok je vois de quoi tu parles, on doit effectivement tous avoir un
coin du disque dur réservé pour cet effet.

C'est l'effet : "c'est quelque part, mais où j'ai foutu ce truc ?" :)

comment passer depuis (tout en frames) :



OMFG. T'es sérieux ? Le HTML n'est pas prévu pour ce genre de chose
IMO. Mais bon, t'as bien raison, on en fait quand même un peu tout ce
qu'on veut du HTML alors pourquoi pas cette horreur.



Ha! Ben ! Mondrian va apprécier le qualificatif !



Je parlais évidemment de la structure en frames, mais [HS] à bien y
réfléchir, c'est vrai que c'est visuellement horrible ce style de peinture.

Ce truc n'est pas de moi (vient de la fameuse boite) et date du siècle
dernier et du JS 1.0 maxi.
(l'auteur est indiqué dans le head, pas retrouvé l'original sur le Net)
Ça a l'avantage d'être compris par tout navigateur depuis NC3 et IE4 au
moins.

on clique le coin haut-gauche de la couleur pour la changer
et glisse les séparateurs à : slit.html



slit ? :)



C'est t'y pas plus propre ?
(cracher = to split)



Non.

to split = séparer, scinder
to spit = cracher
a slit = une fente

Je pense qu'on peut conserver "split" :)


Ca ira comme ça ? :)



Ha! non ça ne va pas du tout, ce n'est pas en accord avec le travail de
Mondrian qui ne se servait que des couleurs primaires.



LOL, parce que tu croyais peut être que ma culture générale me
permettais de connaitre Pieter Cornelis Mondriaan ?


Et puis c'était pas dans le cahier des charges initiales, donc oui il y
aura un délai de livraison du produit final :p

Bon, dans la nouvelle version [1], ça n'utilise plus que du blanc et les
couleurs primaires (enfin grosso modo), les splitters sont noirs pour
coller aux horreurs qu'il faisait, et j'ai utilisé une version
prototypée du système de pondération aléatoire que Olivier Miakinen
avait diffusé ici pour obtenir cette couleur.

function AleatoirePondere(datas)
{
this.datas = [];
this.total = 0;
return this.setDatas(datas);
}

AleatoirePondere.prototype.setDatas = function(d)
{
var i;
this.total = 0;
this.datas = d;
for ( i = d.length; i--; ) { this.total += d[i][1]; }
return this;
};

AleatoirePondere.prototype.pick = function()
{
var
i,
d = this.datas,
somme = 0,
alea = Math.random() * this.total;
for ( i = 0; i < d.length; i++ )
{
somme += d[i][1];
if (somme > alea) { return d[i][0]; }
}
/* ce cas ne devrait pas arriver : */
return null;
};

var tableau = [
['ff0000',5],['ffff00',5],['00ff00',5],
['00ffff',5],['0000ff',5],['ff00ff',5],
['ffffff',70]
];
var alea = new AleatoirePondere(tableau);
alert(alea.pick());

Et là, non ne rêve pas, il m'a fallu 3 heures, pas juste 1 minute.


T'es complètement dingue !



Bah tu sais, la plupart du temps quand je code un truc que je diffuse
ici c'est avant tout pour moi que je le fais.

En l'occurrence j'ai besoin de splitters génériques. J'utilise depuis
longtemps un système proche de la première version que j'avais proposée,
mais c'est trop contraignant car j'ai trop de répétitions du même code
dans mes pages. Alors en m'essayant à ton petit challenge, ça me permet
de réfléchir à certaines choses pour remettre en question mon code et
l'approche utilisée.

Mébon que sont ces 3 heures à côté des 3 WE qu'il me faudra pour
comprendre ?



Bahh, je peux essayer d'expliquer les morceaux qui passent pas si tu
veux, mais je suis pas forcément très doué pour ça. Et je te l'accorde,
le BorderLayout peut être compliqué à appréhender c'est vrai.

Bon d'accord c'est 6 Ko de HTML/CSS/JS mais pour ce prix là tu as :



quasi pareil que le truc en frames



Nope, je sais pas pourquoi à la relecture j'ai pas vu ça, mais c'est pas
6 mais 20 Ko quand même.

testé OK FF3, OP9.5, Safari (win) 3.1.1


Ça fonctionne aussi avec mon Fx.2



J'en doutais pas une seconde pour lui.

Mon IE Mac cale sur : toLayout.push(root); }



Pff, saloperie de IE Mac, allez juste pour toi j'ai ajouté la gestion de
la méthode push dans la nouvelle version [1]

if ( !Array.prototype.push ) { ... }

iCab.3 se fout comme de ses premières chaussettes des séparateurs, rien
ne bouge.



Snif. Et quid de iCab 4.1.1 ?

Je sais pas c'qu'y veut :
"impossible de créer un objet à partir d'une valeur indéfinie"
ici :
".onmousemove"
dans :
" document.onmousemove = null;"



Quoi ? "document" n'existe pas, on peut pas utiliser onmousemove ou
autre chose encore ? Pfff !

Il veut qu'on utilise exclusivement des addEventListener ? Pfff, j'ai
même pas envie de jouer avec lui.

Mais bon hein, c'est juste pour le fun alors ... :)


Toutafé.



Et sérieusement, qui pourrait avoir envie d'une telle chose en HTML :D

[1] C'est t'y pas mieux ?

--
laurent
SAM
Le #9743331
Laurent vilday a écrit :
SAM a écrit :
Laurent vilday a écrit :
SAM a écrit :
Laurent vilday a écrit :






>>>>
comment passer depuis (tout en frames) :



on en fait quand même un peu tout ce
qu'on veut du HTML alors pourquoi pas cette horreur.



Ha! Ben ! Mondrian va apprécier le qualificatif !



Je parlais évidemment de la structure en frames,



Ha! Ouf !

mais [HS] à bien y
réfléchir, c'est vrai que c'est visuellement horrible ce style de peinture.



Rhhhôôô !
Juger ainsi le fabuleux travail d'un artiste qui fait encore référence
en design (de tous types !) Lala ! Misère !
Exemple +/- en charte :


(cracher = to split)



Non.

to split = séparer, scinder
to spit = cracher
a slit = une fente



M'étonne moins que je fasse tant de contresens en anglais


Ca ira comme ça ? :)



Ha! non ça ne va pas du tout, ce n'est pas en accord avec le travail
de Mondrian qui ne se servait que des couleurs primaires.



LOL, parce que tu croyais peut être que ma culture générale me
permettais de connaitre Pieter Cornelis Mondriaan ?


Et puis c'était pas dans le cahier des charges initiales,



C'était assez évident, bien que Mondrian n'ait pas fait que ça
(il lui a fallu beaucoup de temps pour y arriver)

donc oui il y aura un délai de livraison du produit final :p



C'est vrai qu'il faut compter avec le séchage

Bon, dans la nouvelle version [1], ça n'utilise plus que du blanc et les
couleurs primaires (enfin grosso modo), les splitters sont noirs pour
coller aux horreurs qu'il faisait, et j'ai utilisé une version
prototypée du système de pondération aléatoire que Olivier Miakinen
avait diffusé ici pour obtenir cette couleur.



Prochain exercice :
(dégradés dans les couleurs à la Mondrian)

Maintenant, si tu préfères plus facile,
en à plats et couleurs quasi primaires il y a ça :
y a plus qu'à arrondir aléatoirement les angles ;-)

Mon IE Mac cale sur : toLayout.push(root); }



Pff, saloperie de IE Mac, allez juste pour toi j'ai ajouté la gestion de
la méthode push dans la nouvelle version [1]

if ( !Array.prototype.push ) { ... }



ligne 342 ou par là :
if ( k && obj.hasOwnProperty(k) )
ne lui plait pas non plus

Mébon vu que personne ne s'en sert ...

iCab.3 se fout comme de ses premières chaussettes des séparateurs,
rien ne bouge.



Snif. Et quid de iCab 4.1.1 ?



Ha .... ben ... j'ai pas toute la collec ... :-(

"impossible de créer un objet à partir d'une valeur indéfinie"
" document.onmousemove = null;"



Quoi ? "document" n'existe pas, on peut pas utiliser onmousemove ou
autre chose encore ? Pfff !



Non, c'est un truc qu'il aime bien dire.
Après ... comprendre vraiment ce qui achoppe ... ma foi ?!
'objet indéfini'
presqu'ausi explicite que les messages d'IE :(


[1] C'est t'y pas mieux ?



Essayé avec Fx.3
C'est super !
Néanmoins il manque le gris.
Je vais avoir du mal à produire qques faux pour payer mes vacances :-)


Oooops la !
J'ai fais une bêtise :
J'ai glissé le séparateur horizontal milieu de colonne gauche en dehors
de sa case dans la rangée basse.

Zutre !
Incorrigible maladroit ... !
j'ai glissé le séparateur haut vertical col gauche dans col droite :-(


Scrotche !
V'là que je m'emmêle aussi dans Safari.3


Mais c'est pas vrai ça !
Quel nigaudin ! j'ai aussi trébuché avec la version précédente.

--
sm
Publicité
Poster une réponse
Anonyme