ساخت منوی حرفه‌ای با جاوا اسکریپت

تگ SELECT یکی از عناصر زبان HTML است که بوسیله آن می توان بین چندین گزینه کرکره ای یک مورد را انتخاب کرد. کاربرد این عنصر زمانی معلوم می شود که باید از بین یک لیست بزرگ از گزینه ها یک مورد را انتخاب کنیم، مانند انتخاب تاریخ یا نام یک شهر. اما متاسفانه برای آن دسته از کسانی که دوست دارند که صفحه وب سایتشان فانتزی تر باشد، حالت پیشفرض SELECT خیلی کاربر پسند نیست و زیبا هم به نظر نمی رسد.

برای استایل دادن به این عنصر استفاده از زبان CSS کافی است اما خب دسترسی کافی برای ایجاد یک طرح زیبا به طراح نمی دهد. در اینجا است که افزونه رایگان جی کوئری EasyDropDown.js تمامی کمبود های قبلی را جبران می کند. با استفاده از آن می توانید به راحتی ظاهر از مد افتاده این عنصر صفحه را با امکانات زیادی که در اختیارتان قرار می دهد شخصی سازی کنید. پس از اعمال کردن این افزونه روی عنصری از صفحه، این افزونه کنترل کامل با صفحه کلید همراه با جستجوی متنی را در اختیار کاربران قرار می دهد. همچنین این ابزار اسکرول درونی برای این عنصر در زمانی که تعداد گزینه ها زیاد است و سایز عنصر نیز محدود است فراهم می کند. نصب برای نصب این افزونه ابتدا باید کتابخانه jQuery را به صفحه سایت خود وارد کنید. همچنین قبل از وارد کردن jQuery باید کتابخانه Java Script مرتبط با این آموزش را نیز به صفحه خود وارد کنید. کدهای زیر را در کدهای قالب خود وارد کنید (دانلود کتابخانه جاوا اسکریپت برای ساخت منو):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
<script src="js/jquery.easydropdown.js" type="text/javascript"></script>  

و سپس فایل CSS را در داخل تگ Head تعریف کنید:


<head>  
..  
  <link rel="stylesheet" type="text/css" href="themes/easydropdown.css"/>  
..  
</head>

اگر هم برای قالب خود از فایل CSS جداگانه ای استفاده می کنید کدهای فایل را درون آن فایل کپی کنید. طراحی تگ select هنگامی که از این افزونه استفاده می کنید، می توانید یک منوی کرکره ای با قابلیت نشانه گذاری تمیز و زیبا ایجاد کنید. عنصر select فقط در داخل کدهای HTML می تواند قرار گیرد. به راحتی می توانید این عنصر را غیر فعال کنید، یک گزینه را به عنوان پیشفرض انتخاب کنید یا یک لیبل را به راحتی به آن اضافه کنید. برای استایل دادن به آن ابتدا کلاس dropdown را به تگ خود اضافه می کنیم. برای اضافه کردن لیبل کافی است تا از کلاس label در تنظیمات استفاده کنید. به کد زیر توجه کنید:


<select class="dropdown">  
    <option value="" class="label">Setting</option>  
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>  
    <option value="3">Option 3</option>  
    <option value="4">Option 4</option>  
    <option value="5">Option 5</option>  
</select> 

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

ساخت منوی حرفه ای با استفاده از جاوا اسکریپت اگر هم می خواهید که یک گزینه به عنوان گزینه پیشفرض انتخاب شود کافی است قابلیت selected را به آن گزینه اضافه کنید:


<select class="dropdown">  
    ...  
    <option value="2" selected>Option 2</option>  
    ...  
</select>  

بهتر است که همزمان با قابلیت انتخاب پیشفرض، لیبل را به این عنصر اضافه نکنید.

استفاده از قالب ها EasyDropDown.js همراه با دو قالب آماده استفاده مترو و طراحی تخت آماده شده است. برای استفاده از قالب ها باید تگdata-attribute که در HTML5 اضافه شده است را بکار ببریم. در داخل تگ SELECT مقدار زیر را به عنوان Attribute استفاده کنید و نام قالب مورد نظر خود (یعنی کلمات Flat و Metro) را انتخاب کنید:


<select class="dropdown" data-settings='{"wrapperClass":"metro"}'>  
...  
</select> 

در کنار قابلیت هایی که به آن اشاره شد قابلیت های دیگری نیز وجود دارد که می توانید با مشاهده صفحه مستندات پروژه از جزئیات آن مطلع شوید.

0







از طریق این فرم، می توانید بدون ثبت نام نظر دهید و یا اگر قبلا ثبت نام کرده اید، با ورود ناحیه ی کاربری می توانید علاوه بر ثبت نظر، به مدیریت نظرات خود نیز بپردازید.
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)
(فیلد اجباری)