چیزی که قصد دارم درباره‌ش صحبت کنم، جی‌کوئری UI (مخفف User Interface) هست که یک کتاب‌خانه‌ی تحت جی‌کوئری‌ست و روی بخش رابط کاربری فکوس دارد. به‌طوری که عمل‌هایی مانند درگ‌کردن یک المنت در صفحه یا تغییر اندازه‌ی آن با کشیدن ماوس و یا بزرگ‌نمایی یک عکس با بالا پایین کردن یک نوار لغزنده و خیلی کارهای دیگر را تا حدی ساده کرده است که شاید کمی دور از ذهن باشد.

یک شروع ساده

ابتدا باید کتاب‌خانه‌ی جی‌کوئری UI را از اینجا دریافت کنید. نکته‌ی جالب این است که هنگام دریافت می‌توانید پکیج دلخواه خودتان را ایجاد و دریافت کنید. در صفحه‌ی دریافت لیستی از کامپوننت‌های جی‌کوئری UI قرار دارد که با برداشتن تیک ِ چک‌باکس ِ هرکدام، آن کامپوننت از پکیج‌تان حذف می‌شود. این مورد برای زمانی که حجم کد برای‌مان اهمیت زیادی دارد بسیار مناسب است و می‌شود کامپوننت‌های اضافی را حذف نمود.

پس از دریافت، کافی است سری به بخش دموها بزنید. این بخش به‌عنوان یک مرجع جمع‌و‌جور و کامل، نمونه‌های زیادی از کارهایی که می‌شود با جی‌کوئری UI انجام داد را به همراه توضیحاتی برای‌تان قرار داده است.

اما بهتر است برای درک بهتر ماجرا، یکی از نمونه‌ها را با هم مرور کنیم؛

درگ‌کردن [+]

- یادتان باشد که کتاب‌خانه‌ی جی‌کوئری و جی‌کوئری UI را به صفحه اضافه کنید (هردو کتاب‌خانه در پکیجی که دریافت می‌کنید، در فولدر js قرار دارند).

دستور اچ‌تی‌ام‌ال زیر را داریم:

<div class="draggable">Drag me!</div>

حالا کافی است اسکریپت زیر را اضافه کنیم:

$(function() {
	$(".draggable").draggable();
});

همه‌چیز به همین ساده‌گی است؛ هر المنتی که در صفحه، کلاس draggable داشته باشد، توسط اسکریپت بالا، دارای خاصیت درگ‌شدن می‌شود.
حالا می‌توانیم آپشن‌هایی را به آن اضافه کنیم تا کاربردی‌تر شود. مثلاً هنگام درگ‌کردن، المنت موردنظر کمی شفاف شود:

$(function() {
	$(".draggable").draggable({ opacity: 0.50 });
});

می‌توانیم از چند آپشن هم‌زمان استفاده کنیم، با گذاشتن یک , بین آپشن‌ها:

$(function() {
	$(".draggable").draggable({ opacity: 0.50, revert: true });
});

آپشن revert اگر مقدارش true باشد باعث می‌شود المنت را وقتی درگ می‌کنید به سمتی، پس از رها کردن، برگردد سر جای اولش. مقدار پیش‌فرض آن false است.

اما از این قسمت که بگذریم می‌رسیم به یک مورد مهم دیگر از جی‌کوئری UI و آن این است که این کتاب‌خانه، علاوه بر دارا بودن پلاگین‌های قدرتمند جی‌کوئری، یک فریم‌ورک سی‌اس‌اس هماهنگ با این پلاگین‌ها نیز به‌همراه دارد و با استفاده از آن می‌شود به پلاگین‌ها استایل داد. استایل‌ها و پوسته‌های متعدد ِ آماده‌ای که باعث می‌شوند در بیشتر مواقع کار به طراحی استایل توسط خودمان نرسد.

برای استفاده از این فریم‌ورک سی‌اس‌اس کافی است فایل سی‌اس‌اسی که نامش یک همچین‌چیزی است: jquery-ui-1.8.4.custom.css و در مسیر css/smoothness قرار دارد را به صفحه‌مان اضافه کنیم.

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

و البته یک سری قواعدی هم برای استفاده از این فریم‌ورک مانند هر فریم‌ورک سی‌اس‌اس دیگری وجود دارد که کمی در این‌باره توضیح می‌دهم؛

در فریم‌ورک UI نام همه‌ی کلاس‌ها با .ui آغاز می‌گردد. مثلاً: .ui-widget یا .ui-widget-content

کمی بالاتر مثالی برای درگ‌کردن ِ یک المنت زدم. حالا می‌خواهم آن المنت را با فریم‌ورک سی‌اس‌اس جی‌کوئری UI استایل‌دهی کنم؛

