ساخت سیستم رتبه بندی ستاره ای با css

[آبجی]

نمونه ای از سیستم رتبه بندی که قصد آموزش آن را دارم در این سایت نیز قابل مشاهده است. این سیستم ها علاوه بر زیبایی، کمک می کنند تا ارزیابی بهتری از مطالب یک سایت انجام شود. در ساخت این نوع سیستم از اشکال مختلفی می توان استفاده کرد، اما نمونه ای از آن که بیشتر رواج یافته است، سیستم ستاره ای می باشد که با کلیک بر روی ستاره مورد نظر، رتبه داده شده به سرور منتقل شده و ثبت می گردد. البته در این مقاله تنها قصد دارم نحوۀ ساخت آن را به کمک CSS آموزش دهم و پیاده سازی کد های سمت سرور به عهدۀ خود شما خواهد بود.


http://www.irpcn.com/images/article_images/css/star05.jpg


در این مقاله از تصویر زیر که در فایل ضمیمۀ مقاله موجود است، استفاده می کنیم:

http://www.irpcn.com/images/article_images/css/star01.gif
شکل 1

از ستاره زرد رنگ برای نمایش رتبه به عنوان رتبۀ اولیه، از رنگ سبز برای زمانی که موس بر روی ستاره ها قرار میگیرد و از رنگ سفید یا ستاره خالی برای نمایش خانه های فاقد رتبه استفاده می کنیم. قابل ذکر است که تصویر ما دارای ابعاد 90*30 پیکسل می باشد که ابعاد آن برای تعیین اندازه تگ ها اهمیت دارد.
در ساخت این سیستم از تگ های ul و li به عنوان عناصر اصلی html استفاده می کنیم، به شکلی که هر تگ li معادل یکی از ستاره های ما خواهد شد و تگ ul نیز به عنوان دربرگیرندۀ ستاره ها. برای شروع کار کد html زیر را در نظر بگیرید:


<ul class="rating">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
تگ های ul و li را به صورت زیر استایل دهی می کنیم:


ul.rating
{
list-style: none;
width: 150px;
height: 30px;
padding: 0;
background: url("star_rating.gif") left top;
}
ul.rating li
{
float: left;
width: 30px;
height: 30px;
}
در ابتدا عرض کردم که اندازۀ کل تصویر ما (شکل 1) 90*30 پیکسل است، به این معنی که طول و عرض هر یک از ستاره ها 30 پیکسل می باشد. با توجه به اینکه پنج ستاره در سیستم رتبه بندی داریم، عرض و ارتفاع تگ ul به ترتیب برابر 150 و 30 پیکسل در نظر گرفته شده است، همچنین تصویر ستاره ها را در زمینۀ تگ ul قرار می دهیم. همانطور که گفته شد هر تگ li معادل یکی از ستاره های ما خواهد بود، بنابراین برای کنار هم قرار گرفتن هر 5 ستاره خاصیت float:left را برای li ها در نظر می گیریم. عرض و ارتفاع تگ های li هم مطابق ابعاد هر ستاره برابر 30 پیکسل در نظر گرفته شده است. توجه داشته باشید، به دلیل اینکه ارتفاع هر ستاره 30 پیکسل است و تصویر زمینه را به صورت left top در تگ ul موقعیت دهی کردیم، تنها قسمت بالایی تصویر یعنی ستارۀ خالی نمایش داده می شود.
کار ما تا این لحظه به صورت زیر خواهد بود:

http://www.irpcn.com/images/article_images/css/star02.jpg
شکل 2

همانطور که در شکل شماره 2 مشاهده می کنید، اعداد موجود در هر li بر روی ستاره ها قرار گرفته اند که برای حل این مشکل کافی است خاصیت text-indent را به خصوصیات li اضافه کنیم:


ul.rating li
{
....
text-indent: -999px;
}
در ادامه برای ایجاد جلوۀ rollover کلاس کاذب hover را برای تگ های li استایل دهی می کنیم. با توجه به اینکه می خواهیم با رفتن موس بر روی هر ستاره رنگ آن به سبز تغییر پیدا کند، بار دیگر تصویر سه ستاره را در زمینۀ تگ li قرار داده و آن را به گونه ای موقعیت دهی می کنیم که ستارۀ وسطی نمایش یابد:


