آموزش html5 جلسه ی نوزدهم

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 شوید.

آموزش html5 جلسه ی هجدهم

🌷  آموزش html5 جلسه ی هجدهم


13  )  صفت عمومی id :

🌟 یکی از صفات بسیار پرکاربرد زبان html5 ، صفت id می باشد . اگر از ابتدای دروس ما را همراهی کرده باشید ، گفتیم که این صفت و صفت class برای نام گذاری المان به کار می رود و بعدها از این نام می شود استفاده های مختلفی کرد .

🌟 هم از id برای اضافه کردن کدهای جاوااسکریپت به المان استفاده می شود . هم برای اضافه کردن استایل های css در دو حالت external و internal استفاده می شود و هم برای اتصال دادن بعضی المان به المان های دیگر . لذا دامنه ی بزرگتری از صفت عمومی class دارد .

🌟 مقداری که صفت id می گیرد ، صرفا یک نام دلخواه است و معرف آن المان می باشد .

<element id="" >

🌟 یک فرق مهم بین صفت class و صفت id اینست که نام کلاس لازم نیست اختصاصی باشد . یعنی می توانیم به ده المان ، نام کلاس یکسان دهیم . اما نام id فقط باید یکی باشد یعنی اختصاصی باشد و نمی توانیم یک نام را به بیش از یک المان اختصاص دهیم

🌟 این صفت توسط همه ی مرورگرها پشتیبانی می شود .

ویژگی های نامی که به عنوان id می دهیم :

1⃣  باید حداقل یک کاراکتر باشد .

2⃣  بین حروف نباید space باشد .

3⃣  این نام به حروف کوچک و بزرگ حساس نیست .

🌟 مثال عملی :  

می خواهیم با استفاده از صفت عمومی id ، یک سری استایل های css را به صورت internal به المان body دهیم . استایل های ما شامل تغییر رنگ و اندازه فونت می باشد :

1  )  نوت پد را باز کنید . کدهای زیر را در آن تایپ کنید ! سپس فایل را با فرمت html. ذخیره کنید .

<!doctype html>
<html>
<head>
<style>
#exname{
color:red;
font-size:20px;
}
</style>
</head>
<body id="exname">
hello world !
</body>
</html>

همانطور که مشاهده می کنید ، ما برای اینکه رنگ متن و فونت خودمان را با استایل های css و روش internal اعمال کنیم . باید ابتدا یک نامی به المان بدهیم . این نام را می توانستیم هم با صفت class و هم  با صفت id بدهیم . سپس باید کدهای css را درون المان style قرار دهیم . المان style را می توانیم در هرجای کدها استفاده کنیم ولی بهتر و معمول تر اینست که در المان head قرار دهیم . اکنون با فرض اینکه زبان css را می دانیم ، کدهای موردنظر را در این استایل قرار می دهیم . و همانطور که در کدهای css می بینید ما از id برای معرفی المان خودمان استفاده کردیم . علامت # هم نشان دهنده ی id بودن آن است . چنانچه در مورد کلاس از . استفاده می کردیم


اکنون فایل را با مرورگر ( ترجیحا فایر فاکس ) باز کنید . می بینید که کدهای css ما به درستی روی محتوای المان body اعمال شدند .

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

آموزش html5 جلسه ی شانزدهم

11 ) صفت عمومی spellcheck :

🌟  برای اینکه بتوانیم متن ورودی کاربر را از لحاظ درست بودن لغوی و ساختار گرامری چک و اعتبار سنجی کنیم ، از صفت عمومی spellcheck استفاده می کنیم .

🌟  این صفت یه صورت خاص معمولا در فرم ها استفاده می شود . اما در همه ی المان ها قابل استفاده است . چون با استفاده از صفت عمومی contenteditable می شود ، هر محتوایی را editable کرد . زمانی که کاربر شروع کند به edit محتوا ، اعتبار سنجی نیز صورت می گیرد .

🌟  زبان html5 برای اعتبارسنجی فرم ها ، امکانات خوبی به خودش اضافه کرده است .

🌟  این صفت توسط همه ی مرورگرها پشتیبانی می شود .

🌟  ساختار این صفت عمومی به صورت زیر است :

<element spellcheck="value" >

🌟  این صفت قادر است دو مقدار بگیرد :

1 )  مقدار false : یعنی از لحاظ لغوی و گرامری ، چک و اعتبارسنجی نشود ( پیشفرض )

2 )  مقدار true : یعنی از لحاظ لغوی و گرامری ، چک و اعتبارسنجی بشود .

🌟 مثال عملی :

می خواهیم یک متنی که خاصیت contenteditable آن فعال است را زمانی که کاربر edit می کند ، از نظر لغوی چک شود . برای اینکار واضح است که باید صفت spellcheck المان را true کنیم .

1 ) نوت پد را باز کنید و قطعه کد زیر را در آن تایپ کنید و با نام دلخواه و در مکان دلخواه و پسوند html. ذخیره کنید .

<!DOCTYPE html>
<html>

<head></head>

<body>
<p contenteditable="true" spellcheck="true" >

hello world !

</p>

</body>

</html>

2 )  اکنون این فایل را با مرورگر باز کنید و شروع کنید به edit متن . کل متن رو پاک کنید و عبارت اشتباه helllo رو وارد کنید و space بزنید . مشاهده می کنید که یک خط رنگی زیر عبارت ظاهر شده و بیان می کند که این عبارت در لغت وجود ندارد .

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