<div class="draggable ui-widget">
<div class="ui-widget-header">Title</div>
<p class="ui-widget-content">Content...</p>
</div>

درواقع .ui-widget المنت اصلی‌ای است که درگ می‌شود. در داخلش .ui-widget-header آوردم و عنوانی در آن نوشتم و بعد از آن هم .ui-widget-content برای قراردادن محتوا در آن.

لُپ ِ کلام اینکه جی‌کوئری UI زمینه‌ها را برای‌مان آماده می‌کند تا ما حواس و تمرکزمان روی هدفی که داریم باشد.

نمونه‌ای از مثال‌هایی که زده شد را اینجا ببینید.

• آسان ترین راه برای ایجاد tooltip (پنجره شناور) با کمک جی‌کوئری
• پلاگین Lightbox ِ جی کوئری برای افکت دادن به نمایش تصاویر
• چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!
• گرادینت متن با سی اس اس
• ای‌جکس بازی » به‌یاد هایپرترمینال

چگونه از پلاگین Lightbox استفاده کنم؟

۱٫ دریافت فایل های موردنیاز:
ابتدا پلاگین Lightbox و سپس کتابخانه ی جی کوئری را دریافت کنید.

Download Lightbox Plugin
Download JQuery Library

نکته: از آنجایی که در تحریم ِ گوگل به سر می بریم، برای دریافت کتابخانه ی جی کوئری، قطعا به مشکل بر می خورید. به همین خاطر می توانید همین الان جی کوئری را از اینجا دریافت کنید.

۲٫ فراخوانی اسکریپت ها و استایل ها:
باید کتابخانه ی جی کوئری و پلاگین Lightbox را در صفحه قرار دهیم. کدهای زیر را بین تگ head قرار دهید:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lightbox-0.4.js" type="text/javascript"></script>

یک فایل سی اس اس هم در پوشه ی پلاگین موجود هست که آن را هم باید در صفحه فراخوانی کنید. توسط کد زیر و مانند کدهای بالا بین تگ head:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

3. فعال سازی:
برای اینکه تصاویر با Lightbox هماهنگ شوند، احتیاجی به تغییر و اصلاح کدهای اکس اچ تی ام ال ندارید. این پلاگین نهایت انعطاف پذیری را داراست.
فقط لازم هست در صفحه یک همچین چیزی داشته باشید:

<a href="image1.jpg"><img src="thumb_image1.jpg" alt="" width="72" height="72" /></a>

حالا اگر روی این تصاویر کلیک کنیم، Lightbox فراخوانی می شود و افکت را اجرا می کند.

اسکریپت زیر را هم داخل تگ head قرار دهید:

<script type="text/javascript"><!--
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
// --></script>

به این صفحه بروید و نمونه ی آنچه که اینجا یاد گرفتیم را ببینید :)

• ای‌جکس بازی » به‌یاد هایپرترمینال
• ای‌جکس‌بازی » بارگذاری محتوای صفحات با جی‌کوئری
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری
• معرفی ۵ فرم تماس ِ رایگان ِ ای جکس

۱٫ فلش
۲٫ جاوا اسکریپت
۳٫ سی اس اس

ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد.

۱٫ فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “۱۲۳ flash menu” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند و این مورد تا حدودی مشکلات سئو را برطرف میکند.

۲٫ جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید!

۳٫ سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی ۶ به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد!

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

خب، چیزهایی که لازم داریم، اینها هستند: یک فایل سی اس اس، یک فایل اکس اچ تی ام ال و یک ویرایشگر متن، مثلا نوت پد ویندوز.
برای ساختن فایل سی اس اس، می توانید یک فایل متنی ایجاد کنید و پسوند آن را به css تغییر دهید و ترجیحا نام فایل را style بگذارید. یعنی در نهایت بشود:

style.css

ساختید فایل رو؟! خب، حالا بریم سراغ کدنویسی…
فایل سی اس اسی رو که ساختید، با کمک یک برنامه ی ویرایشگر متن، باز کنید.
ما باید با کمک لیست ها این منو را طراحی کنیم. فقط کافیست کمی با تگ های ul و li، بازی کنیم. پس در ابتدا یک سلکتور با نام nav می نویسیم و پدینگ و مارجین ِش رو صفر میکنیم و به list-styleش هم مقدار none می دیم:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

حالا یک اینتر بزنید و برید خط بعدی… اینبار باید به تگ li ای که در nav قرار می گیرد، دستورات زیر را بدهیم:

#nav li {
float: right;
position: relative;
width: 90px;
height: 20px;
background-color: #f6f6f6;
color: #f75801;
font: bold 70% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
direction: rtl;
border: 1px solid #e1e1e1;
text-align: center;
padding-top: 5px;
}

