14 )  صفت عمومی contexmenu   :

🌟   خواندن چیزهایی که کاربردی ندارند ، برای هر کسی دشوار و خسته کننده است . متاسفانه در زبان Html5  که بیش از یک و نیم سال از تولدش میگذرد ، امکاناتی وجود دارد که هنوز هم توسط مرورگرها پشتیبانی نمی شود و صرفا نوید استفاده در آینده را می دهند . مثل صفت translate در درس قبل و امکانات دیگری که در آینده خواهند آمد .

🌟   صفت contextmenu نیز همین حکایت را دارد . یعنی عملا در هیچ مرورگری کار نمی کند . اما چون قرار بر کامل بودن آموزش های دوره الا در موارد استثنا است ، لذا نحوه ی کارکرد این صفت را به صورت کامل بیان می کنیم .

🌟   برای شما آشناست که زمانی که در ویندوز کلیک راست می کنید ، یک منو با چند گزینه ظاهر می شود اما زمانی که در صفحه ی وب کلیک راست کنیم ، منوی اختصاصی مرورگر ظاهر می شود و ربطی به المان صفحه ندارد .

🌟   زبان html5 این قابلیت را دارد که برای یک المان ، کلیک راست تعیین کنیم و زمانی که روی المان کلیک راست کردیم ، منویی که ما برای آن ساختیم ، ظاهر شود . یادگیری کامل این صفت نیاز به دانستن دو المان menu و menuitem و شاید حتی مقداری جاوااسکریپت دارد .

🌟  نحوه ی استفاده از صفت contenxtmenu :

فرض کنید می خواهیم المان p ما ، این خاصیت کلیک راست را داشته باشد و با کلیک راست کردن ، یک منو با سه گزینه ظاهر شود .

1  ایتدا باید صفت contextmenu را در المان p ست کنیم . مقداری که این صفت می گیرد ، یک نام دلخواه است که از آن در مراحل بعدی استفاده خواهیم کرد .

<p contextmenu="exname" >content</p>


فرض می کنیم محتوای المان p یک قطعه متن باشد .

<p contextmenu="exname" >hello world!</p>



2  اکنون باید المان menu با دو صفت مهم type و id را درون المان p ایجاد کنیم :


<p contextmenu="exname" >hello world!
        <menu type="" id="" ></menu>
</p>


صفت type می تواند سه مقدار بگیرد که مقدار context مدنظر ماست . باقی موارد را در قسمت اختصاصی المان <menu> یاد خواهید گرفت .
صفت id نیز باید مقداری که در صفت contextmenu قرار دادیم را بگیرد پس تا الآن داریم

<p contextmenu="exname" >hello world!
        <menu type="context" id="exname" ></menu>
</p>



3  حالا باید گزینه های منو را تعیین کنیم . هر گزینه با یک المان menuitem ایجاد می شود . هر المان menuitem ، می تواند دارای صفت های مختلفی باشد که به موقع همه ی آنها را بررسی می کنیم . در اینجا فقط به صفت ضروری  lable و صفت غیرضروری icon پرداخته می شود :


<menuitem lable="" icon="" ></menuitem>


در صفت lable ، نام گزینه یعنی همان متنی که در گزینه می آید قرار می گیرد و در صفت icon آدرس عکس که کنار متن در گزینه می آید قرار می گیرد .

4  جمع بندی :


<p contextmenu="exname" >hello world!

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

              <menuitem lable="گزینه اول منو" icon="آدرس عکس کنار گزینه ی اول منو" ></menuitem>
              <menuitem lable="گزینه دوم منو" icon="آدرس عکس کنار گزینه ی دوم منو" ></menuitem>
              <menuitem lable="گزینه سوم منو" icon="آدرس عکس کنار گزینه ی سوم منو" ></menuitem>

      </menu>
</p>


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

🌟  متاسفانه چون این صفت توسط هیچ مرورگری پشتیبانی نمی شود ، لذا نمی توانیم نتیجه کار را ببینیم .


برای دریافت مطالب در تلگرام خود ، عضو کانال تلگرامی html5 شوید.