جمع شونده ها Collapse

جمع شونده ها

جمع شونده ها یکسری توابع جاوا اسکریپ هستند تا شما بتوانید از نظر نمایشی، موضوعاتی را بسته یا باز کنید.

نحوه استفاده

برای استفاده بایستی wn-type='Collapse' قرار گیرد. سپس مقادیر پیش فرض تنظیم شود.

خصوصیت target

این خصلت مشخص میکند، چه موضوع یا موضوعاتی باید انتخاب شوند. برای مثال میتوانید (#id) موضوع مورد نظر باشد، یا کلاسی از آن (.class) و یا موضوعی با جنس خاص (div.class).
برای معرفی چند موضوع، اسم آنها را "," از هم جدا کنید. #id1, #id2, #id3, ...
برای معرفی دسته ای از قانونهای querySelectorAll استفاده کنید. برای اطلاع بیشتر میتوانید اینجا را مطالعه کنید.

خصوصیت remove

اگر میخواهید، قبل از اعمال تغییرات توسط خصوصیت target عملیاتهای قبلی بر روی موضوعات از بین برود، اسامی موضوعات مد نظر را در خصوصیت remove اعلام کنید. نحوه نام گذاری و مشخص کردن همانند خصوصیت target است.
تمام موضوعاتی که در این خصلت وجود دارد، کلاس show حذف و کلاس Collapsed به آن اضافه میشود.

خصوصیت target-mode

بطور پیش فرض، اگر موضوع در حال نمایش باشد، مخفی و اگر مخفی باشد، نمایش میدهد، به این حالت toggle میگویند.
اگر میخواهید در هر شرایطی فقط عملیات نمایش رخ دهد، از مقدار show استفاده کنید.
اگر میخواهید در هر شرایطی فقط عملیات مخفی کردن رخ دهد، از مقدار hide استفاده کنید.

نمایش

در این صفحه ما به صورت دستی کلاس alert را تغییر دادیم و به صورت پیش فرض display:none شده است. همچنین کلاس show برای آن طراحی شده و در آن display:block قرار داده شده است. این کار فقط برای آن است که به صورت پیش فرض موضوع هشدار مخفی باشد تا مثال های این صفحه قابل استفاده باشند.

طبیعی است، شما نیز برای استفاده از این موضوع بایستی عملی مشابه برای کنترل خود انجام دهید.


    <style>
        .alert {
            display: none;
        }

            .alert.show {
                display: block;
            }
    </style>

این یک پیام هشدار است از نوع اطلاع

این یک پیام هشدار است از نوع اخطار

مخفی کردن

در زمان مخفی کردن، ابتدا کلاس collapsing اضافه میشود، اگر میخواهید در هنگام مخفی شدن، افکتی داشته باشید، در این کلاس طراحی کنید، پس از اجرا این کلاس، هم کلاس collapsing و هم کلاس show از لیست کلاسهای موضوع مرتبط حذف میگردد.

این یک پیام هشدار است از نوع اطلاع

این یک پیام هشدار است از نوع اخطار

سوئیچ بین هم

این یک پیام هشدار است از نوع اطلاع

این یک پیام هشدار است از نوع اخطار

حذف وضعیت

در حذف همه، از خصوصیت remove استفاده شده است، یعنی قبل از اعمال تغییرات بر روی target تمام موضوعاتی که در خصوصیت remove معرفی شده، ابتدا کلاس show حذف و سپس کلاس Collapsed به آن اضافه شود.

با استفاده از این خصوصیت و نسبت دادن آن به موضوعات معرفی شده، شما قادر خواهید بود، بر روی دکمه درخواست کننده و موضوعات زیر مجموعه تعریف های متفاوتی داشته باشید. برای مثال آکاردئون یک مثال خوب از این نوع استفاده است.

در مثال زیر، تمامی موضوعاتی که زیر مجموعه container1 هستند که از جنس کلاس Collapse هستند، عملیات حذف اعمال میگردد.

این یک پیام هشدار است از نوع اطلاع

این یک پیام هشدار است از نوع اخطار

این یک پیام هشدار است از نوع هشدار

جاوا اسکریپت

شما میتوانید توسط جاوا اسکریپت نیز تنظیمات و عملیاتهای مختلف را انجام دهید.

خصوصیت target

عملیات همانند خصوصیت target است.

خصوصیت remove

عملیات همانند خصوصیت remove است.

خصوصیت targetmode

عملیات همانند خصوصیت target-mode است.

رویه collapse

با فراخوانی این رویه، انگار بر روی دکمه کلیک کردید و بایستی عملیات جمع شوندگی اجرا شود.

تنظیمات دستی

اگر شما از روش معرفی توسط wn-type استفاده کردید، هر زمان بخواهید میتوانید تغییرات را توسط جاوا اسکریپت انجام دهید.
برای دسترسی به کلاس جاوایی، بایستی اسم دکمه را داشته باشید و با فراخوانی آن از آرایه WN تنظیمات را طبق دستورات بالا انجام دهید.
WN('button1').wn.collapse();

این یک پیام هشدار است از نوع اطلاع

این یک پیام هشدار است از نوع اخطار

این یک پیام هشدار است از نوع هشدار