?? otree.lib.js
字號:
?/*
By Hangring
#2008.01.31#
---
use list:
> global.lib.js
> css.lib.js
> events.lib.js
> node.lib.js
> cookie.lib.js
---
樹狀列表
---
包含樣式:
<link rel="stylesheet" href="css/tree.lib.css" type="text/css" />
*/
function oTree (el /* :HTMLElement */) {
this.container = el;
// container's id
this.id = '';
// cookie string
this.cookies = '';
// tree contruct
this.tree = {};
// enable cookie or not
this.cookieAble = false;
// enabel link to extend (`<li>`must be contain `<a>`)
this.linkExtend = false;
// current selected item
this.selectedItem = null;
this.css = {
tree:'tree',
second:'second',
icon:'icon',
// open status
open:'open',
// close status
close:'close',
// leaf node
item:'item',
/// node content
content: 'content',
// selected status
selected: 'selected'
};
}
oTree.prototype.Init = function () {
this.Settle();
};
oTree.prototype.Settle = function () {
var el = this.container;
if (!oNode.IsNode(el)) el = this.container = $(this.container || this.id);
CSS.AddClass(el, this.css.tree);
this.id = this.container.id;
//this.SetExtendableAll(el);
this.Circle(el, '', true);
if (this.cookieAble) {
this.Retrieve();
this.Reset();
}
};
oTree.prototype.Circle = function (el /* :HTMLElement */, index /* :String */, first /* :Boolean */) {
var self = this;
var childs = el.childNodes;
for (var i = 0, j = 0, len = childs.length; i < len; i++) {
var child = childs[i];
first || CSS.AddClass(child, this.css.second);
if (oNode.IsNode(child)) {
var _child = child.getElementsByTagName('ul');
_child = _child && _child.length > 0 ? _child[0] : null;
// content
var _content = child.firstChild;
oNode.RemoveNode(_content, child);
var content = oNode.CreateNode('span');
if (child.firstChild)
oNode.InsertBefore(content, child.firstChild);
else
oNode.AddNode(content, child);
CSS.AddClass(content, self.css.content);
oNode.AddNode(_content, content);
// icon
var icon = oNode.CreateNode('span');
oNode.InsertBefore(icon, child.firstChild);
// index
var _index = icon._index = (index != '' ? index + '_' : '') + j++;
CSS.AddClass(icon, this.css.icon);
CSS.AddClass(icon, _child ? this.css.close : this.css.item);
if (_child) {
this.Circle(_child, _index);
CSS.SetDisplay(_child, false);
icon.status = 'close';
icon.list = _child;
Events.AttachEvent(icon, 'click', function (e) {
extend(this, true);
});
if (self.linkExtend) {
var a = child.getElementsByTagName('a');
if (a.length > 0 && a[0].parentNode.parentNode == child) {
a = a[0];
a.icon = icon;
Events.AttachEvent(a, 'click', function (e) {
extend(this.icon, false);
if (a.href == location.href + '#')
Events.CancelEvent(e);
});
}
}
}
}
}
function extend (th, icon) {
if (self.selectedItem != th.parentNode) {
if (self.selectedItem)
CSS.RemoveClass(self.selectedItem, self.css.selected);
self.selectedItem = th.nextSibling;
CSS.AddClass(self.selectedItem, self.css.selected);
}
if (th.status == 'close') {
th.status = 'open';
CSS.ReplaceClass(th, self.css.close, self.css.open);
CSS.SetDisplay(th.list, true);
if (self.cookieAble) {
// add current level
var cookie_index = self.cookies;
self.ReplaceIndex(cookie_index, th._index);
if (cookie_index != '') {
cookie_index += ',';
}
self.cookies = cookie_index + th._index;
// set cookie
Cookie.Set(self.id, self.cookies);
}
}
else {
th.status = 'close';
CSS.ReplaceClass(th, self.css.open, self.css.close);
CSS.SetDisplay(th.list, false);
if (self.cookieAble) {
// delete current level
var cookie_index = self.cookies;
cookie_index = self.ReplaceIndex(cookie_index, th._index);
self.cookies = cookie_index;
// set cookie
Cookie.Set(self.id, self.cookies);
}
}
}
};
// 清理需要保存的索引
oTree.prototype.ReplaceIndex = function (indexs /* :String(index1,index2,index3) */, index /* :String */) {
indexs = indexs.replace(',' + index + ',', ',');
indexs = indexs.replace(new RegExp(',' + index + '$', 'gi'), '');
indexs = indexs.replace(new RegExp('^' + index + ',', 'gi'), '');
indexs = indexs.replace(new RegExp('^' + index + '$', 'gi'), '');
return indexs;
};
// 重新獲取cookie的內容
oTree.prototype.Retrieve = function () {
var cookies = Cookie.cookies[this.id];
if (!cookies || cookies == 'undefined' || typeof cookies == 'undefined') cookies = '';
this.cookies = cookies;
};
// 重設已記錄的展開的列表
oTree.prototype.Reset = function () {
var cookies = this.cookies.split(',');
this.Render(cookies);
for (var i = 0, len = cookies.length; i < len; i++) {
var extendAble = true;
var levels = cookies[i].split('_');
for (var j = 0, _len = levels.length; j < _len; j++) {
levels[j] = levels[j].toString();
if (this.tree[levels[j]] && !this.tree[levels[j]].on)
extendAble = false;
}
if (extendAble) this.OpenTo(levels);
}
};
// 呈現為樹
oTree.prototype.Render = function (cookies) {
var tree;
for (var i = 0, len = cookies.length; i < len; i++) {
var l = cookies[i].split('_');
tree = this.tree;
for (var j = 0, _len = l.length; j < _len; j++) {
if (typeof tree[l[j]] != 'object') tree[l[j]] = {on:false};
if (typeof tree[l[j]].childs != 'object') {
if (j != _len - 1) tree[l[j]].childs = {};
else tree[l[j]].on = true;
tree = tree[l[j]].childs;
}
else {
tree[l[j]].on = true;
}
}
}
//alert(Dumper(this.tree));
};
// 展開某個列表
oTree.prototype.OpenTo = function (levels /* :Array([level1, level2, level3, ...]) */) {
var node = null;
for (var i = 0, len = levels.length; i < len; i++) {
if (i == 0) node = this.container;
for (var j = 0, k = 0, _len = node.childNodes.length; j < _len; j++) {
if (node.childNodes[j].tagName && node.childNodes[j].tagName.toLowerCase() == 'li') {
if (k == levels[i]) {
node = node.childNodes[j];
break;
}
k++;
}
}
if (!node) continue;
var span = node.getElementsByTagName('span')[0];
span.status = 'open';
CSS.ReplaceClass(span, 'close', 'open');
node && (node = node.getElementsByTagName('ul')[0]);
node && CSS.SetDisplay(node, true);
}
};
// 設置樣式
oTree.prototype.SetStyle = function (style /* :String */, css /* :String */) {
if (typeof css != 'string') return;
this.css[style] = css;
};
// extendable all
oTree.prototype.SetExtendableAll = function () {
var uls = this.container.getElementsByTagName('ul');
for (var i = 0, len = uls.length; i < len; i++) {
this.SetExtendableOne(uls[i]);
}
};
// extendable one
oTree.prototype.SetExtendableOne = function (el /* :HTMLElement */) {
var lis = el.childNodes;
var ops = [];
for (var i = 0, j = 0, len = lis.length; i < len; i++) {
if (!oNode.IsNode(lis[i]) || lis[i].tagName.toLowerCase() != 'li')
continue;
ops[j] = {
x: Global.GetOffsetLeft(lis[i]),
y: Global.GetOffsetTop(lis[i]),
index: i
};
j++;
}
var l = Global.GetOffsetLeft(el);
var t = Global.GetOffsetTop(el);
var w = el.offsetWidth + 50;
var h = el.offsetHeight;
el.style.position = 'relative';
el.style.overflow = 'hidden';
el.style.width = w + 'px';
el.style.height = h + 'px';
for (i = 0; i < j; i++) {
var li = lis[ops[i].index];
li.style.position = 'absolute';
li.style.border = '1px solid #f00';
li.style.bottom = h - (ops[i].y - t) - li.offsetHeight + 'px';
}
};
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -