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

آموزش ایجاد گردانه ی صفحه با bootstrap

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

ایجاد گردانه ی صفحه با تویتر بوت استرپ:

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

مثال:


فعال سازی گردانه با استفاده از تویتر بوت استرپ:

تویتر بوت استرپ شما را قادر به کنترل گردانه از طریق ویژگی های داده می کند. ویژگی data-slide کلمات کلیدی prev یا next راقبول می کند که موقعیت اسلاید را متناسب با موقعیت کنونی آن تغییر می دهد. ویژگی data-slide به طور نمونه روی دکمه های previous و next به کار گرفته می شود.

شما می وتوانید از data-slide-to برای انتقال به شاخص اسلاید در گردانه ی اسلایدها استفاده کنید.

مثال:


فعالسازی گردانه ها از طریق جاوا اسکریپت:

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

مثال:

    $(document).ready(function () {

        $("#myCarousel").carousel();

    });

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

Name
Type
Default Value
Description
interval
number
5000
زمان تاخیر را (به هزارم ثانیه) بین یک اسلاید و اسلاید بعدی در یک چرخش خودکار مشخص می کند. اگر اشتباه باشد گردانه به طور خودکار نمی چرخد.
pause
string
5000
زمان تاخیر را (به هزارم ثانیه) بین یک اسلاید و اسلاید بعدی در یک چرخش خودکار مشخص می کند. اگر اشتباه باشد گردانه به طور خودکار نمی چرخد.
interval
number
"hover"
با ورود ماوس چرخش گردانه را متوقف کرده و با خروج آن چرخش را دوباره از سر می گیرد.
wrap
boolean
true
مشخص می کند که آیا گردانه باید دارای چرخش مداوم باشد یا توقف داشته باشد.
keyboard
boolean
true
عکس العمل گردانه را نسبت به رویدادهای صفحه کلید مشخص می کند.

مثال زیر را برای مشاهده ی کار این گزینه ها چک کنید:

   $(document).ready(function () {

        $("#myCarousel").carousel({

            interval: 3000,

            pause: false

        });

    });

این گزینه ها را با استفاده از ویژگی های داده روی accordion نیز می توانید تنظیم کنید – تنها نام گزینه را به نام داده ضمیمه کنید – به عنوان مثال data-interval="3000", data-pause="hover" همانطور که در اجرای پایه توضیح داده شد.

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

.carousel(options)

این روش گردانه را از طریق گزینه های انتخابی آماده کرده و چرخش را از طریق آیتم ها آغاز می کند.

    $(document).ready(function () {

        $("#myCarousel").carousel({

            interval: 3000

        });

    });

مثال:

.carousel('cycle')

این روش گردانه را برای چرخش از طریق آیتم ها از چپ به راست آغاز می کند.

مثال:

    $(document).ready(function () {

        $(".start-slide").click(function () {

            $("#myCarousel").carousel('cycle');

        });

    });

.carousel('pause')

این روش چرخش گردانه را متوقف می کند.

مثال:

    $(document).ready(function () {

        $(".pause-slide").click(function () {

            $("#myCarousel").carousel('pause');

        });

    });

.carousel(number)

این روش گردانه را در یک چارچوب خاص می چرخاند.

مثال:

    $(document).ready(function () {

        $(".slide-three").click(function () {

            $("#myCarousel").carousel(3);

        });

    });

.carousel('prev')

Event
Description
slide.bs.carousel
وقتی روش slide instance فراخوانده شود، این روش فورا آغاز می شود.
slid.bs.carousel
وقتی که گردانه تغییر اسلاید خود را کامل کرده باشد، این روش آغاز می شود.

این روش گردانه را نسبت به آیتم قبلی می چرخاند.

مثال:

    $(document).ready(function () {

        $(".prev-slide").click(function () {

            $("#myCarousel").carousel('prev');

        });

    });

.carousel('next')

این روش گردانه را نسبت به آیتم بعدی می چرخاند.

    $(document).ready(function () {

        $(".next-slide").click(function () {

            $("#myCarousel").carousel('next');

        });

    });

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

وقتی که تغییر اسلاید یک گردانه برای یوزر کامل شده باشد پیام هشدار مثال زیر نشان داده می شود

   $(document).ready(function () {

        $('#myCarousel').on('slid.bs.carousel', function () {

            alert("The sliding transition of previous carousel item has been fully completed.");

        });

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

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

ارسال

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

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