Voir le Zip
Télécharger le zip
lib à inclure dans vos pages webs :<script src="Xs.js"></script>...il faut mettre en fin de page<script>xsiz();</script>vous pouvez inclure dans n'importe quel balise la propriété xs<div xs="...">pour définir vos propres xstyles - dans un fichier externe (format .js)- à l'intérieur de votre fichier dans une clause <script>pour appeler un style classique (css)xs.le_nom_de_votre_style="!fontSize:5px";vous pouvez faire des substitutions (c'est chiant d'écrire backgroundcolor non ?)xs.bk="!backgroundColor"vous pouvez maintenant faire :xs.test="bk:5px solid black";vous pouvez aussi faire :xs.coucou="bk:5px solid black;le_nom_de_votre_style;...;..."l'un des principales atouts du xs, vous pouvez faire :xs.test=function(c,p){... c=object... p=paramètre}Nous verons plus tard pour les declarations des styles cascades
Un petit exemple?
Oui......<script>xs.decml=function(c,p){ c.innerHTML=c.innerHTML.replace(/[$]|[§]/ig,"@"); c.innerHTML=c.innerHTML.replace(/[+]|[#]/ig,"."); }xs.ml=function(c,p){ var r=c.innerHTML; c.innerHTML="<a href='emailto:"+r+"'>"+r; // merci de verifier cette ligne};xs.email="decml;ml;b";</script>...<span xs="email">totor$tata+fr</span> // anti grab email bot....<script> xsiz();</script>affichera totor@tata.fr en gras avec un <a href> adéquate.attention : il n'y a pas (encore) d'optimisation des xstylesxs.test1="bk:red;bk:blue;bk:yellow";vous obtiendrez bien un backgroundcolor jaune.mais chaque style aura été executé (=perte de temps)
Salut,C'est vraiment une source qui sort de l'ordinaire !Pouvoir passer des fonctions en tant que style c'est assez sympa.Je vois par contre des limitations importantes :(à vérifier, je n'ai pas regarder tout le code qui est d'ailleurs assez illisible (a,b,d comme nom de variable c'est pas top))Si tu ajoutes des éléments dans la page après l'appel à xsiz(); que se passe-t-il ?Je pense qu'ils ne sont pas stylés, à moins d'appeler de nouveau xsiz().Dans ce cas, as-tu pensé à l'appel multiple à xsiz() (notamment pour les fonctions passées en tant que style) ?Ya un autre truc que je trouve bizarre :window["$"]=function(n){return document.getElementById(n);};Pourquoi as-tu décidé de déclarer cette fonction de cette façon ?C'est tout à fait correct mais je m'interroge juste sur la raison de l'écrire de cette façon.@+
Bon impossible de faire marcher l'exemple je me suis retapé toute l'indentation rajouter les ";", j'ai même rajouter des accolades à un "if" donc en attendant un vrai exemple sous forme de page html complète je met une mauvaise note.Et quand je vois ça: var f=m.substr(1,99).split("_"); if(!e[f[0]]) { e[f[0]]=new Array; e[f[0]][0]=1; } e[f[0]][f[1]]=p[m];ça me pique les yeux!
RALECUL :ahah drôle le pseudo...il FAUT mettre <script>xsiz()</script> à la ***FIN*** de la page.cette fonction scan TOUT le DOM.dans l'avenir pe je vais faire executer xsiz() par le onload du bodywindows['$']=function etc...c'est une astuce que j'ai piqué chez prototypes.orgca évite d'écrire document.getElementById(...)sous firefox les balises avec un ID ne sont pas reconnu par javascript de manière implicite (contrairement à IE)$('balise').innerHTML+="coucou" = document.getElementById('balise').innerHTML+="coucou"LAKICHEMOLE :Etonnant que tu n'arrive pas à faire fonctionner l'exemple...sous FF ca marche farpetement (joint ce meme exemple avec les dorures)ahah ! intéressant l'exemple du code que tu cite. je donnerais l'explication de son utilité plus tard.mon but n'est pas d'écrire du code claire (si, si) mais d'écrire du code court.1/ parce que c'est moins chiant à écrire2/ ca se télécharge plus vite3/ ca se hash/parse plus vite par spidermonkey (ca pete hein ?)4/ la lib a été fait pour être utilisé pas pour être "comprises"voici l'exemple complet :<html> <head> <script src="Js/Xs.js"></script> </head> <body> voici mon email : <span xs="email">tata$totor+fr</span> <script> xs.decml=function(c,p){ c.innerHTML=c.innerHTML.replace(/[$]|[§]/ig,"@"); c.innerHTML=c.innerHTML.replace(/[+]|[#]/ig,".");}xs.ml=function(c,p){ var r=c.innerHTML; c.innerHTML="<a href='mailto:"+r+"'>"+r;};xs.email="decml;ml;b";</script><script>xsiz();</script> </body></html>ps : LAKICHEMOLE : perso je n'aime pas la manière dont tu indente. pour avoir debuggé bcp de ligne c++ je te garanti que c'est bcp plus lisible si tu met ton accolade ouverte { sur la meme ligne : if(...){
Ouais j'en avais ras-le-cul, tous les autres pseudos que j'utilise étaient pris !Bon sinon, merci pour ta réponse mais je suis pas un nOOb !Pour la fonction $ tu aurais pu écrire :function $(id) { return document.getElementById(id);}et non :window["$"]=function(n){return document.getElementById(n);};Je me demandais juste quelles étaient tes motivations pour avoir choisi cette deuxième forme.La réelle critique (que tu as visiblement pas comprise) de ton système est la suivante :Tu scannes le DOM à la recherche d'élément ayant un attribut "xs" si c'est le cas tu fait ta moulinette dessus et tu ajoutes un style.(C'est juste une déduction à partir de la façon d'utiliser ton code, je ne l'ai pas regardé en détail).Donc si tu décides de faire un appel Ajax et d'ajouter du contenu à ta page : (remplir le innerHTML d'un div avec du contenu stylé par exemple), que se passe t-il ?A mon avis : rien ! Le contenu ajouté ne sera pas stylé, il faudrait faire un appel supplémentaire à xsiz().D'où ma question : as-tu pensé à l'appel multiple à cette fonction ?En particulier pour le passage de fonctions en tant que style.Juste pour la forme : le gain de temps que tu indiques pour parser le code JS est très relatif (de l'ordre de la ms).La réelle différence est que ton code est impossible à maintenir pour une personne tierce.Si tu veut garder un coder "optimisé" il existe d'autres solutions.Tu peut faire une version lisible pour un humain avec des commentaires et des vrais noms de variables.Et ensuite faire une version compressé plus rapide à télécharger à l'aide de : http://dean.edwards.name/packer/Il existe pleins d'autres truc dans ce style qui font de l'obfuscation et de la compression.PS : pour l'indentation j'utilise la même que LAKICHEMOLE et pour moi elle est plus lisible, tu sais c'est juste une question de gout...
voici une fonction intéressante du xs qui a priori n'existe pas en css2.J'appel ca les cascades énumérées comme si vous pouviez ecrire ca sous css :.thin td#1{...} // style pour le 1er TD td#2{...} // style pour le 2eme TD etcpuis utiliser la class "thin" dans une balise table.avec xs c'est un plus plus compliqué et moins sexy.mais si vous avez une autre idée...en xs on peut declaré un style sous forme object direct :xs.test1:{xs:"bk:black"} // ca equivaux à xs.test1="bk:black"bien sur le but n'est pas de faire ce genre d'idiotie :-)voici comment on declare des cascades énuméréesxs.test1={ ... ${sous balise}_{index}:"..." ...}par exemplexs.test1={ $TR_1:"bk:red", $TR_2:"bk:white"}(LAKICHEMOLE : c'est ici qu'interviennent les fameuses lignes)appliqué à un tbody ca alternera des lignes red et white.si vous voulez maintenant styliser les TDxs.test2={ $TR_1:{ $TD_1:"fc:red", $TD_2:"fc:blue" }}vous aurez une alternance de cellule avec une couleur d'ecriture (fc) red et blue!!! ATTENTION !!! contrairement au css, les cascades énumérées ne fonctionnent que sur les sous balises DIRECTle style test2 appliquer à la balise table ne donnera rien car la sous balises direct est tbody attention : sous FF il faut ABSOLUMENT mettre les noms des balises en maj.$TD_0 plante ! commmercez à 1voici un exemple fonctionnant sous FF<html> <head> <script src="Js/Xs.js"></script> </head> <body> <table> <tbody xs="cascade"> <tr><td>1.1<td>2.1<td>3.1 <tr><td>1.2<td>2.2<td>3.2 <tr><td>1.3<td>2.3<td>3.3 <tr><td>1.4<td>2.4<td>3.4 </table> <script> xs.cscd1={ $TR_1:{ xs:"bk:yellow", }, $TR_2:{ xs:"bk:white", }}xs.cscd2={ $TR_1:{ $TD_1:"fc:red", $TD_2:"fc:blue", $TD_3:"fc:green" }}xs.cascade="cscd1;cscd2"</script><script>xsiz();</script> </body></html>
RALECUL:1/ Désolé, je ne connais pas ton skill en js :-))2/ Je n'ai simplement pas pensé que l'on pouvait ecrire : function $()... :-))3/ ajax : effectivement... mais on peut appeler la fonctionxs.xstlz(object) pour scanné tout le DOM descendant de l'object4/ gain de temps : euh c'etait de l'ironie...disons que c surtout chiant d'écrire des noms à ralonge.à l'origine le code était écrit pour mon utilisation personnel...autre fonction d'xs... on peut stylisé aussi les evenements onmouse* etc...on peut aussi "localisé" des styles
L'exemple marche, j'avais copier le code au lieu de prend les fichiers source.Le principe me plais sauf qu'il faut parser toute la page et sur une grosse page je sais pas se que ça pourrais donner je pense que faire la même chose coté serveur (php, JSp, ASPX) serait mieux.C'est dommage que tu n'ais pas pris la peine de soigner un peux mieu la forme (je sais "c'est chiant :) ) mais tu verra que même toi plus tard ça te sera bénéfique de faire des chose compréhensible ( tu boss dans l'informatique??).D'ailleurs ce site insiste plus sur la forme que sur le fond en général.Mais l'intention est bonne et je suis sûr que tu feras un effort pour ta prochaine source!! :)
LAKICHEMOLE :pour la rapidité : spidermonkey est VRAIMENT véloce !à tester !le but du css (et d'xs) est justement de ne pas coder les styles en dur.au contraire ca permet de customiser un max.j'en suis pas encore à parser du XML mais c une piste à creuser (JE N'AIME PAS LE XML)Je ne sais pas si tu as remarqué mais la mode d'aujourd'hui c'est de faire faire le max de truc par le client (ca soulage le server pour avoir de la dispo cpu pour bf2)pour info : je suis responsable projet dans un SSII principalement en delphi et c++.+10ans et 2 enfants d'expérience, 2 types sous mes ordres.Js c'est pour mes loisirs.j'ecris cette lib depuis 2 ou 3 ans (version 5 !!!) de facon discontinue.je l'agrémente d'autre lib plus ou moins audacieusespar ex : des styles pour rendre un tableau triable(le tri des tableaux s'effectue de manière non blocante...)si tu aime le code abscons je posterais mes lib fthrd et fobj.respectivement pour faire du "thread" et de l'héritage (du vrai) en js.aucun commentaire, les tokens en 3 lettres max :-)))comme tu dis : ca pique les yeux. mais ca wizzzz !
pour styliser un evenement comme onmouseout par ex.xs.foo={ _onmouseout:function(){...}}conjuger à une cascade ca donne un truc interessant.xs.foo={ $TR_1:{ $TD_1:{ _onmouseover:function(){xs.do(this,"bk:red")}, _onmouseout:function(){xs.do(this,"bk:blue")} } }}cela hookera les evenements onmouseover et out de chaque cellule d'un tableau.je verifie un truc pour les styles localisé et j'ecris le tuto.
on peut aussi ecrire directement :xs.foo={$TR_1:{ $TD_1:{ _onmouseover:"bk:red", _onmouseout:"bk:blue" }}}
Tout à fait d'accord la mode et de faire devenir les client légé d'hier en client semi lourd aujourd'hui.Mais la mode du web c'est aussi la mode c'est la programmation par block/composant et avec un maximum de configuration par xml.Le but étant de rendre plus facile la maintenance. L'époque des langage inaccessible et ultrapropriétaire. Aucune gros boite d'info ne veut que si un gars se casse personne ne puisse réutiliser se qu'il a fait!Et surtout pour faire "wiizer" les appli on utilise des obfuscateurs (comme la si bien dit RALECUL).(Moi même j'en utilisais quand je développais sur téléphone mobile).Après vu que c'est perso je comprend bien que tu veux pas te prendre la tête (moi perso je prend mon pied à faire des truc jolie).C'est pas très vendeur je trouve seul ceux qui vont te faire confiance et utiliser ton apli tel quel voudrons l'utiliser.De plus le js coté client est surtout utiliser pour gérer des évènement client ou dialoguer avec le serveur pas pour faire des traitement en plus de rendu de page, nos page mettent du temps à se charger non pas car le proc du serveur est pas assez puissant (10% d'util max) mais plutot à cause des requête.Enfin je suis persuadé que spidermonkey il wiizzz encore plus si on met des ";" à la fin de chaque instruction!Enfin tout ça c'est mon humble avis!
perso je ne support pas le XML, j'trouve ca moche... j'y peux rien.je prefere le json et de loin !quand tu as des pages hébergés chez un mutualisateur (style ovh ou free)t'es bien contant de justement pas à avoir à sollicité du cpu server DU TOUT !dans l'avenirje pense que même certaine requête seront exécuté en locale.par exemple, l'ensemble d'un catalogue sera dl par XHR (en json ?)puis des moulinettes tournerons pour mettre tout ca en place.les filtres, les tri etc seront effectué en locale.j'écris pas mal de lib dans cette optique.sm ne demande pas d'avoir un ; apres un }.c plus compréhensible d'écrire a=a+1 que a++il faut verifier la norme pour voir.
Chacun son truc :)
c'est fou ce que l'on deviens philosophe :-))
lol ok à ce moment là je sort ma phrase fétiche qui rythme ma vie:"La vie n'est qu'une question de priorité" :)
Très intéressant comme source!un tuto ?
tuto... euh, il y a quelque exemple plus haut.pense tu que je devrais en rajouter avec les sources ?dis moi ce que tu ne comprend pas je t'expliquerais :-)))ps5:25 nan... c pas à l'heure à laquel je me reveil :-))
Hi, c'est surtout au niveau de la création des fonction que je pèche un peu,si t'aurai un ou deux exemple, et j'ai pas compris à quoi sert le fichier XsMoz et Utils, mais une fois que je saurai tout ca, je sens qu'on pourra bien s'amuser...
pour cree une fonction :xs.nom_de_la_fonction=function(c,p){...}"c" etant l'object et "p" etant les parametres.par exemple :xs.truc=function(c,p){...}...<div xs="truc:coucou">...xsiz();Donc lors de l'execution des xs : truc sera appelé avec c=<div ....> et p="coucou"xsmoz.js declare des xstyles compatible FF------bdr: pour declarer un borderbrd:size (par defaut 1px),type (par defaut solid),color (par defaut black)ex:bdr:,,red donnera un border:1px solid red------pa: pour declarer une position absolue les parametres doivent etre commepa:x,y,largeur,longeurpar ex: pa:0,0,10,10------al: style en cours de developpementpermettra d'aligner un DIV sur un autre DIV------bkop: declare un background transparent les parametres doivent etre commebkop:color,opacité%ex : bkop:red,80normalement changé l'opacité d'un <div> (ou autre) rend egalement le contenu transparent.bkop: ne rend QUE le background transparent. le contenue lui ne le sera pasma solution miracle est simplement de "cloner" le div et de mettre le clone en Z inférieur.deplacer le <div> ne deplacera pas le clone. mais je bosserais pour amelioré tout ca.------op: declare l'opacité parametre op:opacité%le but de cette function est uniquement d'uniformisé la declaration d'un op entre IE et FFpar ex op:80------sous FF et opera (merci de verifer sous IE)<div style="position:absolute;left:0;top:0;width:100;height:100;border:10px solid black;background-Color:blue"> test css</div><div style="position:absolute;left:0;top:0;width:100;height:100;border:1px solid black;background-Color:blue"> test css</div>les 2 div ne se recouvrent pas (à cause du border)en xs<div xs="pa:0,0,100,100;bdr:10px"></div><div xs="pa:0,0,100,100;bdr"></div>les 2 div se recouvrent.pour moi le positionnement ne doit pas tenir compte du border.donc le fonction "pa" et "bdr" on été modifier à cet effet.-----j'utilise qq fonction de la lib utils.js dans les xs.val(v) retourne la valeur numerique d'une chainecomme parseInt sauf que val return 0 si la chaine ne contient pas de valeur numj'expliquerais les autres fonctions plus tard...
Super, déjà merci pour cette réponse, je reviendrai pour les prochaines fonctions;-)
rien que pour le coté inventif et pour faire pancher la balance, je mets une note
annadrill : euh. le but c'est que tu invente tes propres fonctions :-)))par exemple, je bosse sur un xs qui permet de rendre un tableau triable (de maniere non bloquante : c'est à que le tri n'empêche pas de scroller ou de remplir un input etc)on peut voir un exemple sur http://foxz.free.fr/tritable.html(je bosse actuellement dessus donc si ca plante c normal :-))
je faisais juste réf à ta phrase : j'expliquerais les autres fonctions plus tard...
Ah ok.dans XS il y a aussi des fonctions (par defaut)_____xs.js = declaration en object pour js (FF) c'est l'equivalent d'un ID et d'une declaration explicite.____xs.mg = declaration de marge avec repetition des argumentsxs="mg:5" donne une declaration de marge telque padding 5px 5px 5px 5pxxs="mg:1,5" donne une declaration de marge telque padding 1px 5px 1px 5px____xs.css = declaration d'un classname____voici les alias : xs.bk="!backgroundColor"; xs.vs="!visibility:show"; xs.vh="!visibility:hidden"; xs.u="!textdecoration:underline" xs.b="!fontWeight:bold" xs.fs="!fontSize"; xs.z="!zIndex"; xs.fc="!color"; xs.of="!overflow:auto"; xs.ctr="!textAlign:center"; xs.rgt="!textAlign:right"; xs.lft="!textAlign:left"; xs.w="!width"; xs.h="!height";xs="fs:5px" donnera un style fontSize:5pxc'est juste moins chiant à ecrire.etc
C'est marrant car tu vois avec un code claire et un obfuscateur (pour que ça "wiizz") tu n'aurais pas eu besoin de tous ces renseignements/aide et les gens auraient compris d'eux même ils aurait eu envie de participer a ton code de le faire vivre... bref les conceptes du web 2.0!
[...]Merci bien,et vive l'évolution
Je parlais a FOXZ hein?!
surement mais je répond quand même hihi
Lakichemole : ??? il y a confusion sur la signification du mot "wizzz".et je ne "obfusce" pas mon code.je m'interesse au fond + qu'a la forme (comme en poesie)XS aura la vie qu'il aura dans l'etat dans lequel il est.libre à toi (et aux autres) de s'arreter à la forme...
Bien évidement que je m'arrête à la forme et c'est bien dommage car le fond paraissait bon! Car pour aller au fond des chose j'ai besoin de bien comprendre se que je fait et que se soit claire je ne vais pas utiliser un code que je ne maitrise pas mais libre aux autre de l'utiliser!
cqfd
Bon à la fois ne code n'est pas vraiment difficile à comprendre...
xs.triable est sur le point d'etre fini.j'ouvre un source à part ou je l'ajout au source ici ?sachant que 2 autres libs assez complex font leurs apparitions.
Je me dis que tu peux l'ajouter ici, mais peut importe ce que tu fais, je dois rester au courant... ;-))
WIiii c genial comme truc !!!encore ! encore !jm'inscrit rien que pour suivre le truc.
Annadrill : j'ai peur que ca alourdisse encore + le forum :-)bon, de toute manière j'ai un plantage assez chiant (je ne le comprend pas en gros :-))sur xs.triableMryo : c'est à dire ?Mon pote CeeeS vas nous rejoindre sur le forum (pour que tout le monde en profite) car il a de bonne idee...
voui, voui...donc mon idee est de passer par getElementsByName pour accelerer les XS.ca donnerait un truc comme<div name="xs" xs="...">ainsi on ne scan pas tout le DOM.bon, je me colle le beta test de xs.triable...je suis pas sur que le "fthrd" soit vraiment utile.il faudrait ainsi pouvoir multi-trierlakichemole: Meuh ! :-)syl
Ceees : Bonne idée.je fais un fork xsiznamemulti-tri : est-ce vraiment utile ?fthrd : à tester sous IE...Bonne Nouvelle : xs.triable est retabli...je propose de faire une release sans multi-tri et de le poster ici.
ca fai koi triable.html sur ton site ?
Utilisé la balise name implique qu'on ne l'utilise pas dans le site c'est moins lourd c'est sur mais c'est super contraignant, celui qui a déjà un site de fait va galérer si il utilise la balise name :/
Mryo : tritable.html est une demo de xs.triable. <table><tbody><th xs="triable">1<th>2 etc...le xstyle triable rajout un "marker" si on clique sur le marqueur le tableau se trie.je ferais une explication plus exhaustive plus tard.Lakichemole : oui, ca peut etre chiant pour l'utilisation des forms...xsiz() scannera tout le DOMxsizname() scannera que les names "xs"modif ce we
et en passant par getElementsByClassName ???
ca ne marche pas encore sous FF 2.04.je ne sais pas sous IE.
pe faire un mixte avec une balise xs special pour sous-scanne :<div name="xs" xs="...;xsiz;..."></div>
Bonne idée.
avec un peu de difficulté...j'ai remis les sources a jour et j'ai rajouté des libs supplémentaire.
Dans la famille tordu je voudrais fobj.js
Zetes mort ?
On bosse en silence..
Le projet est en sommeil pour le moment.On bosse un peu sur jslibs.
Hello,ce serait super s'il était possible d'ajouter des explications et exemples directement dans les sources.sinon c'est gandiose.salut
Je pense plutôt faire une demo dans un HTML à part.Il y a deja pas mal d'explication plus haut...bon, je suis charette en ce moment...
Mais non pourquoi des explication ça sert a rien, le but c'est que ça wizz et qu'on le développe dans son coin tout seul vive le closed source!
LAKICHEMOLE: on est pas tous des pros, alors cela fait plaisir lorsqu'on a un peu d'aide pour avancer... ;-)FOXZ: j'attends la démo alors, merci
Oui désolé je me suis emballé
Je comprends ;-)
lakichemole: il y a aucun volonté de ma part de cacher quoi que ce soit du fonctionnement.mmmrrhhh... bon je révérai à commenter le code à l'occasion de la prochaine refonteannadrill : as-tu essaye de joueur un peu avec ?pour la demo : faudra etre patient les vacances approchent...
je sens notre lakichemole un peu amere.
Beh c'est difficile d'être constructif
La par exemple ;-)
Je bosse sur un projet concurrent à XS.Il s'agit d'un builder entièrement en js qui permet d'editer les pages directement (sous FF).A priori XS restera en l'etat.merci à free qui m'a effacé mon espace web sans raison
oui oui, mdr, bon pas depuis un petit moment parce que les fêtes c'est surtout sinonyme de boulot.... mais je m'y remettrai ;-)salut
Ce qui est amusant c'est que je suis en train d'utiliser XS pour un projet professionnel...donc je l'améliore au fil...
Marche pas sous IE6 à priori ? Voilà mon code de page (index.html dans le même dossier que les .js, pas de problème sous FF):<html><body><script src="Xs.js"></script><script>xs.decml=function(c,p){c.innerHTML=c.innerHTML.replace(/[$]|[§]/ig,"@");c.innerHTML=c.innerHTML.replace(/[+]|[#]/ig,"."); }xs.ml=function(c,p){var r=c.innerHTML;c.innerHTML="<a href='emailto:"+r+"'>"+r; // merci de verifier cette ligne};xs.email="decml;ml;b";</script><span xs="email">totor$tata+fr</span> <script>xsiz();</script></body></html>
Se souvenir du profil
Mot de passe oublié ? / Activation de compteCréer un compte