آموزش فریم‌ورک Foundation-بخش۸-alert-tooltip

آموزش فریم‌ورک Foundation-بخش۸-alert-tooltip

بخش هشتم: آموزش المان‌های progress, alert, tooltip, …

آموزش المان‌های progress, alert, tooltip, …

 

المان‌های Tooltip، Chart، Progress، Alert

 

در مقاله قبل، نحوه شخصی سازی فرم تماس با را در فریم ورک Foundation آموزش دادیم. در این بخش از آموزش فریم ورک فاندیشن، المان های Progress و Alert و Tooltip را بررسی می کنیم و از آنها در یک فرم نمونه استفاده خواهیم نمود.

 

تولتیپ (Tooltip):

المان Tooltip برای نمایش توضیحی درباره یک لینک، تصویر، چک باکس و… بکار می رود. در مثال این مقاله می خواهیم درباره یک المان چک باکس بنام Send me spam، توضیح اجمالی بدهیم. ابتدا به تصویر زیر نگاه کنید:

 

تولتیپ (Tooltip) در فاندیشن

 

سپس کد زیر را مشاهده کنید:

<label class="has-tip">

    <span class="has-tip" title="Don't worry we won't really send you any spam this is just to display a checkbox." data-tooltip="" data-width="300">Send me spam</span>

    <input style="display: none;" type="checkbox" checked="checked" />

</label>

 

همانطور که مشاهده می کنید، به المانی که می خواهیم تولتیپ برای آن نمایش داده شود کلاس has-tip را اضافه می کنیم و یک اتریبیوت بنام data-tooltip برای span مربوطه با مقدار خالی تعریف می کنیم (data-tooltip=””). با تعریف اتریبیوت data-width می توانید طول تولتیپ را مشخص کنید. و در نهایت در اتریبیوت title باید متن موردنظر خود را جهت نمایش به شکل تولتیپ تعریف کنید.

 

افزودن تعامل (Adding Interactivity):

در مقالات قبل، نحوه تعریف و استفاده از المان های فرم در فریم ورک فاندیشن را آموزش دادیم. در این مقاله، می خواهیم یک لایه جدید به المان های قبلی فرم بیافزاییم. توسط افزودن مراحل (stages) به دکمه ارسال فرم (Submit Button). یک المان Progress (برای نمایش مقدار پیشرفت پر شدن فرم) و یک پیامی مبنی بر موفقیت آمیز بودن ارسال فرم خواهیم داشت و در نهایت ورودی های کاربر را پس از ارسال فرم، پاک می کنیم. مسلما تا وقتی که این فرم را به یک زبان سمت سرور (مانند php) متصل نکنیم، این فرم بصورت عملی کار نخواهد کرد. همچنین می توانید توسط Ajax باعث شوید تا صفحه وب پس از ارسال فرم، بارگذاری مجدد (Refresh) نشود و مثلا یک تصویر loading gif به کاربر نمایش دهیم. برای کسب اطلاعات بیشتر و یادگیری ارسال فرم بصورت آژاکسی، به مقاله وب سایت Tutsplus مراجعه نمائید.

المان Progress:

می توانید در بالای دکمه ارسال فرم، المان Progress را تعریف کنید و از همان کلاس های تعریف شده برای دکمه (مانند rounded) استفاده کنید. تصویر زیر را مشاهده کنید:

 

افزودن تعامل (Adding Interactivity)

 

با تعریف کد زیر یک Progress bar خواهید داشت:

<div class="progress round" id="progress" style="display: none;"></div>

شخصی سازی المان progress:

کدهای زیر را در نظر بگیرید. ۴ المان progress تعریف شده است با رنگ ها و width های متفاوت:

<div class="secondary progress" role="progressbar" tabindex="0" aria-valuenow="25" aria-valuemin="0" aria-valuetext="25 percent" aria-valuemax="100">

  <div class="progress-meter" style="width: 25%"></div>

</div>

<div class="success progress">

  <div class="progress-meter" style="width: 50%"></div>

</div>

<div class="warning progress">

  <div class="progress-meter" style="width: 50%"></div>

</div>

<div class="alert progress">

  <div class="progress-meter" style="width: 75%"></div>

</div>

 

در المان اول، رنگ progress خاکستری (secondary) می باشد و دارای طول ۲۵%

در المان دوم، رنگ progress سبز (success) می باشد و دارای طول ۵۰%

در المان سوم، رنگ progress زرد (warning) می باشد و دارای طول ۷۵%

در المان چهارم، رنگ progress قرمز (alert) می باشد و دارای طول ۷۵%

 

تصویر زیر نمایانگر نحوه نمایش این progressbar ها در مرورگر می باشد:

 

