آشنایی با تگ 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
<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 همچنان با ما همراه باشید.
در صورتی که نیاز به اطلاعات بیشتر در زمینه روش ایجاد سرور مجازی و سرور اختصاصی ایران دارید کلیک نمایید.