طرز کار با context در html5

          حمیدرضا 
            بازدید : 1263
          شنبه 23 خرداد 1394
           نظرات (0)
        

context چیست؟

کانتکست (context) همان منویی است که وقتی شما در صفحات وب ، روی قسمتی از صفحه کلیک می کنید ، باز می شود و این منو دارای امکاناتی است که به شما کار کردن با صفحات را آسان تر می کند. در html5 امکانی ایجاد شده است که شما می توانید با استفاده از موجودیت (attribute) رویداد oncontextmenu به راحتی این منوی راست کلیک را با موارد دلخواه خودتان کامل تر کنید.

نکته: این امکان فعلا تنها در فایرفاکس کاربرد دارد و در دیگر مرورگر ها فعال نیست. (به تاریخ مطلب دقت کنید)

خب! برای ساخت یک منوی اختصاصی باید از تگ های زیر استفاده کنید:

<<<code>>>

<menu>

<menuitem> ... </menuitem>

</menu>

<<</code>>>

هر کدام از تگ های بالا دارای موجودیت هایی هستند که استفاده از آن ها را برای شما امکان پذیر می کند. در حالت عادی تگ های بالا در صفحه نمایش داده نمی شوند. تگ menu هنگامی پدیدار می شود که شما به آن یک آی دی اختصاص دهید و با موجودیت contextmenu در تگ مورد نظر خود ، این امکان را ایجاد کنید که بعد از کلیک راست روی این تگ ، منو نمایش داده شود. نوشتن این جور چیز ها بی فایده است! باید مثال زیر را ببینید:

نمایش یک مثال با دمو

اگر به مثال بالا با دقت توجه کنید ، خیلی از موارد را متوجه خواهید شد. اما با این حال توضیحات بیشتر در پایین را بخوانید:

برای ایجاد یک contextmenu ابتدا باید با استفاده از تگ menu و یک آی دی آن را تعریف کرد: (نکته: باید type برابر context باشد)

<<<code>>>

<menu type="context" id="toolstheme">

...

</menu>

<div contextmenu="toolstheme">یک تگ برای نمایش منو</div>

<<</code>>>

قسمت آبی رنگ: در این قسمت من یک تگ div ایجاد کرده ام که شما می توانید به جای آن از هر نوع تگ دیگری نیز استفاده کنید. در تگ div موجودیت contextmenu را برابر آی دی منویی که تعریف کرده بودیم ، قرار دادم. حالا اگر به منوی خود ، مواردی را اضافه کنیم و روی تگ کلیک راست کنیم ، منوی ما در بالای منوی اصلی مرورگر جای می گیرد و نمایش داده می شود.

اما اگر داخل تگ menu خالی باشد ، هیچ چیزی رد منوی ما نمایش داده نمی شود ، زیرا ما هنوز موارد منو را ایجاد نکرده ایم و فقط یک منو تعریف کرده ایم. برای ایجاد موارد برای یک منو از تگ menuitem استفاده می شود:

<<<code>>>

<menu type="context" id="toolstheme">

<menuitem label="this is a label for item" icon="a web image address" onclick="alert('a script');"></menuitem>

</menu>

<<</code>>>

قسمت قرمز رنگ: در این قسمت شما می توانید برای موردی که ایجاد کرده اید ، یک عنوان بنویسید. در صورت نبودن این قسمت یک مورد (item) بی معنی خواهد بود.

قسمت آبی رنگ: در اینجا شما می توانید آیکنی برای موردی که اضافه کرده اید تعریف کنید. برای مقدار باید آدرس یک تصویر از وب را وارد کنید و بعد از این کار ، در کنار عنوان آیتم شما ، این تصویر به عنوان آیکون نمایش داده می شود.

قسمت بنفش رنگ: در این قسمت شما باید با استفاده از جاوا اسکریپت مشخص کنید که بعد از کلیک روی این مورد چه اتفاقی بیفتد.

منوی خوبی به نظر می رسد. اما شاید دوست داشته باشید در آن منویی با چند زیر مجموعه اضافه کنید که وقتی موس روی یکی از موارد وارد شد ، چند مورد دیگر در کنار آن نمایش داده شود. (اگر مثال را دیده باشید ، منظور من را بهتر متوجه می شوید)

برای این کار باید درون تگ menu یک تگ منوی دیگر ایجاد کنید:

<<<code>>>

<menu id="toolstheme" type="context">

<menu label="2 item there is in me">

<menuitem label="item 1"></menuitem>

<menuitem label="item 2"></menuitem>

</menu>

<<</code>>>

نکته: تگ منو امکان گرفتن موجودیت (attribute) آیکون (icon) را ندارد.

برای آزمایش کد های خود از لینک زیر استفاده کنید:

خروجی ساز

ممنون از این که این مطلب را تا پایان مطالعه کردید. امیدوارم مفید بوده باشد.

اگر سوالی دارید در بخش نظرات یا انجمن بپرسید.

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2380	snakeeye
طراحی باکس دانلود	6	2530	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	8756	grimboy
انواع قالب اختصاصی	3	2147	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2579	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9188	jack7788