درخواست اسكريپت: مخفي و ظاهر شدن يه لايه يا جدول

[cybamin]

من نياز به يه اسكريپت دارم كه بتونه يه لايه يا جدول رو پنهان يا آشكار بكنه. در واقع مثل همين + يا (-) كه در بعضي سايتها هست و كليك روي اون باعث باز شدن و كليك مجدد باعث بسته شدن يه قسمت ميشه. ضمنا ميخوام به صورت تابع باشه تا بتونم براي چند تا جدول استفاده كنم. مرسي

 

[mazoolagh]

شما ميتوني از براي هر عنصر صفحه از style.display='none' يا style.visibility='hidden' براي مخفي كردن عنصر و از style.display='block' يا style.display='inline' يا style.visibility='visible' براي ظاهر كردن اون استفاده كني ولي ايندوتا با هم يك كم فرق دارن! (visibility عنصر رو فقط نمايش نميده ولي جاش محفوظ ميمونه ولي display طوري مخفي ميكنه كه انگار اصلا وجود نداره!)

اين دو تا لينك بهتر قضيه رو نشون ميده:
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/display.htm
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/visibility_s.htm

 

[pejman1358]

شما ميتوني از براي هر عنصر صفحه از style.display='none' يا style.visibility='hidden' براي مخفي كردن عنصر و از style.display='block' يا style.display='inline' يا style.visibility='visible' براي ظاهر كردن اون استفاده كني ولي ايندوتا با هم يك كم فرق دارن! (visibility عنصر رو فقط نمايش نميده ولي جاش محفوظ ميمونه ولي display طوري مخفي ميكنه كه انگار اصلا وجود نداره!)

اين دو تا لينك بهتر قضيه رو نشون ميده:
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/display.htm
http://msdn.microsoft.com/workshop/samples/author/dhtml/refs/visibility_s.htm

خوب اينو تا ايجاش فکر می کنم بايد با ()onClick انجام داد ولی اينکه اون متنی که وقتی روش کليک می شه بقيه مطالب رو آشکار و نهان می کنه رو چطور می شه عوض کرد. می دونم شايد ساده باشه ولی اگه يک توضيحی در اين مورد بديد سلولای خاکستری و وقت ما رو حفظ کردين متشکرم

راستی اگه بخواهيم يه کوکی بنويسيم که آخرين حالت (مخفی يا آشکار بودن منو يا متن مورد نظر) را در مراجعه بعدی حفظ کنه چه بايد کرد؟

 

[miladmovie]

ببين اين كدي كه Attach كردم به دردت مي خوره ؟

اين مراجع بيشتر :
http://www.mozilla.org/docs/dom/domref/dom_doc_ref48.html
http://www.w3schools.com/dhtml/dhtml_dom.asp

 

[ferferi]

دوستان عزیز ...
اگه امکانش هست یه کد بدین که یه متن رو که روش کلیک کنیم یک سری متن توضیحاتش زیرش باز بشه
ممنون

 

[mehdi25]

ببین عزیز من این نرم افزار رو سرچ کن تو اینتر نت ریخته Sothink DHTMLMenu
دانلود کن . با اون می تونی انواع این اسکریپت ها رو خیلی سریع درست کنی . یه سری آماده هم داره .


تو این سایت رو هم بگرد اینی که می خوای رو من اونجا دیدم . اسکریپتشو هم بهت میده
http://www.dynamicdrive.com

 

[ferferi]

عزیز من من کلی گشتم ولی قاطی کردم! :wacko:
اگه میشه این دو یا سه خط رو واسم بذارید همینجا
متشکرم:happy:

 

[ferferi]

فکر کنم خودم پیداش کردم

<script>
function toggle(e) {
if (e.style.display == "none") {
e.style.display = "";
} else {
e.style.display = "none";
}
}
</script>

<li><div style="cursor: hand" onclick="toggle(HideShowIn);">Menu1</div></li>
<span id="HideShowIn"><ul>
<li>Item1</li>
<li>Item2</li>
</ul></span>

فقط یه کمک به من بکنید و اگه میشه بگید من چطوری میتونم چند تا از این منو رو توی یه صفحه داشته باشم؟
من متغیر هم تعریف کردم. اما نشد.
من میخوام مثلا 10 تا از این منو رو توی یه صفحه بزارم
ولی پیغام خطا میده!!

 

[mehdi25]

خدمت شما عزیز دل برادر .

اینم چیزی که می خوای

