Dombuilder
Description
Pour créer ou insérer des éléments on peux passé comme argument soit une string, soit un nud , soit une collection (nodListe), soit une objet, soit un tableau (qui lui même peux prendre toute ses valeurs...).
Pour setStyle ont peux passé soit un objet dont les clé seront les attribut de style au format js, ou une string, comme dans les css.
getAttribute et setAttribute normalise l'accession et la modification des attributs
Voici la list des fonctions:
- getHTML
- getOutherHTML
- setHTML
- append / insertIntoLast
- prepend / insertBefore
- insertIntoFirst
- insertAfter
- createElement
- getAttribute
- setAttribute
- removeAttribute
- getStyle
- setStyle
Pour setStyle ont peux passé soit un objet dont les clé seront les attribut de style au format js, ou une string, comme dans les css.
getAttribute et setAttribute normalise l'accession et la modification des attributs
Voici la list des fonctions:
- getHTML
- getOutherHTML
- setHTML
- append / insertIntoLast
- prepend / insertBefore
- insertIntoFirst
- insertAfter
- createElement
- getAttribute
- setAttribute
- removeAttribute
- getStyle
- setStyle
Source / Exemple :
(function(spaceName){
/*------------------------priver-----------------------*/
//element servant a créer les élément html, via innerHTML
var element = document.createElement('div'),
isIE = /msie/i.test(navigator.userAgent),
parent;//parent référencant tout les élément créer depuis une cahine de caractere
//céer des élements depuis une string
function createHTML(str, toReturn){
element.innerHTML = '';
var wrap = /^<(thead|tbody|tfoot|colg|cap)/i.test(str) ? [ 1, "<table>", "</table>" ]
: /^<tr/i.test(str) ? [ 2, "<table><tbody>", "</tbody></table>" ]
: /^(<td|<th)/i.test(str) ? [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ]
: /^<opt/i.test(str) ? [ 1, "<select multiple='multiple'>", "</select>" ]
: /^<leg/i.test(str) ? [ 1, "<fieldset>", "</fieldset>" ]
: /^<col/i.test(str) ? [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] : null;
parent = element;
if(wrap){
parent.innerHTML = wrap[1] + str + wrap[2];
//on définit ele, le dernier parent
while (wrap[0]--)
parent = parent.lastChild;
}else
//sinon on remplit dans la reférence de element de la chaine html
parent.innerHTML = str;
if(toReturn){
var ret = Array.prototype.slice.call(parent.childNodes);
return ret.length - 1 ? ret : ret[0];
}
}
//céer des élements via une syntaxe JSON
function createJSON(object){
var tag = object.tag,
items = object.items,
el;
delete object.tag;
delete object.items;
if(isIE)if(tag.toLowerCase() == 'input'){
el = document.createElement('<input type="'+object.type+'" '+(object.checked ? 'checked="checked"' : '')+(object.name ? 'name="'+object.name+'"' : '')+'>');
}else if(tag.toLowerCase() == 'select'){
el = document.createElement('<select '+(object.multiple ? 'multiple="multiple"' : '')+(object.name ? 'name="'+object.name+'"' : '')+'>');
}else if(tag.toLowerCase() == 'textarea')
el = document.createElement('<textarea '+(object.name ? 'name="'+object.name+'"' : '')+'></textarea>');
el = el || document.createElement(tag);
for(var i in object)
spaceName.setAttribute(el, i, object[i]);
if(items)
getFuncInsertion(items)(el, items);
object.tag = tag;
object.items = items;
return el;
}
//céer des élements via une syntaxe JSON
function createArray(array){
for(var i = 0, l = array.length, ret = []; i < l; i++){
ret[i] = getFunctionCreate(array[i])(array[i], true);}
return ret;
}
//retourne la fonction de création en fonction du type fournit
function getFunctionCreate(els){
return typeof els == 'string' ? createHTML : els.constructor == Object ? createJSON : createArray;
}
//inser un élement a partir d'une sible et d'une position(before)
function insert(el, sible, before){
if(before){
sible.parentNode.insertBefore(el, sible);
}else sible.appendChild(el);
}
//insertion des élement via une string
function insertHTML(el, str, before){
createHTML(str);
var elem;
while (parent.childNodes[0]){
elem = parent.removeChild(parent.childNodes[0]);
insert(elem, el, before);
}
}
//insertion des élement via une JSON
function insertJSON(el, object, before){
var els = createJSON(object);
insert(els, el, before);
}
//insertion des élement via un noeud HTML
function insertNod(el, nod, before){
insert(nod, el, before);
}
//insertion des élements via un tableau ou une collection
function insertArray(el, array, before){
for(var i = 0, l = array.length; i < l; i++)
getFuncInsertion(array[i])(el, array[i], before);
}
//retourne la fonction d'insertion en fonction du type fournit
function getFuncInsertion(els){
return typeof els == 'string' ? insertHTML : els.constructor == Object ? insertJSON : els.length ? insertArray : insertNod;
}
function setOpacity(element,value) {
value = value < 0.00001 ? 0 : value;
if(isIE){
element.style.filter = 'alpha(opacity=' + value * 100+ ')';
}else
element.style.opacity = value;
};
//création d'un objet d'acces rapide au propriété accéssible uniquement comme propriété du noeud
var camelGroupe = ['colSpan', 'rowSpan', 'vAlign', 'dateTime', 'accessKey', 'tabIndex', 'encType', 'maxLength', 'readOnly', 'longDesc', 'cellPadding', 'cellSpacing', 'frameBorder', 'useMap', 'id'];
for (var i = 0, c, isCamel = {'class' : 'className', 'className' : 'className', id : 'id', 'for' : 'htmlFor'}; c = camelGroupe[i]; i++)
isCamel[c.toLowerCase()] = c;
//création d'un objet d'acces rapide au propriété accéssible uniquement comme propriété du noeud, et dont dont les valeur de typoe bool doivent avoir une notation XHTML
var boolGroupe = ['compact', 'nowrap', 'ismap', 'declare', 'noshade', 'checked', 'disabled', 'readonly', 'multiple', 'selected', 'noresize', 'defer'];
for (var i = 0, c, isBool = {}; c = boolGroupe[i]; i++)
isBool[c] = c;
/*------------------------publique-----------------------*/
//par forcement nécessaire, mais pour etre en 'harmonie' avec toute les autres fonctions
spaceName.getHTML = function(el){
return el.innerHTML;
}
//fonction original de jdmcreator -> http://www.javascriptfr.com/codes/EMULER-OUTERHTML_50599.aspx
spaceName.getOutherHTML = function(el){
element.innerHTML = '';
element.appendChild(el.cloneNode(true));
return element.innerHTML;
}
spaceName.getAttribute = function(el, attr){
if(attr == 'style')
return el.style.cssText;
var camel, bool;
return r = isIE || (camel = isCamel[attr]) || (bool = isBool[attr]) ? el[camel || bool || attr] : el.getAttribute(attr);
}
spaceName.setAttribute = function(el, attr, value){
if(attr == 'style')
return spaceName.setStyle(el, value);
var camel = isCamel[attr],
bool = isBool[attr];
if(bool && !value){
el[bool] = null;
}else if(isIE || camel || bool){
el[camel || bool || attr] = bool || value;
}else el.setAttribute(attr, value);
}
spaceName.removeAttribute = function(el, attr){
if(attr == 'style'){
el.style.cssText = '';
return;
}
var camel = isCamel[attr],
bool = isBool[attr];
if(isIE || camel || bool){
el[camel || bool || attr] = null;
}else el.removeAttribute(attr);
}
spaceName.setStyle = function(el, style){
if (typeof style == 'string'){
el.style.cssText += ';' + style;
if(style.indexOf('opacity') > -1)
setOpacity(el, style.match(/opacity:\s*(\d?\.?\d*)/)[1]);
}else for(var i in style){
if(i == 'opacity'){
setOpacity(el, style[i]);
}else el.style[i == 'float' ? 'cssFloat': i] = style[i];
}
}
spaceName.setHTML = function(el, els){
el.innerHTML = '';
getFuncInsertion(els)(el, els);
}
spaceName.append = spaceName.insertIntoLast = function(el, els){
getFuncInsertion(els)(el, els);
}
spaceName.prepend = spaceName.insertBefore = function(el, els){
getFuncInsertion(els)(el, els, true);
}
spaceName.insertIntoFirst = function(el, els){
var ele;
getFuncInsertion(els)((ele = el.childNodes[0]) ? ele : el, els, !!ele);
}
spaceName.insertAfter = function(el, els){
var ele;
getFuncInsertion(els)((ele = el.nextSibling) ? ele : el.parentNode, els, !!ele);
}
spaceName.createElement = function(els){
return getFunctionCreate(els)(els);
}
})(window)//->remplacer windows par votre espace de nom
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.