سورس کامل به همراه پیشنمایش تایم لاین jqruey , css

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

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

ایجاد ساختار

ساختار HTML تشکیل شده است که توسط دو دستور اصلی لیست: یکی از اولین حاوی تاریخهایی که جدول زمانی و دوم حوادث. 
یک افزونه ul.cd-timeline-navigationبرای فلش های ناوبری استفاده شده است و span.filling-lineبرای ایجاد اثر پر شدن هنگام انتخاب یک رویداد جدید.

<section class="cd-horizontal-timeline">
   <div class="timeline">
      <div class="events-wrapper">
         <div class="events">
            <ol>
               <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
               <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
               <!-- other dates here -->
            </ol>

            <span class="filling-line" aria-hidden="true"></span>
         </div> <!-- .events -->
      </div> <!-- .events-wrapper -->

      <ul class="cd-timeline-navigation">
         <li><a href="#0" class="prev inactive">Prev</a></li>
         <li><a href="#0" class="next">Next</a></li>
      </ul> <!-- .cd-timeline-navigation -->
   </div> <!-- .timeline -->

   <div class="events-content">
      <ol>
         <li class="selected" data-date="16/01/2014">
            <h2>Horizontal Timeline</h2>
            <em>January 16th, 2014</em>
            <p> 
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
            </p>
         </li>

         <li data-date="28/02/2014">
            <!-- event description here -->
         </li>

         <!-- other descriptions here -->
      </ol>
   </div> <!-- .events-content -->
</section>

افزودن سبک و دستورالعمل

بیایید از سبک رویداد شروع کنیم: همه آیتم ها به سمت چپ، خارج از viewport ( translateX(-100%)) نمایش داده می شوند؛ .selectedکلاس به رویداد مورد قابل مشاهده است آن را به حرکت به عقب به دید ( translateX(0)).

4 کلاس استفاده شده است برای ایجاد انیمیشن های کشویی از: .enter-right/ .enter-leftکلاس های اضافه شده به این رویداد آیتم انتخاب ورود به دید از سمت راست / چپ، و .leave-right/ .leave-leftکلاس های اضافه شده به مقاله رویداد در حال حرکت به سمت راست / چپ در حالی که ترک دید. این کلاس ها استفاده می شود به درخواست دو انیمیشن های CSS های مختلف: cd-enter-right(برای  .enter-right و .leave-leftکلاس) و  cd-enter-left(برای  .enter-leftو .leave-right کلاس).

.cd-horizontal-timeline .events-content {
  position: relative;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  opacity: 0;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, 
.cd-horizontal-timeline .events-content li.leave-right {
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-direction: reverse;
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}

درباره جدول زمانی: موقعیت هر تاریخ در طول جدول زمانی با استفاده از jQuery تنظیم می شود. داده ها در طول جدول زمانی به طور مساوی توزیع نمی شوند، اما فاصله بین یک تاریخ و یک بعدی متناسب با تفاوت بین این تاریخ ها است.

اول از همه، در فایل main.js، فاصله زمانی بین دو تاریخ متوالی را با استفاده از  eventsMinDistanceمتغیر تنظیم می کنیم؛ در مورد ما، ما مجموعه eventsMinDistance= 60 (بنابراین حداقل فاصله 60px). سپس همه تفاوت های بین یک تاریخ و یک بعد را ارزیابی می کنیم؛ برای انجام این کار ما از data-dateویژگی اضافه شده به هر تاریخ استفاده می کنیم. حداقل اختلاف به عنوان مرجع برای ارزیابی فاصله بین دو تاریخ متوالی استفاده می شود.

به عنوان مثال، بیایید حدس بزنیم حداقل تفاوت موجود 5 روز است؛ این بدان معنی است که فاصله در طول جدول زمانی بین دو تاریخ جدا شده با گذشت 5 روز 60 پیکسل خواهد بود، در حالی که بین دو رویداد که با گذشت 10 روز جدا شده 120 پیکسل خواهد بود.

درباره فرمت تاریخ: از تاریخ قالب DD / MM / YYY استفاده کردیم، اما شما همچنین می توانید زمان را اضافه کنید، اگر لازم است که آن را در حساب کاربری خود قرار دهید. 3 فرمت تاریخ مختلفی که می توانید استفاده کنید وجود دارد:

• DD / MM / YYY -> فقط روز؛
• DD / MM / YYYYTHH: MM -> اگر شما نیز باید زمان را در نظر بگیرید (به عنوان مثال، 02/10 / 2015T19: 45)؛
• HH: MM -> فقط زمان (برای رویدادهای اتفاق می افتد در همان روز).

نکته آخر : data-dateبرای تاریخ یک جدول زمانی استفاده می شود نیز باید به مورد رویداد مربوطه (موارد لیست در داخل .events-contentعنصر) تنظیم شود. به این ترتیب، هنگامی که یک کاربر یک تاریخ جدید را در طول جدول زمانی انتخاب می کند، می تواند مورد رویداد متناظر را نشان دهد.