-
چگونگی ساخت لیست درختی
سلام دوستان می خواستم بدونم چگونه می تونیم یک لیست درختی بسازیم.
مثلاً می نویسیم موبایل بعد کنارش یک بعلاوه باشه روش کلیک می کنیم تبدیل به منفی بشه و زیر شاخه موبایل رو نشون بده و شاخه های دیگه رو هم با این کار بتونیم باز و بسته کنیم
این کار با چه تگ یا کد یا برنامه ای امکان پذیر است
ممنون میشم کمکم کنید
-
با این کد میتونی این کارو بکنی
[HTML]
<script language='JavaScript'>
function showBranch() {
var string ="";
var test= new Array ();
if (showBranch.arguments.length==1)
{
if (showBranch.arguments[0]=='x')
{
clearCookie();
}
}
for (var i=0; i<showBranch.arguments.length; i++)
{
test[i]=0;
}
for (var i=0; i<1; i++) {
test[i]=0;
d = document.getElementById(showBranch.arguments[i]);
if (d) {
/* test to see if first element is already opened*/
if (d.style.display=='block')
{
test[i]=1;
}
}
}
for (var i = 0; i<=200; i++) {
d = document.getElementById('menu'+i);
if (d) {
d.style.display='none';
}
}
for (var i=0; i<showBranch.arguments.length; i++) {
d = document.getElementById(showBranch.arguments[i]);
if (d) {
clearCookie();
if (test[i]==0)
{
d.style.display='block';
string += showBranch.arguments[i] + ".";
}
}
}
if (string!="")
{
setCookie('cssBranch',string);
}
/*if (showBranch.arguments.length==0 || (showBranch.arguments.length==1 && String (showBranch.arguments[0]).indexOf('menu')==-1))
{
var aOpen = this.getCookie('cssBranch').split('.');
for (var n=0; n<aOpen.length; n++)
{
d = document.getElementById(aOpen[n]);
if (d) {
d.style.display='block';
}
}
}*/
}
// [Cookie] Checks if a node id is in a cookie
function isOpen(id) {
var aOpen = this.getCookie('co' + this.obj).split('.');
for (var n=0; n<aOpen.length; n++)
if (aOpen[n] == id) return true;
return false;
};
/************ Cookie functions ********************************************/
// [Cookie] Clears a cookie
function clearCookie() {
var now = new Date();
var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);
this.setCookie('cssBranch', 'cookieValue', yesterday);
};
// [Cookie] Sets value in a cookie
function setCookie(cookieName, cookieValue, expires, path, domain, secure) {
document.cookie =
escape(cookieName) + '=' + escape(cookieValue)
+ (expires ? '; expires=' + expires.toGMTString() : '')
+ (path ? '; path=' + path : '')
+ (domain ? '; domain=' + domain : '')
+ (secure ? '; secure' : '');
};
// [Cookie] Gets a value from a cookie
function getCookie (cookieName) {
var cookieValue = '';
var posName = document.cookie.indexOf(escape(cookieName) + '=');
if (posName != -1) {
var posValue = posName + (escape(cookieName) + '=').length;
var endPos = document.cookie.indexOf(';', posValue);
if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));
else cookieValue = unescape(document.cookie.substring(posValue));
}
return (cookieValue);
};
// [Cookie] Returns ids of open nodes as a string
function updateCookie() {
var str = '';
for (var n=0; n<this.aNodes.length; n++) {
if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {
if (str) str += '.';
str += this.aNodes[n].id;
}
}
this.setCookie('co' + this.obj, str);
};
</script>
<UL>
<!--start static-->
<LI style="display:block"><A onClick="javascript:showBranch('menu0');return false;" href="http://onetwo.blogfa.com#">موبایل</A>
<UL style="display:none" id=menu0>
<LI><A href="/link1.htm">موبایل1</A></LI>
<LI><A href="/link2.htm">موبایل2</A></LI>
<LI><A href="/link3.htm">موبایل3</A></LI>
<LI><A href="/link4.htm">موبایل4</A></LI>
<LI><A href="/link5.htm">موبایل5</A></LI>
</UL>
<!--end static-->
</UL>
[/HTML]
حالا برای ساخت هر شاخه کد داخل <!--start static--> تا <!--end static--> تکرار میشه فقط باید menu0 رو تغییر بدی به menu1 و ...
نمونه ساخته شده از همین کد رو که خودم ساختم رو میتونی تو آدرس زیر ببینی.
http://onetwo.blogfa.com/page/naghshe.aspx