Array-mixed json structure for data sources
Implemented basic functions
Efficiency is generally the same as that of the dhtree plum blossom Snow tree (ps feels faster than dhtree and is similar to that of the plum blossom Snow tree. My personal test may be wrong. Haha, if it is wrong, please let me know.)
The principle of this implementation tree is based on the json
Continuously generate ul li
The following is a simple example (only 64 lines of tree-class code are displayed if tree generation is involved)
No innerHTML is used to generate all nodes to create ul li
Therefore, it is important to create a node fragment and add it once.
It does not speed up
Processing image styles now
The tree of the wind stone that I reference
The structure and style are easy to write.
So let's introduce it.
The last node does not need to set the background image because there is no downward dotted line. You need to change the image as well.
Here is the addition of l
For example
This is a + look Style
# Demo. tvdash-f {
Background-position:-240px-40px;
}
This is-style
# Demo. tvdash-f-open {
Background-position:-200px-40px;
}
This is the last node style.
# Demo. tvdash-fl {
Background-position:-100px-40px;
}
The png Image has some problems in ie6, so ie6 may not be able to see the following example. The gif effect is normal in ie6.
<! DOCTYPE html>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb-2312"/>
<Title> easytree </title>
<Style type = "text/css">
Ul, li {
List-style: none outside none;
Margin: 0;
Overflow: hidden;
Padding: 0;
}
# Demo {
Background-color: # F0FBEB;
}
# Demo. root {
Margin-left:-20px;
}
# Demo ul {
Padding-left: 20px;
}
# Demo. folder {
Background: url ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ I .png") repeat-y scroll 0 21px transparent;
}
# Demo img {
Background: url ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_icon.png") no-repeat scroll 0 0 transparent;
Border: medium none;
Height: 20px;
Vertical-align: top;
Width: 20px;
}
# Demo. tvicon-open {
Background-position:-160px-40px;
}
# Demo. tvdash-f {
Background-position:-240px-40px;
}
# Demo. tvdash-f-open {
Background-position:-200px-40px;
}
# Demo. tvdash-fl {
Background-position:-100px-40px;
}
# Demo. tvdash-fl-open {
Background-position:-80px-40px;
}
# Demo. tvdash-t {
Background-position:-180px-40px;
}
# Demo. tvdash-tl {
Background-position:-60px-40px;
}
</Style>
</Head>
<Body>
<Div id = sss> </div>
<Div id = demo> </div>
<Script>
(Function (doc, undefined ){
Var window = this;
Window. Sys = function (ua ){
Var B = {
Ie:/msie/. test (ua )&&! /Opera/. test (ua ),
Opera:/opera/. test (ua ),
Safari:/webkit/. test (ua )&&! /Chrome/. test (ua ),
Firefox:/firefox/. test (ua ),
Chrome:/chrome/. test (ua)
}, VMark = "";
For (var I in B ){
If (B [I]) {vMark = "safari" = I? "Version": I; break ;}
}
B. version = vMark & RegExp ("(? : "+ VMark +") [\/:] ([\ d.] +) "). test (ua )? RegExp. $1: "0 ";
B. ie6 = B. ie & parseInt (B. version, 10) = 6;
B. ie7 = B. ie & parseInt (B. version, 10) = 7;
B. ie8 = B. ie & parseInt (B. version, 10) = 8;
Return B;
} (Window. navigator. userAgent. toLowerCase ());
Registry.sys.ie6&doc.exe cCommand ("BackgroundImageCache", false, true );
Window. $ = function (Id ){
Return doc. getElementById (Id );
};
Window. $ c = function (name, parent ){
Var elem = doc. createElement (name );
Parent & parent. appendChild (elem );
Return elem;
};
Window. addListener = function (element, e, fn ){
! Element. events & (element. events = {});
Element. events [e] & (element. events [e] [addListener. guid ++] = fn) | (element. events [e] = {0: fn });
Element. addEventListener? Element. addEventListener (e, fn, false): element. attachEvent ("on" + e, fn );
};
Window. addListener. guid = 1;
Window. removeListener = function (element, e, fn ){
Var handlers = element. events [e], type;
If (fn ){
For (type in handlers)
If (handlers [type] === fn ){
Element. removeEventListener? Element. removeEventListener (e, fn, false): element. detachEvent ("on" + e, fn );
Delete handlers [type];
}
} Else {
For (type in handlers ){
Element. removeEventListener? Element. removeEventListener (e, handlers [type], false): element. detachEvent ("on" + e, handlers [type]);
Delete handlers [type];
}
}
};
Window. setStyle = function (e, o ){
If (typeof o = "string ")
E.style.css Text = o;
Else
For (var I in o)
E. style [I] = o [I];
};
Var slice = Array. prototype. slice;
Window. Bind = function (object, fun ){
Var args = slice. call (arguments). slice (2 );
Return function (){
Return fun. apply (object, args );
};
};
Window. BindAsEventListener = function (object, fun, args ){
Var args = slice. call (arguments). slice (2 );
Return function (event ){
Return fun. apply (object, [event | window. event]. concat (args ));
}
};
// Copy from jQ
Window. extend = function (){
Var target = arguments [0] | |{}, I = 1, length = arguments. length, deep = true, options;
If (typeof target = "boolean "){
Deep = target;
Target = arguments [1] || {};
I = 2;
}
If (typeof target! = "Object" & Object. prototype. toString. call (target )! = "[Object Function]")
Target = {};
For (; I <length; I ++ ){
If (options = arguments [I])! = Null)
For (var name in options ){
Var src = target [name], copy = options [name];
If (target = copy)
Continue;
If (deep & copy & typeof copy = "object "&&! Copy. nodeType ){
Target [name] = arguments. callee (deep, src | (copy. length! = Null? []: {}), Copy );
}
Else if (copy! = Undefined)
Target [name] = copy;
}
}
Return target;
};
// Copy from jQ
Window. each = function (object, callback, args ){
Var name, I = 0, length = object. length;
If (args ){
Args = Array. prototype. slice. call (arguments). slice (2 );
If (length = undefined ){
For (name in object)
If (callback. apply (object [name], [name, object [name]. concat (args) = false)
Break;
} Else
For (; I <length; I ++)
If (callback. apply (object [I], [I, object [I]. concat (args) === false )//
Break;
} Else {
If (length = undefined ){
For (name in object)
If (callback. call (object [name], name, object [name]) === false)
Break;
} Else
For (var value = object [0];
I <length & callback. call (value, I, value )! = False; value = object [++ I]) {}
}
Return object;
};
Window. currentStyle = function (element ){
Return element. currentStyle | doc. defaultView. getComputedStyle (element, null );
};
Window. objPos = function (elem ){
Var left = 0, top = 0, right = 0, bottom = 0, doc = elem? Elem. ownerDocument: doc;
If (! Elem. getBoundingClientRect | window. Sys. ie8 ){
Var n = elem;
While (n) {left + = n. offsetLeft, top + = n. offsetTop; n = n. offsetParent ;};
Right = left + elem. offsetWidth; bottom = top + elem. offsetHeight;
} Else {
Var rect = elem. getBoundingClientRect ();
Left = right = doc.doc umentElement. scrollLeft | doc. body. scrollLeft;
Top = bottom = doc.doc umentElement. scrollLeft | doc. body. scrollLeft;
Left + = rect. left; right + = rect. right;
Top + = rect. top; bottom + = rect. bottom;
}
Return {"left": left, "top": top, "right": right, "bottom": bottom };
};
Window. hasClass = function (ele
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