به خاصیت float مقدار right دادیم، چون می خواهیم منو در قسمت راست صفحه و به صورت شناور قرار بگیره.
دوباره اینتر بزنید و برید خط پایین. این دستوری که می خواهیم بنویسیم، برای این هست که وقتی کرسر موس رفت روی عناوین منو، رنگ زمینه اش تغییر کند:

#nav li:hover {
background-color: #f1ff96;
}

باز هم اینتر بزنید. دستورات زیر هم وضعیت ظاهری لینک ها را تعیین می کنند:

#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
color: #868584;
}
#nav a:hover, #nav a:active {
display: block;
text-decoration: none;
color: #f75801;
}

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

#nav ul {
display: none;
position: absolute;
padding-top: 7px;
}

خاصیت display که با none مقداردهی شده، درواقع دستور میدهد که قسمت زیر منو، مخفی و غیر قابل نمایش بماند!
اینتر بزنید باز هم! خب، حالا باید کمی ظاهر زیرمنو را سبک دهی کنیم. به زمینه و حاشیه اش رنگی بدهیم و موقعیتش را جمع و جور کنیم:

#nav ul li {
float: none;
border: 1px solid #dded6f;
background-color: #f1ff96;
font-size: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
}

اینتر فراموش نشه! باز هم با دستور زیر، رنگ زمینه ی گزینه های زیر منو ها را در زمان حرکت کرسر موس روی آن ها، تعیین می کنیم:

#nav ul li:hover {
background-color: #f9ffcf;
}

آخرین اینتر را بزنید که می خواهیم یک کار قشنگ بکنیم:) یادتان که هست چند خط بالاتر، دستور مخفی کردن زیرمنوها را دادیم؟! حالا باید دستور بدهیم که هر زمان کرسر موس روی یکی از عناوین منو رفت، بی چون و چرا زیرمنوی آن نمایش یابد! فقط کافیست بگوییم:

#nav li:hover ul {
display: block;
}

زیبا نیست؟! خب، فایل سی اس اس تان تکمیل شد. حالا برویم سراغ فایل اکس اچ تی ام ال! خسته که نشدید خدای ناکرده؟!
فایل اکس اچ تی ام ال را بسازید. برای ساختن آن مانند ساختن فایل سی اس اس عمل کنید و نام فایل را بگذارید menu. یعنی باید بشود:

menu.htm یا menu.html

خب. اول کدهای مربوط به هدر را می نویسیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>creating menus with CSS | Demo!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

حالا تگ بدنه رو باز می کنیم و لیست مورد نظر رو ایجاد می کنیم و سلکتور nav رو بهش نسبت می دهیم و بعد از اون، عناوین و زیرمنوها رو اضافه می کنیم:

<body>
<ul id="nav">
<li><a href="#">رنگ ها</a>
<ul>
<li><a href="#">آبی</a></li>
<li><a href="#">سبز</a></li>
<li><a href="#">نارنجی</a></li>
</ul>
</li>
<li><a href="#">آموزش ها</a>
<ul>
<li><a href="#">سی اس اس</a></li>
<li><a href="#">پی اچ پی</a></li>
<li><a href="#">جی کوئری</a></li>
</ul>
</li>
</ul>
</body></p>

واضح هست دیگه؟! در اینجا ما یک منو، دو عنوان به نام های “رنگ” و “آموزش ها” و برای هر عنوان، سه زیرمنو داریم. در آخر هم تگ html را ببندید!

پشتیبانی از این روش
همون طور که در ابتدا هم گفتم، این روش در نسخه ها ی ۶ و پایین تر ِ مرورگر IE پشتیبانی نمی شود و کار نمی کند! دلیلش هم روشن است. ما برای این کار از خاصیت hover استفاده کرده ایم که این نسخه ها از مرورگر IE (یعنی نسخه های ۶ به پایین) خاصیت hover را فقط برای لینک ها می شناسند و برایشان جای تعجب دارد که بخواهید با استفاده از خاصیت hover، مثلا متنی را ظاهر و یا مخفی کنید! اما از IE7 به بعد این مشکل رفع شده و این منویی که ایجاد کردیم به درستی کار خواهد کرد. سعی می کنم به زودی مقاله ای را در این رابطه منتشر کنم و در آن به حل این مشکل پردازم. یعنی این منو بتواند در IE6 و حتی پایین تر هم کار کند!

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

• روش های خلاصه نویسی در سی اس اس
• رفع مشکلات و یکسان سازی قالب در مرورگرهای مختلف » دو
• جی‌کوئری UI یا هرآنچه برای طراحی یک اپلیکیشن نیاز دارید
• یک آموزش کوتاه و مهم در سی اس اس – important! چیست؟
• استایل فارسی جدید برای فرندفید و چگونگی استفاده از آن