تگ dialog و کاربرد آن در html و طراحی سایت با html5

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

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

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

مثال ۱:

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

<p>Greetings, one and all!</p>

</dialog>

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

<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>

<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>

<button id="show">Show Dialog</button>

</div>

(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 یک کادر ظاهر میشود .

مثال ۳:

<!-- 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>

<p><label for="favAnimal">Favorite animal:</label>

<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>

(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

عنصر <dialog> یک تگ جدید در HTML5 است.

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

خاصیت ها

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

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

خاصیت ویژه عنصر

خاصیت عمومی

خاصیت رویداد

خاصیت ویژه عنصر

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

خاصیت های عمومی

تگ <dialog> از خاصیت های عمومی HTML پشتیبانی میکند

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

خاصیت های رویداد

تگ <dialog> از خاصیت های رویداد در 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	ontimeupdate
ondrop	onmouseout	onvolumechange
ondurationchange	onmouseover	onwaiting
onemptied	onmouseup

پشتیبانی مرورگر ها

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

عنصر	گوگل کروم	اینترنت اکسپلورر	فایرفاکس	سافاری	اپرا
<dialog>	Canary	پشتیبانی نمی کند	پشتیبانی نمی کند	۶٫۰	پشتیبانی نمی کند

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

پاسخ به کلیه سوالات شما در زمینه وب هاستینگ و مدیریت سرور در انجمن کامپایلر