<TABLE border=0 cellPadding=0 cellSpacing=0 width="152">
    <TR>
        <TD 
                background="Picture/lineshade.gif" 
                colSpan=2 width="152"><IMG height=2 
                  src="Picture/pix.gif" 
                  width=1></TD>
    </TR>
    <TR class=tm>
        <TD dir=rtl onclick="expandit('topic1_Caption')" 
                style="CURSOR: hand" width="139" href="#" bgcolor="navy" height="23"><font size="3" face="Times New Roman" color="white"><b>Menu 1</b></font></TD>
        <TD onclick="expandit('topic1_Caption')" style="CURSOR: hand" 
                href="#" width="13" bgcolor="navy" height="23"><IMG height="10" id=topic1_ArrowImage 
                  src="Picture/dnarrow.gif" 
                  width="10"></TD>
    </TR>
    <TR class=tm>
        <TD colSpan=2 dir=rtl width="152">
                  <DIV id=topic1_Caption style="DISPLAY: none">
                <TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
                    <TBODY>
                    <TR>
                        <TD width="152" colspan="2" bgcolor="#26268F">

                            <p style="margin-top:1mm; margin-right:3mm; margin-bottom:1mm;"><font color="white">Item 1</font></p>
                            <p style="margin-top:1mm; margin-right:3mm; margin-bottom:1mm;"><font color="white">Item 2</font></p>
                            <p style="margin-top:1mm; margin-right:3mm; margin-bottom:1mm;"><font color="white">Item 3</font></p>
                            <p style="margin-top:1mm; margin-bottom:1mm;"><font face="Tahoma" color="aqua"><span style="font-size:9pt;"><b> 
                                            </b></span></font>
                                                                                        
                            <p style="margin-top:1mm; margin-right:3mm; margin-bottom:1mm;"></p>
                        </TD>
                    </TR>
                    <TR>
                        <TD><IMG height=3 
                        src="Picture/pix.gif" 
                        width=1></TD>
                        <td></td>
                    </TR>
                    </TBODY>
                </TABLE>
</DIV></TD>
    </TR>
</TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=0 width="152">
    <TR>
        <TD 
                background="Picture/lineshade.gif" 
                colSpan=2 width="152"><IMG height=2 
                  src="Picture/pix.gif" 
                  width=1></TD>
    </TR>
    <TR class=tm>
        <TD dir=rtl onclick="expandit('topic2_Caption')" 
                style="CURSOR: hand" width="139" href="#" bgcolor="navy" height="23"><font face="Times New Roman" color="white"><b><span style="font-size:11pt;">آMenu 2</span></b></font></TD>
        <TD onclick="expandit('topic2_Caption')" style="CURSOR: hand" 
                href="#" width="13" bgcolor="navy" height="23"><IMG height="10" id=topic2_ArrowImage 
                  src="Picture/dnarrow.gif" 
                  width="10"></TD>
    </TR>
    <TR class=tm>
        <TD colSpan=2 dir=rtl width="152">
                  <DIV id=topic2_Caption style="DISPLAY: none">
                <TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
                    <TBODY>

                    <TR>
                        <TD width="152" colspan="2" bgcolor="#26268F">

                            <p style="margin-top:1mm; margin-right:3mm; margin-bottom:1mm;"><font color="white">Item 1</font></p>
                            <p style="margin-top:1mm; margin-right:3mm; margin-bottom:1mm;"><font color="white">Item 2</font></p>
                            <p style="margin-top:1mm; margin-right:3mm; margin-bottom:1mm;"><font color="white">Item 3</font></p>
                        </TD>
                    </TR>
                    <TR>
                        <TD><IMG height=3 
                        src="Picture/pix.gif" 
                        width=1></TD>
                        <td></td>
                    </TR>
                    </TBODY>
                </TABLE>
</DIV></TD>
    </TR>
</TABLE>
<SCRIPT language=javascript>
	var arrowDown = new Image();
	arrowDown.src = "Picture/circle11_skyblue.gif";
	var arrowUp = new Image();
	arrowUp.src = "Picture/uparrow.gif";
    var openDisplay = "inline";
    var closedDisplay = "none";

    function expandit(itemId)
    {
	    window.setTimeout("toggleSection('" + itemId + "')",10);
    }

    function toggleSection(itemId) {
	    var arrowId = itemId.replace("Caption", "ArrowImage");
	    var arrow, item;
   	    
	    item = document.getElementById(itemId);
        arrow = document.getElementById(arrowId);
	    if (item.style.display == closedDisplay) {
		    arrow.src = arrowUp.src;	
		    item.style.display = openDisplay;
	    }
	    else {
		    arrow.src = arrowDown.src;
		    item.style.display = closedDisplay;		
	    }
    }

</SCRIPT>

فقط بقل منو ها یه عکس فلش به طرف پایین گزاشتم که وقتی که منو باز میشه عکسش عوض میشه . خودت اون یه عکس کوچولو بزار دیگه .
این خط رو توجه کن :

onclick="expandit('topic1_Caption')"

به راحتی هر چند تا از این منو ها می خوای تو صفحه بزار فقط ID ی اونا رو باید منحصر بفرد بدی .

id=topic1_Caption

اینجا الان دوتا topic1_Caption تعریف شده و دوتا منو هم داری .
برای منوی سوم topic3_Caption تعریف کن و الی آخر