دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۲
  • مرداد

جلسه ۳۱ : پلاگین Affix در Bootstrap 3

  • دسته‌بندی‌ها :
جلسه ۳۱ : پلاگین Affix در Bootstrap 3
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. در این آموزش قصد داریم تا شما را با یک پلاگین در فریم ورک bootstrap 3، که شباهت زیادی به پلاگین scrollspy در bootstrap 3 دارد آشنا کنیم. این پلاگین Affix نام دارد. و تفاوت عمده ی این پلاگین با scrollspy در این است که با حرکت نوار scroll به سمت پایین یا بالای صفحه حرکت می کند. و پس از رسیدن به بالاترین یا پایین ترین بخش صفحه وب، در آن بخش قفل می شود. و می توانید مانند پلاگین scrollspy، با استفاده از گزینه های Affix بین صفحات و بخش های مختلف وب سایت جابه جا شوید. در ادامه ی آموزش فوق برای آشنایی با پلاگین Affix در Bootstrap 3 و ترکیب پلاگین های Affix و scrollspy با ما همراه باشید.

      پلاگین Affix در Bootstrap 3

      پلاگین Affix باعث می شود که عناصر آن، در بخشی از صفحه وب قفل شود(جا به جا نمی شود). و اغلب از یک منوی navigation یا button با آیکون های خاصی برای جابه جایی بین صفحات وب سایت تشکیل شده است.

      پلاگین Affix رفتار خود را فعال و غیر فعال می کند(با تغییر مقدار CSS position ازstatic به fixed).

      این بستگی به موقعیت محل scroll دارد.

       

      پلاگین Affix در Bootstrap 3

      پلاگین Affix در Bootstrap 3

      با استفاده از Affix، زمانی که ما به بالا و پایین صفحه می رویم، این منو همیشه قابل مشاهده و قفل شده در موقعیت مورد نظر است.

      ایجاد منوی Affix

      مثال زیر چگونگی ایجاد یک منوی Affix افقی را نشان می دهد:

      مثال : 

      کد مثال زیر، یک منوی Affix عمودی را ایجاد می کند:

      مثال : 

      شرح کد فوق:

      صفت data-spy=”affix” باید به عنصری که قرار است تبدیل به Affix شود، اضافه گردد.

      صفت data-offset-top|bottom نیز برای تشخیص موقعیت scroll صفحه استفاده می شود.

      چگونگی عملکرد:

      منوی affix از سه کلاس .affix.affix-top و .affix-bottom برای تشخیص محل قفل شدن در صفحه استفاده می کند.

      می توانید با دستکاری position:fixed در کلاس .affix موقعیت و رفتار را تغییر دهید.

      در زمان پیماش نوار اسکرول، affix کلاسهای .affix-top یا.affix-bottom را با کلاس .affix جایگزین می کند.

      همچنین صفت position:absolute برای مواقع ضروری اضافه شده است.

      ترکیب پلاگین های Affix و scrollspy

      می توانید پلایگن های scrollspy  و Affix را با یکدیگر ترکیب کنید:

      مثال : 

      ایجاد منوی عمودی از تریکب scrollspy  و Affix

      مثال : 

      کلام آخر

      پلاگین Affix که موضوع آموزش این جلسه بود. شباهت زیادی به عملکرد پلاگین scrollspy دارد. شما می توانید با ترکیب این دو ویژگی در bootstrap 3 یک منوی کامل در وب سایت خود ایجاد کنید. امیدواریم که مباحث آموزش آشنایی با پلاگین Affix در Bootstrap 3 مورد توجه شما قرار گرفته باشد.

      QR:  جلسه ۳۱ : پلاگین Affix در Bootstrap 3
      به اشتراک بگذارید