آموزش foundation-عبور سریع

چاپ

عبور سریع در فریم ورک foundation

 اگر می خواهید که سایت خود را به کاربر معرفی کنید، می توانید از عبور سریع(joyride) در فریم ورک foundation استفاده کنید:

 چطور یک عبور سریع(joyride) را ایجاد کنیم

ایجاد یک عبور سریع(joyride) در فریم ورک foundation بسیار آسان می باشد:

مثال

<!-- Elements that control the tour stops -->
<h3 id="first">First stop!</h3>
<h3 id="second">Second stop!</h3>

<!-- The joyride: must be placed at the bottom of your page, but inside <body> -->
<ol class="joyride-list" data-joyride>
  <li data-id="first">
    <p>First stop. The ride has begun!</p>
  </li>
  <li data-id="second">
    <h4>Second Stop</h4>
    <p>Any valid HTML will work inside the Joyride.</p>
  </li>
  <li data-button="End">
    <h4>End Stop</h4>
    <p>The tour is over. You can either go back to the previous stop or close it.</p>
  </li>
</ol>

<!-- Start Joyride Upon Initialization -->
<script>
$(document).ready(function() {
    $(document).foundation('joyride', 'start');
})
</script>
خودتان امتحان کنید »

توضیح مثال

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

برای اینکه عبور سریع، ایجاد شود خصوصیت data-joyride و کلاس joyride-list. را به یک عنصر <ol> یا <ul> اضافه کنید.این بسیار مهم است که کدهای عبور سریع، در پایین صفحه و در عنصر <body> قرار بگیرند.   

حالا در درون لیست مورد نظر، از عناصر <li> به همراه خصوصیت "data-id="value استفاده کنید.دقت کنید که مقدار value در خصوصیت ذکر شده، باید برابر با id عناصری قرار گیرد که ایستگاه های عبور سریع را تشکل می دهند. بعنوان مثال، برای اینکه اولین ایستگاه را ایجاد کنیم، id عنصر <h3> (که برابر با first است)، باید برابر با مقدار خصوصیت data-id از یک عنصر <li> باشد(در این مثال "data-id="first). 

اگر که برای یک ایستگاه، یک id مشخص نکنید، این ایستگاه یک جعبه ی مودال را نمایش خواهد داد( مانند کاری که برای ایستگاه End انجام داده ایم). 

در آخر، برای اینکه عبور سریع را مقدار دهی اولیه کنید، نیاز دارید تا به وسیله ی کد ;(document).foundation('joyride', 'start')$عبور سریع را لود و مقداردهی اولیه کنید.