آموزش foundation-نوار لغزنده

نوار لغزنده در فریم ورک foundation

یک نوار لغزنده به کاربر این امکان را می دهد که با حرکت دادن یک دستگیره، یک مقدار را از بین یک محدوده، انتخاب کند:

اسلایدرها به وسیله ی <div class="range-slider" data-slider> ایجاد می شوند. درون عنصر <div> ذکر شده، دو عنصر <span> به صورت <"span class="range-slider-handle> قرار دهید تا دستگیره ی نوار لغزنده که به شکل مربع آبی رنگ است ایجاد شود. سپس عبارت <"span class="range-slider-active-segment> را اضافه کنید تا یک نشان دهنده ی میزان انتخاب شده، به رنگ خاکستری قبل از دستگیره نمایش داده شود تا کاربر ببیند که چه اندازه ای را درگ(drag) کرده است.

نکته: اسلایدرها نیاز به جاوااسکریپت دارند پس فراموش نکنید که فایل جاوااسکریپت foundation را مقدار دهی اولیه کنید:

<div class="range-slider" data-slider>
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
</div>


<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

نتیجه:

خودتان امتحان کنید »

نوار لغزنده ی گرد شده و غیرفعال شده

کلاس های radius. و round. ، باعث می شوند که یک نوار لغزنده دارای گوشه های گرد شده باشد. کلاس disabled. نیز باعث می شود که نوار لغزنده غیرفعال شود:

مثال

نتیجه:

خودتان امتحان کنید »

نوار لغزنده عمودی

برای نمایش دادن نوار لغزنده به صورت عمودی، کلاس vertical-range. و خصوصیت ";data-options="vertical: true را اضافه کنید:

مثال

نتیجه:

خودتان امتحان کنید »

انتخاب مقدار پیش فرض برای نوار لغزنده

به طور پیش فرض، دستگیره ی نوار لغزنده در وسط این نوار قرار دارد(معمولا برابر با عدد 50 است). برای تغییر دادن مقدار پیش فرض نوار لغزنده، از خصوصیت "data-options="initial: num استفاده کنید:

مثال

نتیجه:

خودتان امتحان کنید »

نمایش دادن مقدار نوار لغزنده

این امکان نیز وجود دارد که به هنگام حرکت دادن دستگیره ی نوار لغزنده، مقدار نوار لغزنده را به نمایش بگذاریم و به طور داینامیک آن را آپدیت کنیم. برای این کار، کافی است که خصوصیت "data-options="display_selector:#id را به عنصر <div> مورد نظر اضافه کنید. و سپس یک عنصر را اضافه کنید تا مقدار نوار لغزنده در آن نمایش داده شود. توجه کنید که id این عنصر باید با مقدار خصوصیت ذکر شده برابر باشد.

نکته: عنصری که مقدار نوار لغزنده را نمایش می دهد می تواند هر جایی که بخواهید قرار بگیرد. تنها لازم است که آی دی آن با آی دی عنصر <div> برابر باشد(در این مثال: mySlider):

مثال

<span id="mySlider"></span>

<div class="range-slider" data-slider data-options="display_selector: #mySlider;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>

نتیجه- دستگیره را بکشید تا افکت را مشاهده کنید:

خودتان امتحان کنید »

ترکیب گزینه های data

در زیر یک مثال از ترکیب dispay-selector و data-option از نوع initial را مشاهده می کنید:

مثال

نتیجه:

خودتان امتحان کنید »

درجه بندی

به طور پیش فرض، درجه بندی در نوار لغزنده برابر با "1" است. برای تغییر دادن مقدار درجه بندی، خصوصیت ";data-options="step: num را اضافه کنید. در مثال زیر، مقدار درجه بندی برابر با 25 است. این بدین معنی است که در مثال زیر، میزان پرش دستگیره ی نوار لغزنده، برابر با 25 واحد است.

مثال

نتیجه- دستگیره ی نوار لغزنده را حرکت دهید تا تاثیر را مشاهده کنید:

خودتان امتحان کنید »

شخصی سازی محدوده ی نوار لغزنده

به طور پیش فرض، مقدار مینیمم و ماکزیمم محدوده ی نوار لغزنده از 0 تا 100 است. برای تغییر دادن این اعداد، گزینه های start و end را تغییر دهید. بعنوان مثال در مثال زیر، تنها می توانید یک عدد بین 1 تا 20 را انتخاب کنید: