آموزش 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>
خودتان امتحان کنید »
نوشته شده توسط احسان عباسی
بازدید: 3352