PDA

View Full Version : سوال: یک خط در میان رنگی کردن listbox یا BulletedList


hamide_kh
جمعه 20 فروردین 1389, 11:40 صبح
سلام خدمت دوستان عزیز
آیا راهی هست که بتوان با css یک ListBox یا BulletedList را مثل گرید ویو یک خط در میان بصورت AlterNating رنگی کرد تا ظاهر زیبایی داشته باشه
ahmadbadpey
جمعه 20 فروردین 1389, 12:00 عصر
فکر کنم با این کد بشه :

option:nth-child(2n+1){
background-color:red;
}
یا

option:nth-child(even){
background-color:red;
}
hamide_kh
شنبه 21 فروردین 1389, 10:27 صبح
سلام و تشکر از توجهتون

دوست عزیز من این کد را در یک فایل css نوشتم اما نتونستم ازش استفاده کنم،(در خاصیت cssclass عنضر listBox چیزی نمیآد)
اگه ممکنه طریقه استفاده ازش را به بهم توضیح بدید
hamide_kh
یک شنبه 22 فروردین 1389, 18:18 عصر
سلام
از دوستان عزیز کسی بنده را رهنمایی نمیکنه
ahmadbadpey
یک شنبه 22 فروردین 1389, 20:01 عصر
این کد فقط تو مرورگرهای مدرن اون هم آخرین نسخه شون کار میکنه و تو IE فعلا جواب نمیده .
کافیه این کد رو داخل یه فایل CSS بنویسید و فایل رو به صفحه HTML الحاق کنید . به همین راحتی به همین خوشمزگی
hamide_kh
دوشنبه 23 فروردین 1389, 17:21 عصر
سلام
خوب پس برای مشکل من چه راه حلی وجود داره ،که بیشتر با ie کار می کنم
eAmin
دوشنبه 23 فروردین 1389, 23:46 عصر
سلام
خوب پس برای مشکل من چه راه حلی وجود داره ،که بیشتر با ie کار می کنم
سلام

یک راه حل برای شما استفاده از کتابخانه jQuery هست، ورژن 1.4 به بالا.
می تونید از این کد استفاده کنید:

$(document).ready(function(){
$("li").css("background-color", function(i){
return (i % 2 === 0) ? "#cccccc": "#FFFFFF";
});
});
hamide_kh
سه شنبه 24 فروردین 1389, 21:40 عصر
سلام
من کد را به شکل زیر نوشتم اما جواب نداد
کل پروزه را قرار میدم انشالله کمکم کنید تشکر
eAmin
چهارشنبه 25 فروردین 1389, 20:58 عصر
<!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>Untitled Page</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$("li").css("background-color", function(i){
return (i % 2 === 0) ? "#CCCCCC": "#FFFFFF";
});
});

</script>

</head>
<body>
<ul style="list-style:none;">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>