ul.rating li:hover
{
background: url("star_rating.gif") left center;
width: 150px;
margin-left: -120px;
cursor: pointer;
}
دقت کنید که تصویر زمینه در راستای محور عمودی به صورت center موقعیت دهی شده است که باعث می شود تصویر در وسط li ها قرار گیرد. مقدار width نیز برای هر li برابر 150 پیکسل در نظر گرفته شده است. علت انتخاب این مقدار این است که در واقع ما می خواهیم هنگام قرار گیری موس بر روی هر ستاره، آن ستاره و ستاره های قبل آن همگی به رنگ سبز در-بیایند، به طور مثال اگر کاربری موس را بر روی ستارۀ چهارم قرار داد، سه ستارۀ قبلی نیز باید سبز شوند. بنابراین باید با رفتن موس بر روی هر ستاره یا همان تگ li، عرض آن تگ برابر 150 پیکسل (همان عرض تگ ul) شود. در واقع تمام ناحیه ul توسط این تگ پوشانده شده و ستارهای سبز رنگ بر روی ستاره های خالی که در زمینه ul قرار داشتند، قرار می گیرند.
شرایط ذکر شده در صورتی اتفاق میافتد که کاربر موس را تنها بر روی ستارۀ اول قرار دهد، در این صورت تگ li به اندازه عرض ul بزرگ شده و تمام ناحیه را می پوشاند. اما به طور مثال اگر موس بر روی ستارۀ سوم قرار گیرد، تغییر عرض li از همان ستارۀ سوم به بعد صورت می گیرد و تصویری مطالبق شکل زیر را خواهیم داشت:

http://www.irpcn.com/images/article_images/css/star03.jpg
شکل 3

با توجه به اینکه عرض هر ستاره 30 پیکسل است، لازم است تگ li در هنگام رفتن موس بر روی آن به اندازۀ 120 پیکسل به سمت چپ کشیده شود تا جلوه مورد نظر ما ایجاد گردد، به همین منظور خاصیت margin-left را برابر 120- پیکسل مقدار دهی کردیم.
با اعمال تغییرات ذکر شده مجددا اگر موس را بر روی ستاره سوم قرار دهید، شکلی مطابق شکل 4 خواهیم داشت:

http://www.irpcn.com/images/article_images/css/star04.jpg
شکل 4

همانطور که در شکل 4 مشاهده می کنید دو ستاره در سمت چپ اضافه است که برای حل این مشکل باید خاصیت overflow را در تگ ul برابر hidden قرار دهیم تا قسمت های خارج از ul نشان داده نشوند:


ul.rating
{
....
overflow: hidden;
background: url("star_rating.gif") left top;
}
حال اگر کار خود را تست کنید دیگر مشکلی از بابت قسمت های اضافی وجود ندارد و زمانی که موس را از چپ به راست بر روی ستاره ها حرکت می دهید بدون مشکل ستاره ها به رنگ سبز در میایند، اما اگر موس را از سمت راست به چپ حرکت دهید هیچ تغییری ایجاد نمی-شود. علت این است که وقتی موس بر روی یکی از li ها قرار می گیرد، سایر تگ های li به زیر تگ فعلی رفته و قابل دسترس نیستند، به همین دلیل دیگر کلاس hover اتفاق نمیافتد و تغییری انجام نمی پذیرد.
برای رفع این مشکل لازم است تگی که موس بر روی آن قرار گرفته به زیر دیگر تگ ها رفته تا زمانی که تغییر اندازه صورت می گیرد، سایر تگ ها از دسترس خارج نشوند. برای قرار گیری عناصر در لایه های مختلف از z-index استفاده می کنیم. تغییرات را مطابق کد های زیر اغمل کنید:


