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
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.