المان progress در فریم ورک foundation

 

نمایش پیام به کاربر:

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

 

نمایش پیام به کاربر

 

کد مربوط به نمایش پیام موفقیت آمیز بودن بصورت زیر است:

<div class="alert-box success" style="display: none;" data-alert="">Success! Your message has been sent.

 <a class="close" href="#">×</a></div>

کاربرد کلاس alert-box:

برای داشتن یک باکس پیام خطا یا اخطار یا موفقیت، کلاس alert-box را برای div تعریف می کنیم و برای سبز شدن این باکس، کلاس success را به آن اعمال می کنیم. اتریبیوت data-alert را نیز بصورت رشته خالی تعریف می کنیم. درون این div، پیام موردنظر خود را می نویسیم. اگر یک تگ anchor (لینک) با کلاس close تعریف کنیم، کاربر می تواند باکس خطا را ببندد.

کدهای زیر را در نظر بگیرید:

 

<div data-alert class="alert-box success radius">

  This is a success alert with a radius.

  <a href="#" class="close">&times;</a>

</div>

<div data-alert class="alert-box warning round">

  This is a warning alert that is rounded.

  <a href="#" class="close">&times;</a>

</div>

<div data-alert class="alert-box info radius">

  This is an info alert with a radius.

  <a href="#" class="close">&times;</a>

</div>

<div data-alert class="alert-box alert round">

  This is an alert – alert that is rounded.

  <a href="#" class="close">&times;</a>

</div>

<div data-alert class="alert-box secondary">

  This is a secondary alert.

  <a href="#" class="close">&times;</a>

</div>

 

با تعریف div های فوق، ۴ مدل از باکس های هشدار را بصورت تصاویر زیر ایجاد کرده ایم:

 

نمایش alert در فریم ورک فاندیشن

 

نحوه تعاملی کردن المان ها:

برای تعاملی کردن (انیمیشن و افکت) این المان هایی که در این بخش فراگرفته اید، می توانید کد جاوا اسکریپت زیر را تعریف کنید:

var submitButton = $('#submitme');              // Variable to cache button element

var progressBar = $('#progress');               // Variable to cache progress bar element

var progressBarMeter = $('#progress .meter');   // Variable to cache meter element

var alertBox = $('.alert-box');                 // Variable to cache meter element

var closeButton = $('.close');                  // Variable to cache close button element

 

$(submitButton).click(function() { // Initiates the send interaction

    $(this).fadeOut(500); // Fades out submit button when it's clicked

    setTimeout(function() { // Delays the next effect

        $(progressBar).fadeIn(500); // Fades in the progress bar

        $(progressBarMeter).animate({width : '100%'},2000); // Animates the progress bar

        setTimeout(function() { // Delays the next effect

            $(progressBar).fadeOut(500); // Fades out progress bar when animation completes

            setTimeout(function() { // Delays the next effect

                 $(alertBox).fadeIn(500); // Fades in success alert

            }, 500);

        }, 2500);

    }, 500);

});

 

در مقابل هر دستور در هر خط، کامنتی وجود دارد که توضیح کوتاهی راجع به آن خط داده است.

 

ریست کردن فرم (Resetting The Form):

از کد زیر می توانید برای ریست کردن المان های فرم مانند input و progress و alert استفاده کنید.

$(closeButton).click(function() { // Initiates the reset function

    $(alertBox).fadeOut(500); // Fades out success message

    $(progressBarMeter).css({width : '0%'}); // Resets progress bar

    setTimeout(function() { // Delays the next effect

        $('input, textarea').not('input[type=submit]').val(''); // Resets the input fields

        $(submitButton).fadeIn(500); // Fades back in the submit button

    }, 500);

        return false; // This stops the success alert from being removed as we just want to hide it

});

 

همانطور که مشاهده می کنید، هر المان را با انیمیشن و با یک افکت خاصی محو کرده ایم و بسته ایم.

 

ابزار مفید (Useful Tools):

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

 

نمودار chartjs در فریم ورک فاندیشن

 

نمودارهای chartjs از المنت canvas تکنولوژی HTML5 استفاده می کنند.

در بخش نهم از سری آموزشی فریم ورک foundation، المان های جدول (table)، پنل (panel)، جدول قیمت (pricing table) و… را بررسی می کنیم. 

 

منبع: https://webdesign.tutsplus.com/tutorials/foundation-for-beginners-progress-alerts-tooltips-and-the-elusive-mega-drop–webdesign-13195


برچسب‌ها:

alert boxcontact formform resetprogresstooltipتولتیپریست فرمنمایش alertنمودار chart.jsنمودار چارتنوار پیشرفت

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

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

10 − دو =