ul.rating li
{
....
position: relative;
z-index: 3;
}
ul.rating li:hover
{
....
z-index: 2;
}
بنابراین زمانی که موس بر روی یکی از ستاره ها می رود، آن ستاره به یک لایه پایین تر از دیگر ستاره ها منتقل شده و طول آن افزایش پیدا می کند. ناگفته نماند به دلیل اینکه z-index تنها در حالات position:fixed، position:relative و position:absolute کار می کند، position:relative را نیز به خصوصیات li اضافه کردیم.
با اعمال این قسمت، شکل کلی سیستم ما ایجاد شده است و در زمان حرکت موس بر روی ستاره ها، تغییرات به خوبی صورت می گیرد. اکنون می خواهیم حالت اولیۀ ستاره ها در زمان لود صفحه را که مبین رتبه های داده شده توسط کاربران مختلف است را ایجاد کنیم، به طور مثال می خواهیم در زمانی که صفحه لود شد، 2.5 ستاره از پنج ستاره فعال باشد.
برای انجام این کار یک تگ li در ابتدای دیگر li ها اضافه می کنیم:


<ul class="rating">
<li class="current_rate"></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
و سپس خصوصیات زیر را به کلاس اختصاص داده شده به آن اضافه می کنیم:


ul.rating li.current_rate
{
position: absolute;
left: 0;
top: 0;
height: 30px;
width: 75px;
z-index: 1;
background: url("star_rating.gif") left bottom;
}
توجه کنید با اضافه کردن تگ جدید، در حال حاضر شش تگ li داریم، درحالی که اندازه تگ ul فقط برای پنج ستاره در نظر گرفته شده بود. بنابراین لازم است تگ جدید را به صورت absolute موقعیت دهی کنیم تا از جریان کلی صفحه خارج شود و تاثیری بر دیگر عناصر نگذارد. با توجه به اینکه تگ li اضافه شده باید درون ul موقعیت دهی شود، لازم است که position:relative را نیز به خصوصیات ul اضافه کنید:


ul.rating
{
....
position: relative;
background: url("star_rating.gif") left top;
} در مراحل قبل با استفاده از z-index دو لایه مختلف را ایجاد کردیم. به دلیل اینکه تگ li جدید در واقع نمایانگر حالت اولیۀ رتبه است، باید در لایه ای زیر دو لایه دیگر قرار گیرد تا در زمان رفتن موس بر روی ستاره ها، توسط سایر li ها همپوشانی شود. به همین دلیل خاصیت z-index این تگ را برابر 1 قرار می دهیم. دقت کنید که بار دیگر تصویر سه ستاره در زمینه این تگ نیز قرار داده شده است، البته این بار تصویر را در راستای محور عمودی به صورت bottom موقیعت دهی کردیم که باعث می شود ستارۀ زرد رنگ نمایش یابد.
خاصیت width که در واقع تعیین کننده میزان رتبۀ اولیه ماست عرض تگ li را تعیین می کند. به طور مثال من در اینجا مقدار 75 پیکسل را به آن اختصاص دادم که برابر 2.5 ستاره می باشد.
در انتها کار تکمیل شدۀ ما به صورت شکل شماره 5 خواهد بود:

http://www.irpcn.com/images/article_images/css/star05.jpg
شکل 5



نکته:

در نسخه 6 و نسخه های اولیه اکسپلورر 7 کلاس کاذب hover تنها برای تگ a شناخته شده است، در واقع کلاس hover که در اینجا برای li استایل دهی شد، در ورژن های مذکور قابل شناسایی نیستند.برای شناساندن کلاس های کاذب دیگر از جمله hover، focus، active و ... فایلی با پسوند htc به همراه کد های این مقاله قرار داده شده است. بعد از دانلود فایل مذکور این کد را به برچسب body صفحه خود اضافه کنید:
body
{


behavior: url("csshover.htc");

}

ناگفته نماند که behavior یک خصیصه غیر استاندارد است که تنها در مرورگر اینترنت اکسپلورر شناخته می شود.


http://www.irpcn.com/images/article_images/different/download.gif دانلود: فایل ضمیمه + کد ها (http://www.irpcn.com/downloads/sample/rating-system.zip)