آشنایی با تگ dialog و کاربرد آن در html

در ادامه سری آموزش های تگ های HTML می خواهیم در این پست به آموزش تگ dialog و کاربرد آن در html برای شما دوستان عزیز بپردازیم. امیدواریم مقاله آشنایی با تگ dialog و کاربرد آن در html مورد توجه و کاربرد شما قرار بگیرد. تا انتهای آموزش باما همراه باشید.

تگ dialog و کاربرد آن در html

برچسب dialog یک باکس یا کادر محاوره ای تعریف می کند . این عنصر در HTML قسمتـی از یک برنامه کاربردی را نشان خواهـد داد که کاربر خواهـد توانست با آن در تعامل باشد.

همراه با عنصر dialog از یک خصوصیت boolean به نام open بهره گیری می شود که این عنصر را “فعال” می کند . چنان چه این خصوصیت پاک شود، می بایست برای فعال کردن عنصر و باز و بسته کردن آن موقعی نیاز ، از یک اسکریپت (مثل جاوا اسکریپت) بهره گیری شود.

مثال ۱:

Greetings, one and all!

<dialog open><br /><br /><br />
<p>Greetings, one and all!</p><br /><br /><br />
</dialog>

برای درک بهتر، به مثال ۲ دقت نمایید . در این مثال با تهیه یک دکمه برای فراهم کردن توانایی باز و بسته شدن از جاوا اسکریپت و برای اعمال بعضـی استـایل ها از CSS درون خطی بهره گیری شده می باشد. (به طور معمول مناسـب تر می باشد از style sheet خارجی بهره گیری شود، ولی در این مثال بهره گیری از style درون خطی بهـتر خواهد بود).

The world is full of magical things patiently waiting for our wits to grow sharper. – Bertrand Russell

Close Show Dialog

The world is full of magical things patiently waiting for our wits to grow sharper. – Bertrand Russell

Show Dialog

<div>

<p><q>The world is full of magical things patiently waiting for our wits to grow sharper.</q> – <cite>Bertrand Russell</cite></p>

<button id=“hide”>Close</button>

</dialog>

<!— “Show” button —>

<button id=“show”>Show Dialog</button>

</div>

<!— JavaScript to provide the “Show/Close” functionality —>

(function() {

var dialog = document.getElementById(‘myFirstDialog’);

document.getElementById(‘show’).onclick = function() {

dialog.show();

};

document.getElementById(‘hide’).onclick = function() {

dialog.close();

};

})();

</script>

تگ dialog و کاربرد آن در html

همان گونه که مشاهده مینمایید با فشردن دکمه show dialog یک کادر ظاهر می شود .

مثال ۳:

Favorite animal: Brine shrimp Red panda Spider monkey

Cancel Confirm

Update details

Favorite animal:

Brine shrimp Red panda Spider monkey

Cancel

Confirm

Update details

<!– Simple pop-up dialog box, containing a form –>
<dialog id=”favDialog”>
<form method=”dialog”>
<section>
<p><label for=”favAnimal”>Favorite animal:</label>
<select id=”favAnimal” name=”favAnimal”>
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id=”cancel” type=”reset”>Cancel</button>
<button type=”submit”>Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id=”updateDetails”>Update details</button>
</menu>
<script>
(function() {
var updateButton = document.getElementById(‘updateDetails’);
var cancelButton = document.getElementById(‘cancel’);
// Update button opens a modal dialog
updateButton.addEventListener(‘click’, function() {
document.getElementById(‘favDialog’).showModal();
});
// Form cancel button closes the dialog box
cancelButton.addEventListener(‘click’, function() {
document.getElementById(‘favDialog’).close();
});
})();
</script>

تگ dialog و کاربرد آن در html

تفاوت میـان HTML 4.01 و HTML5

یک تگ تازه در HTML5 می باشد.

تگ dialog و کاربرد آن در html

ویژگی های تگ dialog

تگ HTML خواهـد توانست حاوی یک یا چند خصوصیت باشد که چگونگی عرضه در مرورگر را مشـخص میکنند. خصوصیت ها حاوی یک نام و یک مقدار می باشند که با علامت (=) از هم جدا شده اند. مقدار خصوصیت با علامت نقل قول احاطه می شود .

۳ نوع خصوصیت وجود دارد که شما خواهید توانست به تگ های HTML خود اضافه نمایید :

ویژگی خاص عنصر

ویژگی عمومی

ویژگی رویداد

وی

خاصیت	مقدار	شرح
open	open	فعال بودن عنصر dialog را به منظور تعامل کاربران با آن معیـن می کند . چنان چه که از این خصوصیت بهره گیری نشود عنصر dialog از نگاه کـرد کاربران پنهـان خواهد ماند .

ویژگی های عمومی

از خصوصیت های عمومی HTML حمایت می کند

accesskey	hidden	itemtype
class	id	lang
contenteditable	inert	spellcheck
contextmenu	itemid	style
dir	itemprop	tabindex
draggable	itemref	title
dropzone	itemscope	translate

ویژگی های رویداد

از خصوصیت های رویداد در HTML هم حمایت می کند .

onabort	onended	onmousewheel
oncancel	onerror	onpause
onblur	onfocus	onplay
oncanplay	onformchange	onplaying
oncanplaythrough	onforminput	onprogress
onchange	oninput	onratechange
onclick	oninvalid	onreadystatechange
oncontextmenu	onkeydown	onscroll
ondblclick	onkeypress	onseeked
ondrag	onkeyup	onseeking
ondragend	onload	onselect
ondragenter	onloadeddata	onshow
ondragexit	onloadedmetadata	onstalled
ondragleave	onloadstart	onsubmit
ondragover	onmousedown	onsuspend
ondragstart	onmousemove	ontimeبروزرسانی
ondrop	onmouseout	onvolumechange
ondurationchange	onmouseover	onwaiting
onemptied	onmouseup

حمایت مرورگر ها

اعداد معیـن شده در جدول پایین ، اولیـن ورژن ی مرورگرهایی که بطور تکمیل از این عنصر حمایت میکنند را معیـن می کند .

عنصر	گوگل کروم	اینترنت اکسپلورر	فایرفاکس	سافاری	اپرا
	Canary	حمایت نمی کند	حمایت نمی کند	۶٫۰	حمایت نمی کند

توجه: در زمان بهره گیری از این عنصر مد نظر داشته باشید که گوگل کروم (و احتمالا سافاری ورژن ۶ به بالا ) فقط مرورگری می باشد که از این عنصر حمایت می کند . با این حال، به منظور انجام این کار در کروم، می بایست chrome://flags/ را در آدرس مرتبه مرورگر گوگل کروم تایپ نمایید ، سپس مورد Enable experimental Web Platform features را فعال کرده و مرورگر را ری استارت نمایید .

خب دوستان به پایان مقاله آموزشی آشنایی با تگ dialog و کاربرد آن در html رسیدیم . از توجه و همراهی شما سپاسگزاریم . با آموزش سایر تگ های دیگر HTML همچنان با ما همراه باشید.

در صورتی که نیاز به اطلاعات بیشتر در زمینه روش ایجاد سرور مجازی و سرور اختصاصی ایران دارید کلیک نمایید.

آشنایی با تگ dialog و کاربرد آن در html