سبد (0)

تبلیغات

آموزش foundation-پیام رسان

پیام رسان ها(tooltips)

یک پیام رسان(tooltip) در واقع یک جعبه ی پاپ آپ است که زمانی که کابر ماوس خود را بر روی یک عنصر قرار می دهد، نمایش داده می شود:

برای ایجاد یک پیام رسان، خصوصیت data-tooltip را به یک عنصر اضافه کنید. برای مشخص کردن متنی که قرار است در داخل پیام رسان قرار بگیرد، از خصوصیت title استفاده کنید. 

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

مثال

<span data-tooltip title="Hooray!">Hover over me!</span>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>
خودتان امتحان کنید »

کلاس has-tip. یک کادر نقطه ای را به پایین متن قابل hover اضافه می کند. همچنین باعث می شود که متن مورد نظر به صورت پر رنگ(bold) در باید:

مثال

<span data-tooltip class="has-tip" title="Hooray!">Hover over me!</span>
خودتان امتحان کنید »

مکان گذاری پیام رسان ها

به طور پیش فرض، پیان رسان ها در پایین عنصر مورد نظر نمایش داده می شوند. 

برای مکان گذاری پیام رسان ها، از کلاس های tip-top. یا tip-left. یا tip-right. یا tip-bottom(پیش فرض) استفاده کنید. 

نکته: در صفحه های نمایش کوچک، پیان رسان در پایین نمایش داده می شود و به صورت 100% تمام عرض خواهد بود. 

مثال

<span data-tooltip class="has-tip tip-top" title="Hooray!">Top</span>
<span data-tooltip class="has-tip tip-bottom" title="Hooray!">Bottom</span>
<span data-tooltip class="has-tip tip-left" title="Hooray!">Left</span>
<span data-tooltip class="has-tip tip-right" title="Hooray!">Right</span>
خودتان امتحان کنید »

پیام  رسان با گوشه های گرد شده

کلاس های radius. و round. گوشه های گرد شده را برای پیام رسان ها به ارمغان می آورند:

مثال

<span data-tooltip class="has-tip" title="Hooray!">Default</span>
<span data-tooltip class="has-tip radius" title="Hooray!">Radius</span>
<span data-tooltip class="has-tip round" title="Hooray!">Round</span>
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی