آموزش فریم‌ورک Foundation-بخش۹-جدول،پنل
آموزش فریم‌ورک Foundation-بخش9-جدول،پنل » در این مقاله، المان های جدول (table)، پنل (panel)، جدول قیمت (Price Tables) و پلاگین Joyride را معرفی می کنیم.

آموزش فریم‌ورک Foundation-بخش۹-جدول،پنل

بخش نهم: جدول، باکس های قیمت، پنل و…

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

 

المان‌های جدول، پنل، باکس قیمت، پلاگین JoyRide

 

در بخش قبل، المان‌های progress, alert, tooltip, … در فریم ورک foundation  را معرفی و بررسی کردیم.

در این بخش، المان های table ، pricing table و پلاگین Joyride را بررسی می کنیم.

 

پنل ها (Panels):

با تعریف کلاس panel برای یک div، اطراف این div دارای border کمرنگی خواهد شد و نیز رنگ پس زمینه آن نیز بصورت خاکستری می شود و padding نیز اعمال می شود. کد زیر را در نظر بگیرید:

<div class="large-6 columns">

    <div class="panel">      

        <p id="firstStop">We have a simple selection of hosting packages for you to choose from, these will work fantastically for any company. With ultra fast mySQL database connections, content management systems really fly. Add to this 24/7 customer support and 99.9% uptime and you've got a great hosting package.</p>      

    </div>

</div>

 

تصویر را خواهیم داشت:

 

پنل (Panels) در فاندیشن

 

جداول قیمت (Pricing Tables):

یکی از عواملی که باعث می شود یک فرد، وب سایتی طراحی و مدیریت کند، می تواند فروش اجناس و کالا باشد. بنابراین، این بخش یکی از بخش های مهم هر وب سایتی می تواند باشد. پس مسلما فریم ورک قدرتمندی مثل فاندیشن (Foundation) المان جدول قیمت (pricing table) را پوشش داده است. به لیست نامرتب زیر دقت کنید:

<ul class="pricing-table">

    <li class="title">Startup</li>

    <li class="price">$9.95</li>

    <li class="description">An awesome package to get any company onto their feet. With instant setup and magic money making plugins.</li>

    <li class="bullet-item">1 Database</li>

    <li class="bullet-item">5GB Storage</li>

    <li class="bullet-item">20 Users</li>

    <li class="cta-button"><a class="button round" href="#">Buy Now</a></li>

</ul>

 

مشاهده می شود که به ul کلاس pricing-table را اختصاص داده ایم. در این UL تعدادی  li می توانیم تعریف کنیم با کلاس های زیر:

Title , Price , Description , bullet-item , cta-button

برای تعریف li هایی که ویژگی های هر محصول را بیان می کنند باید از کلاس bullet-item استفاده کرد. تصویر زیر را ملاحظه کنید:

 

جداول قیمت (Pricing Tables)

 

مطابق شکل بالا، می توانید از چندین ul با کلاس pricing-table برای ایجاد رقابت بین محصولات استفاده کنید.

 

جداول استاندارد (Standard Tables):

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

<table>

  <thead>

    <tr>

      <th width="200">Startup</th>

      <th width="200">Enterprise</th>

      <th width="200">Global Corporation</th>

    </tr>

  </thead>

  <tbody>

    <tr>

        <td>1 Database</td>

        <td>5 Database</td>

        <td>10 Database</td>

    </tr>

    <!–more rows–>

    <tr>

        <td>No Backups</td>

        <td>50GB Backups</td>

        <td>100GB Backups</td>

    </tr>

  </tbody>

</table>

 

تصویری مانند شکل زیر خواهیم داشت:

 

جداول استاندارد (Standard Tables)

 

پلاگین Joyride:

توسط این پلاگین می توانید برای کاربران وب سایت تان در یک صفحه تور برگزار کنید!

حتما تا بحال با این ویژگی در وب سایت های گوناگون برخورد کرده اید. ابتدا تصویر زیر را نگاه کنید:

 

پلاگین Joyride در فریم ورک foundation

پلاگین Joyride در فریم ورک فاندیشن

 

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

پیاده‌سازی راهنمای قدم به قدم:

برای پیاده سازی این قابلیت در وب سایت خود، ابتدا یک ol با کلاس joyride-list برای آن تعریف کنید و یک اتریبیوت data-joyride بدون هیچ مقداری. درون این ol تمام مراحلی که می خواهید نمایش دهید را در li تعریف می کنید. برای اینکه تولتیپ مربوط به هر بخش از وب سایت بدرستی در روی آن بخش نمایش داده شود باید مطمئن شوید که ID آن div با اتریبیوت data-id هر li برابر باشد. اگر id هر مرحله را مشخص نکنید، joyride مانند modal کار میکند و پیغام ها را در وسط صفحه نمایش می دهد.

کد زیر را برای تعریف joyride در نظر بگیرید:

<!– At the bottom of your page but inside of the body tag –>

<ol class="joyride-list" data-joyride>

  <li data-id="firstStop" data-text="Next" data-options="tip_location: top; prev_button: false">

    <p>Hello and welcome to the Joyride <br>documentation page.</p>

  </li>

  <li data-id="numero1" data-class="custom so-awesome" data-text="Next" data-prev-text="Prev">

    <h4>Stop #1</h4>

    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>

  </li>

  <li data-id="numero2" data-button="Next" data-prev-text="Prev" data-options="tip_location:top;tip_animation:fade">

    <h4>Stop #2</h4>

    <p>Get the details right by styling Joyride with a custom stylesheet!</p>

  </li>

  <li data-button="End" data-prev-text="Prev">

    <h4>Stop #3</h4>

    <p>It works as a modal too!</p>

  </li>

</ol>

برای تعریف متن داخل دکمه های بعدی و قبلی از اتریبیوت های زیر استفاده کنید:

  • اتریبیوت data-text برای تعریف نام دکمه بعدی
  • اتریبیوت data-prev-text برای تعیین نام دکمه قبلی

 

فریم فاندیشن، تنظیمات دیگری نیز برای این پلاگین خود در نظر گرفته است که برای کسب اطلاعات بیشتر، به وب سایت مرجع فاندیشن مراجعه کنید.

در آخرین بخش از آموزش فریم ورک فاندیشن، المان های منوی چسبنده، تصاویر بندانگشتی، ویدیوی ریسپانسیو و… را بررسی می کنیم.

 

منبع: https://webdesign.tutsplus.com/tutorials/foundation-for-beginners-joyride-interchange-tables-and-panels–webdesign-13443


برچسب‌ها:

pricing tableپلاگین joyrideپنل در فاندیشنجدول در foundationجدول در فاندیشنجدول قیمتجدول قیمت در foundationطراحی جدول در فاندیشن

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

6 − چهار =