آموزش foundation-پیام رسان
پیام رسان ها(tooltips)
یک پیام رسان(tooltip) در واقع یک جعبه ی پاپ آپ است که زمانی که کابر ماوس خود را بر روی یک عنصر قرار می دهد، نمایش داده می شود:
برای ایجاد یک پیام رسان، خصوصیت data-tooltip را به یک عنصر اضافه کنید. برای مشخص کردن متنی که قرار است در داخل پیام رسان قرار بگیرد، از خصوصیت title استفاده کنید.
نکته: به یاد داشته باشید که فایل جاوااسکریپت foundation را مقدار دهی اولیه کنید.
مثال
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
کلاس has-tip. یک کادر نقطه ای را به پایین متن قابل hover اضافه می کند. همچنین باعث می شود که متن مورد نظر به صورت پر رنگ(bold) در باید:
مکان گذاری پیام رسان ها
به طور پیش فرض، پیان رسان ها در پایین عنصر مورد نظر نمایش داده می شوند.
برای مکان گذاری پیام رسان ها، از کلاس های tip-top. یا tip-left. یا tip-right. یا tip-bottom(پیش فرض) استفاده کنید.
نکته: در صفحه های نمایش کوچک، پیان رسان در پایین نمایش داده می شود و به صورت 100% تمام عرض خواهد بود.
مثال
<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 radius" title="Hooray!">Radius</span>
<span data-tooltip class="has-tip round" title="Hooray!">Round</span>
- نوشته شده توسط احسان عباسی
- بازدید: 3495
