Simplejs : librairie ajax combinée à des effets visuels.

5/5 (16 avis)

Snippet vu 13 558 fois - Téléchargée 21 fois

Contenu du snippet

Pour 10ko, vous avez une librairie de fonctions faciles pour afficher des pages via Ajax avec des effets visuels du genre de Script.aculo.us. Bien qu'en beta , aucuns bugs signalés, pourtant je suis certains qu'il y a moyen d'améliorer le code, car le javascript n'est pas ma spécialité. Le formatage (pres d'un tier du poids!) a été volontairement supprimmé, en fait elle est compressée. J'assayerai de retrouver mon code formaté si nécessaire.

J'ai créer cette librairie afin de pouvoir utiliser rapidement mes fonctions préférées de Scipt.aculo.us, sans devoir charger les plus de 100 ko nécéssaires.

Néamoins, c'est pas du tout basé sur prototype. Par contre, elle reprend le code de Sack qui me semble parfait.

N'hésitez pas à faire des commentaires constructifs car j'ai l'intention de continuer ce projet d'ici 2-3 mois. J'attendais que l'on me signale des bugs, mais au lieu de ça, on me demande sans cesse de l'aide pour des raisons ridicules (marche pas en HTML 4.0, Ajax sans serveur,...).

vous pouvez vous rendre sur cette page: http://simplejs.bleebot.com/ pour la voir en action, optenir les infos sur l'utilisation et télécharger le script avec ces plug-ins

Source / Exemple :


/*
SimpleJS ver 0.02 beta
----------------------
SimpleJS is developed by Christophe "Dyo" Lefevre (http://bleebot.com/)

$ajax function is based on Simple AJAX Code-Kit (SACK)
Gregory Wild-Smith (http://www.twilightuniverse.com/)

  • /
var enableCache = true; var jsCache = new Array(); var DynObj = new Array(); function $ajax(file) { this.xmlhttp = null; this.resetData = function() { this.method = "POST"; this.queryStringSeparator = "?"; this.argumentSeparator = "&"; this.URLString = ""; this.encodeURIString = true; this.execute = false; this.element = null; this.elementObj = null; this.requestFile = file; this.vars = new Object(); this.responseStatus = new Array(2); } ; this.resetFunctions = function() { this.onLoading = function() { } ; this.onLoaded = function() { } ; this.onInteractive = function() { } ; this.onCompletion = function() { } ; this.onError = function() { } ; this.onFail = function() { } ; } ; this.reset = function() { this.resetFunctions(); this.resetData(); } ; this.crAjx = function() { try { this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e1) { try { this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { this.xmlhttp = null; } } if (! this.xmlhttp) { if (typeof XMLHttpRequest != "undefined") { this.xmlhttp = new XMLHttpRequest(); } else { this.failed = true; } } } ; this.setVar = function(name, value) { this.vars[name] = Array(value, false); } ; this.encVar = function(name, value, returnvars) { if (true == returnvars) { return Array(encodeURIComponent(name), encodeURIComponent(value)); } else { this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true); } } this.processURLString = function(string, encode) { encoded = encodeURIComponent(this.argumentSeparator); regexp = new RegExp(this.argumentSeparator + "|" + encoded); varArray = string.split(regexp); for (i = 0; i < varArray.length; i++) { urlVars = varArray[i].split("="); if (true == encode) { this.encVar(urlVars[0], urlVars[1]); } else { this.setVar(urlVars[0], urlVars[1]); } } } this.createURLString = function(urlstring) { if (this.encodeURIString && this.URLString.length) { this.processURLString(this.URLString, true); } if (urlstring) { if (this.URLString.length) { this.URLString += this.argumentSeparator + urlstring; } else { this.URLString = urlstring; } } // prevents caching of URLString this.setVar("rndval", new Date().getTime()); urlstringtemp = new Array(); for (key in this.vars) { if (false == this.vars[key][1] && true == this.encodeURIString) { encoded = this.encVar(key, this.vars[key][0], true); delete this.vars[key]; this.vars[encoded[0]] = Array(encoded[1], true); key = encoded[0]; } urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0]; } if (urlstring) { this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator); } else { this.URLString += urlstringtemp.join(this.argumentSeparator); } } this.runResponse = function() { eval(this.response); } this.runAJAX = function(urlstring) { if (this.failed) { this.onFail(); } else { this.createURLString(urlstring); if (this.element) { this.elementObj = $(this.element); } if (this.xmlhttp) { var self = this; if (this.method == "GET") { totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString; this.xmlhttp.open(this.method, totalurlstring, true); } else { this.xmlhttp.open(this.method, this.requestFile, true); try { this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") } catch (e) { } } this.xmlhttp.onreadystatechange = function() { switch (self.xmlhttp.readyState) { case 1 : self.onLoading(); break; case 2 : self.onLoaded(); break; case 3 : self.onInteractive(); break; case 4 : self.response = self.xmlhttp.responseText; self.responseXML = self.xmlhttp.responseXML; self.responseStatus[0] = self.xmlhttp.status; self.responseStatus[1] = self.xmlhttp.statusText; if (self.execute) { self.runResponse(); } if (self.elementObj) { elemNodeName = self.elementObj.nodeName; elemNodeName.toLowerCase(); if (elemNodeName == "input" || elemNodeName == "select" || elemNodeName == "option" || elemNodeName == "textarea") { self.elementObj.value = self.response; } else { self.elementObj.innerHTML = self.response; } } if (self.responseStatus[0] == "200") { self.onCompletion(); } else { self.onError(); } self.URLString = ""; break; } } ; this.xmlhttp.send(this.URLString); } } } ; this.reset(); this.crAjx(); } function ajax_installScript(script) { if (!script) return; if (window.execScript) { window.execScript(script); } else if(window.jQuery && jQuery.browser.safari) { STO(script, 0); } else { STO( script, 0 ); } } function $ajax_show(divId, Aorj, url, loader, effect) { if (effect == 'appear') $opacity(divId, 0, 101, 600); if (effect == 'highlight') $highlight(divId); var targetObj = $(divId); targetObj.innerHTML = DynObj[Aorj].response; if (effect == 'blind') { $(divId).style.position = ''; $blinddown(divId); } if(enableCache) { jsCache[url] = DynObj[Aorj].response; } DynObj[Aorj] = false; ajax_parseJs(targetObj) } function $ajaxreplace(divId, url) { $opacity(divId, 100, 0, 400); $(divId).style.height = ''; scr = "$ajaxload('" + divId + "','" + url + "',false,'appear',false)"; STO(scr, 400); } function $ajaxload(divId, url, loader, effect, ecache) { if (effect == 'appear') changeOpac(0, divId); if (effect == 'blind') { var ids = $(divId).style; ids.overflow = 'hidden'; ids.display = 'block'; ids.height = '0px'; } if (ecache) { if(enableCache && jsCache[url]) { if (effect == 'appear') $opacity(divId, 0, 101, 600); if (effect == 'highlight') $highlight(divId); $(divId).innerHTML = jsCache[url]; if (effect == 'blind') { $(divId).style.position = ''; $blinddown(divId); } return; } } var Aorj = DynObj.length; if (loader != false) $(divId).innerHTML = loader; DynObj[Aorj] = new $ajax(); DynObj[Aorj].requestFile = url; DynObj[Aorj].onCompletion = function() { $ajax_show(divId, Aorj, url, loader, effect); } ; DynObj[Aorj].runAJAX(); } function ajax_parseJs(obj) { var scriptTags = obj.getElementsByTagName('SCRIPT'); var string = ''; var jsCode = ''; for(var no = 0; no < scriptTags.length; no++) { if(scriptTags[no].src) { var head = document.getElementsByTagName("head")[0]; var scriptObj = document.createElement("script"); scriptObj.setAttribute("type", "text/javascript"); scriptObj.setAttribute("src", scriptTags[no].src); } else { if(DHTMLSuite.clientInfoObj.isOpera) { jsCode = jsCode + scriptTags[no].text + '\n'; } else jsCode = jsCode + scriptTags[no].innerHTML; } } if(jsCode)ajax_installScript(jsCode); } //generic fonctions function $(id) { return document.getElementById(id); } function STO(func,time) { return window.setTimeout(func,time); } function DecToHexa(DecNb) { var digits = parseInt(DecNb).toString(16); if (DecNb < 16) digits = '0' + digits; return digits; } function addslashes(str) { str = str.replace(/\"/g,"\\\""); str = str.replace(/\'/g,"\\\'"); return str; } //blinds effects function $toggle(id) { if (act_height(id) == 0) $blinddown(id); else $blindup(id); } function act_height(id) { height = $(id).clientHeight; if(height == 0) height = $(id).offsetHeight; return height; } function act_width(id) { width = $(id).clientWidth; if(width == 0) width = $(id).offsetWidth; return width; } function max_height(id) { var ids = $(id).style; ids.overflow = 'hidden'; if (act_height(id)!=0) return act_height(id); else { origdisp = ids.display; origheight = ids.height; origpos = ids.position; origvis = ids.visibility; ids.visibility = 'hidden'; ids.height = ''; ids.display = 'block'; ids.position = 'absolute'; height = act_height(id); ids.display = origdisp; ids.height = origheight; ids.position = origpos; ids.visibility = origvis; return height; } } function $blindup(id, time) { if (!time)time = 200; acth = act_height(id); maxh = max_height(id); if (acth == maxh) { $(id).style.display = 'block'; var steps; steps = Math.ceil(time / acth); for(i = 0; i <= acth; i++) { newh = acth - i; STO("$('" + id + "').style.height='" + newh + "px'", steps * i); } } } function $blinddown(id, time) { if (!time)time = 200; acth = act_height(id); if (acth == 0) { maxh = max_height(id); $(id).style.display = 'block'; $(id).style.height = '0px'; var steps; steps = Math.ceil(time / maxh); for(i = 1; i <= maxh; i++) { STO("$('" + id + "').style.height='" + i + "px'", steps * i); } } } //$opacity effects function $opacity(id, opacStart, opacEnd, time) { if($(id).style.width==0) $(id).style.width=act_width(id); var speed = Math.round(time / 100); var timer = 0; if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { STO("changeOpac(" + i + ",'" + id + "')", (timer * speed)); timer++; } } else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { STO("changeOpac(" + i + ",'" + id + "')", (timer * speed)); timer++; } } } function changeOpac(opacity, id) { var ids = $(id).style; ids.opacity = (opacity / 100); ids.MozOpacity = (opacity / 100); ids.KhtmlOpacity = (opacity / 100); ids.filter = "alpha(opacity=" + opacity + ")"; } function $shiftOpacity(id, time) { if($(id).style.opacity < 0.50) { $opacity(id, 0, 100, time); } else { $opacity(id, 100, 0, time); } } function currentOpac(id, opacEnd, time) { var currentOpac = 100; if($(id).style.opacity < 100) { currentOpac = $(id).style.opacity * 100; } $opacity(id, currentOpac, opacEnd, time)} //$colorize effects function $highlight(id, time, ncol, hcol) { if(time) milli = time; else milli = 900; if(ncol) endcol = ncol; else endcol = '#FFFFFF'; if(hcol) origcol = hcol; else origcol = '#FFFFA6'; $colorize(origcol, endcol, id, milli, 'high'); } function $textColor(id, startcol, endcol, time) { if(time) milli = time; else milli = 900; $colorize(startcol, endcol, id, milli, 'text'); } function $morphColor(id, starttextcol, endtextcol, startbackcol, endbackcol, startbordercol, endbordercol, time) { if(time) milli = time; else milli = 900; $colorize(starttextcol, endtextcol, id, milli, 'text'); $colorize(startbackcol, endbackcol, id, milli, 'back'); if (startbordercol != false) $colorize(startbordercol, endbordercol, id, milli, 'border'); } function $colorize(start, end, id, time, elem) { dr = parseInt(start.substring(1, 3), 16); dg = parseInt(start.substring(3, 5), 16); db = parseInt(start.substring(5, 7), 16); fr = parseInt(end.substring(1, 3), 16); fg = parseInt(end.substring(3, 5), 16); fb = parseInt(end.substring(5, 7), 16); steps = time / 10; cr = dr; cg = dg; cb = db; sr = (fr - dr) / steps; sg = (fg - dg) / steps; sb = (fb - db) / steps; var zzi = 10; for (var x = 0; x < steps; x++) { color = '#' + DecToHexa(cr) + DecToHexa(cg) + DecToHexa(cb); if (x==(steps-1)) { if (elem == "high") color=''; else color=end; } mytime = (x); if (elem == "back" || elem == "high") newfonc = '$("' + id + '").style.backgroundColor="' + color + '";'; else if (elem == "text") newfonc = '$("' + id + '").style.color="' + color + '";'; else if (elem == "border") newfonc = '$("' + id + '").style.borderColor="' + color + '";'; STO(newfonc, zzi); cr += sr; cg += sg; cb += sb; zzi += 10; } }

Conclusion :


Ne me dite pas "elle n'est pas commentée", je sais, j'avais pas prévu de la placer ici. C'est d'ailleurs ma première source

A voir également

Ajouter un commentaire Commentaires
Messages postés
21
Date d'inscription
mercredi 8 février 2006
Statut
Membre
Dernière intervention
16 mars 2009

Vraiment sympa cette librairie je l'utilise sur différente application et sa marche nikel.

J'aurais une colle si quelque a une idée, je chercher a utilisé l'effet toogle, mais qui remonterais automatiquement au bout de X secondes je pense que c'est largement possible avec simple-JS mais je trouve pas comment faire, si vous avez une idée ;-)

Bonnes fêtes a tous...
Messages postés
2
Date d'inscription
jeudi 13 décembre 2007
Statut
Membre
Dernière intervention
13 décembre 2007

Pour être plus précis, quand je fais
, c'est nickel
mais si je fais

ça marche pas.

Voilà :D
Messages postés
2
Date d'inscription
jeudi 13 décembre 2007
Statut
Membre
Dernière intervention
13 décembre 2007

Bonjour,

je fais mes premiers tests avec cette librairie, et avec Ajax tout court en fait, et pour un débutant en la matière, c'est vraiment simple d'utilisation, merci.
Petite question peut-être idiote mais bon:
J'ai fais quelques expériences avec AjaxLoad et AjaxReplace, et ça fonctionne bien tant que le nouveau contenu est dans le même espace que la page qui appelle. Y a t'il moyen de faire la même chose avec des pages sur un autre domaine? En gros, j'ai un bouton sur mon site qui mènera à un autre site, et je voudrais faire un effet de transition entre les 2 pages. Possible ?

Merci d'avance
Messages postés
4
Date d'inscription
samedi 15 janvier 2005
Statut
Membre
Dernière intervention
14 novembre 2007

Je trouve cela très bien fait!
Bien entendu je mets le max!
Par contre pourriez vous, m'expliquer comment je dois procéder pour le cas suivant. J'ai un formulaire avec deux boutons submit.
Il faut cliquer dans l'ordre pour valider le formulaire.
Dans le cas présent, les internautes sur mon site, valident le premier bouton et le formulaire se relève. Ils en oublient de vredplier pour valider le second bouton et du coup le formulaire n'est pas validé.
Pour résumé: Comment obligé le formulaire a rester en position basse tant que les deux boutons ne sont pas validés?
Messages postés
3
Date d'inscription
dimanche 18 avril 2004
Statut
Membre
Dernière intervention
16 avril 2007

Même erreur que fidjay : le div remonte mais arrivé en haut il redescent tout de suite ... :/


Ajouter




Quelqu'un aurait-il trouvé le problème ?
Afficher les 16 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.