آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ایجاد ویجت accordion با bootstrap

در این آموزش فراخواهید گرفت که چگونه با تویتر بوت استرپ accordion ایجاد کنید.

ایجاد ویجت accordion با تویتر بوت استرپ:

منوها یا مسیریابی accordion به طور گسترده ای روی وب سایت ها برای مدیریت محتوای زیاد و لیست های مسیریابی استفاده می شود. مثال زیر به شما نشان خواهد داد که چگونه با استفاده از مولفه های پیش ساخته ی تویتر بوت استرپ یک ویجت accordion ساده ایجاد کنید.

مثال:

HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.

Twitter Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.

CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.

خروجی مثال بالا مانند تصویر زیر خواهد بود:

 آموزش ایجاد ویجت accordion با bootstrap

گسترش و یا سقوط عناصر از طریق ویژگی های داده:

تویتر بوت استرپ شما را قادر خواهد کرد تا بدون استفاده از مارک آپ accordion و نیاز به نوشتن کد جاوااسکریپت هر عنصر خاصی را گسترش داده یا از بین ببرید.

data-toggle="collapse" را به کنترل کننده ی عنصر ( مانند یک دکمه یا یک مکان نما که به وسیله ی کلیک کردن روی آن تمایل دارید عنصر دیگری را کالپس کنید.) به همراه data-target (برای دکمه ها) یا href (برای مکان نما)اضافه کنید تا کنترل را به یک عنصر collapsible اختصاص دهید.

ویژگی های data-target یا href یک انتخابگر CSS را برای به کار بردن collapse برای عنصر خاص قبول می کند و اگر دوست دارید در پیش فرض باز شود، گروه"in" را اضافه کنید.

مثال:







This is a simple example of expanding and collapsing individual element via data attribute. Click on the Toggle Buttonuttonto see the effect.

lt;/div>&

گسترش و سقوط عناصر از طریق جاوا اسکریپت:

ممکن است یک عنصر را به طور دستی و از طریق جاوا اسکریپت گسترش دهید – فقط روش collapse() بوت استرپ را با انتخابگر "id" یا "class" از عنصر قابل گسترش در کد جاوا اسکریپت جای دهید.

مثال:







This is a simple example of expanding and collapsing individual element via JavaScript. Click on the Simple Collapsible button to see the effect.

این ها گزینه های خاصی هستند که ممکن است به روش collapse() انتقال یابند تا عملکرد عنصر collapsible را به دلخواه در آورند.

Name
Type
Default Value
Description
parent
selector
false
همه ی عناصر collapsible دیگر تحت منبع خاص وقتی این عنصر نمایش داده شود، بسته خواهند شد.
toggle
boolean
true
عنصر collapsible مورد درخواست را اجرا می کند.

شما می توانید این گزینه ها را با استفاده از ویژگی های داده روی accordion نیز تنظیم کنید – فقط نام گزینه را به نام داده ضمیمه کنید، به عنوان مثال data-parent="#myAccordion", data-toggle="false" و غیره، همانطور که در اجرای پایه توضیح داده شد.

این ها روش های استاندارد collapse بوت استرپ می باشند.

.collapse(options)

این روش محتوا را به عنوان یک عنصر collapsible فعال می کند.

مثال:

    $(document).ready(function () {

        $(".btn").click(function () {

            $("#myCollapsible").collapse({

                toggle: false

            });

        });

    });

.collapse('toggle')

این روش یک عنصر collapsible را اجرا می کند ( نمایش یا پنهان کردن آن).

مثال:

    $(document).ready(function () {

        $(".toggle-btn").click(function () {

            $("#myCollapsible").collapse('toggle');

        });

    });

.collapse('show')

این روش یک عنصر collapsible را نشان می دهد.

مثال:

    $(document).ready(function () {

        $(".show-btn").click(function () {

            $("#myCollapsible").collapse('show');

        });

    });

.collapse('hide')

این روش یک عنصر collapsible را پنهان می کند.

مثال:

    $(document).ready(function () {

        $(".hide-btn").click(function () {

            $("#myCollapsible").collapse('hide');

        });

    });

گروه collapse بوت استرپ دارای رویدادهایی برای رسیدن به عملکرد collapse می باشد.

Event
Description
show.bs.collapse
هنگامی که روش show instance فراخوانده می شود، این رویداد فورا اتفاق می افتد.
shown.bs.collapse
وقتی که یک عنصر برای یوزر قابل رویت شده باشد، این رویداد آغاز می شود. این رویداد تا زمان کامل شدن فرایند تغییر CSS منتظر می ماند.
hide.bs.collapse
هنگامی که روش hide instance فراخوانده می شود، این رویداد فورا اتفاق می افتد.
hidden.bs.collapse
وقتی که یک عنصر برای یوزر قابل رویت نباشد، این رویداد آغاز می شود. این رویداد تا زمان کامل شدن فرایند تغییر CSS منتظر می ماند.

وقتی که تغییر یک عنصر collapsible به طور کامل انجام شده باشد، پیام هشدار مثال زیر نمایش داده می شود.

مثال:

    $(document).ready(function () {

        $("#myCollapsible").on('hidden.bs.collapse', function () {

            alert("Collapsible element has been completely closed.");

        });

    });
  • 3058
  •    1946
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .