X

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

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

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

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

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

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

مثال ۱:

Greetings, one and all!

برای درک بهتر، به مثال  ۲ دقت نمایید . در این مثال با تهیه یک دکمه برای فراهم کردن توانایی باز و بسته شدن از جاوا اسکریپت و برای اعمال بعضـی استـایل ها از 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

Close

Show Dialog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
<dialog id=“myFirstDialog” style=“width:50%;background-color:#F4FFEF;border:1px dotted black;”>
<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 >
<script type=“text/JavaScript”>
(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 همچنان با ما همراه باشید.

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

Categories: آموزش ها
iranvps writer: