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

آموزش ایجاد scrollspy با bootstrap

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

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

Scrollspy یک مکانیزم مسیریابی می باشد که بازدید کنندگان را به بخش های مختلف یک صفحه ی دارای مقدار زیادی محتوا راهنمایی می کند. همچنین اهداف منو براساس اسکرول کردن موقعیت به طور خودکار برجسته می شوند تا به بازدیدکننگان نشان دهند که در کجای صفحه می باشند. این امر زمان را ذخیره کرده و محتویات صفحات شما راحت تر در دسترس بازدیدکنندگان قرار می گیرد.

مثال:

    

Section One

This is section one…

Section Two

This is section two…

Section Three

This is section three…

ایجاد scrollspy با استفاده از ویژگی های داده:

با اضافه کردن data-spy="scroll" به عنصری که قصد اکتشاف آن را دارید و data-target=".navbar" به راحتی می توانید رفتار scrollspy را به مسیریابی topbar خود اضافه کنید.

مثال:

    

        

        

    

    

iOS

iOS is a mobile operating system developed and distributed by Apple Inc.

SVN

Apache Subversion which is often abbreviated as SVN, is a software versioning and revision control system distributed under an open source license.

jMeter

jMeter is an Open Source testing software.

EJB

Enterprise Java Beans (EJB) is a development architecture for building highly scalable and robust enterprise level applications to be deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.

Spring

Spring framework is an open source Java platform that provides comprehensive infrastructure support for developing robust Java applications very easily and very rapidly.

Spring framework was initially written by Rod Johnson and was first released under the Apache 2.0 license in June 2003.

ایجاد scrollspy از طریق جاوا اسکریپت:

ممکن است تمایل داشته باشید scroll spy را به صورت دستی و با جاوا اسکریپت اضافه کنید – تنها کافیست روش scrollspy() بوت استرپ را با انتخابگرهای "id" یا "class" از navbar در کد جاوااسکریپت خود قرار دهید.

مثال:

    $(document).ready(function () {

        $(".scroll-area").scrollspy({ target: "#myNavbar" })

    });

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

.scrollspy('refresh')

هنگام استفاده از scrollspy همزمان با اضافه یا حذف یک عنصر از DOM، لازم است روشی مانند این روش را فرا بخوانید.

مثال:

    $(document).ready(function () {

        $('[data-spy="scroll"]').each(function () {

            var $spy = $(this).scrollspy('refresh');

        });

    });

روش های خاصی وجود دارند که ممکن است برای دلخواه سازی عملکرد scrolspy به روش scrollspy() بوت استرپ انتقال یابند.

Name
Type
Default Value
Description
offset
number
10
تعداد پیکسل ها برای آفست کردن از بالا درهنگام محاسبه ی موقعیت اسکرول.

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

Event
Description
activate.bs.scrollspy
زمانی که یک آیتم جدید توسط scrollspy فعال شود، این رویداد آغاز خواهد شد.

وقتی که یک آیتم جدید به وسیله ی scrollspy برجسته می شود پیام هشدار مثال زیر نمایش داده خواهد شد:

    $(document).ready(function () {

        $("#myNavbar").on("activate.bs.scrollspy", function () {

            var currentItem = $(".nav li.active > a").text();

            $("#info").empty().html("Currently you are viewing - " + currentItem);

        })

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

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

ارسال

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

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