Dom Builder-Based on jquery

1 // Syntax: $. makeDom (json)
2 // parameter: object in JSON format
3 // return: dom object in jquery format
4 // 2011-02-25 XZH
5
6 $. makeDom = function (d ){
7 var parent;
8 var s = function s (d, parent ){
9 var c = $ ('<' + d. tag + '> ');
10 if (d. cls) {c. addClass (d. cls );}
11 if(d.txt00000000c.text(d.txt );}
12 if (d. nvs) {c. attr (d. nvs );}
13 if (! Parent) {var parent = c ;}
14 else {var parent = c. appendTo (parent );}
15 if (d. children) {for (var I = 0; d. children [I]; I ++) {s (d. children [I], parent );}}
16 return parent;
17 };
18 return s (d );
19}

Parameter conventions:

{Tag: 'tag', cls: 'quick style', txt: 'text content', nvs: {Name: value, name: Value}, children: [{...}]}

Example:

1 talkbox = {
2 tag: 'div ', cls: 'talkbox ',
3 children :[
4 {
5 tag: 'div ', cls: 'titlebar ',
6 children :[
7 {tag: 'div ', cls: 'Avatar '},
8 {tag: 'div ', cls: 'ctrlbts '},
9 {tag: 'div ', cls: 'talktitle '}
10]
11 },
12 {tag: 'div ', cls: 'viewmsgarea '},
13 {tag: 'div ', cls: 'toolsbar '},
14 {tag: 'textea ', cls: 'inputmsgarea', txt: 'input message here '},
15 {tag: 'input', cls: 'sendmsgbutton ', namevalue: {type: 'link', value: 'send message '}}
16]
17}
18
19
20 $. makeDom (talkbox)

Return Value:

[<Div class = "talkbox">
<Div class = "titlebar">... </Div>
<Div class = "viewmsgarea"> </div>
<Div class = "toolsbar"> </div>
<Textarea class = "inputmsgarea"> enter a message here </textarea>
<Input class = "sendmsgbutton">
</Div>]

After searching, it seems that only prototype dom builder is available. It seems that project IM uses JQ, so a dom biulder is written for JQ.

For efficiency, you can replace the function that operates DOM objects more quickly.

1. Create an object $ ('<' + tpl. tag + '>'), return a dom object in jq format, and change it to document. createElement.
2. Add $ (obj). appendTo (parent) to add obj to parent, and return obj. You may not be able to directly use the native appendChild method to create one by yourself.
3. Create $ (obj). text (string) with createTextNode
4. Add a style $ (obj). addClass (string)
5. Add $ (obj). attr (json) to the Property)