Thursday, July 31, 2008

ශ්‍රි ලංකා සයිබර් ගේම්ස්‌ 2008

yuthmax.com සදහා රචිත ලිපියකි.

ශ්‍රි ලංකාවේ පරිගණක ක්‍රිඩා ජාත්‍යන්තර තලයට ගෙනයෑම සදහා gamer.lk සහ කොලඹ විශ්ව විද්‍යාලයේ විද්‍යා අංශයේ රොට්‍රැක්‌ට්‌ සමාජය සමග එකමුතුව ශ්‍රි ලංකා සයිබර් ගේම්ස්‌ 2008 ප්‍රථම වතාවට පවත්වනු ලබනවා.

මෙය පැවැත්වෙන්නේ අගෝස්‌තු මස 15, 16 සහ 17 යන දින වල උදේ 10.00 සිට සවස 5.00 දක්‌වා බණ්‌ඩාරනායක අනුස්‌මරණ සම්මන්ත්‍රණ ශාලාවේදියි.

WCG තලයට ශ්‍රි ලාංකීය පරිගණක ක්‍රීඩකයන් ගෙනයැමට මෙය මහත් රුකුලක්‌ වේවි.

මෙම තරගාවලිය සදහා පහත පරිගණක ක්‍රිඩා සදහා ඔබටත් අයදුම් කරන්නට පුලුවන්.

  • Counter Strike 1.6
  • Call of Duty 4
  • DOTA
  • Starcraft: Broodwar
  • FIFA 08

slcg

hallucination
මේ තරගාවලිය සදහා මා නියෝජනය කරන 'Hallucination' පරිගණක ක්‍රිඩා කණ්‌ඩායම ද සහභාගි වීමට බලාපොරොත්තු වනවා.

ඉක්‌මන් කරන්න. www.slcg.lk අදම ලියාපදිංචි වන්න. අලුත් අත්දැකීම විදගන්න!

Monday, July 28, 2008

css වලින් menu හදමු

වෙබ් අඩවි වලට menu හදද්දි අපි බොහෝ වෙලාවට mouseover එකේදි මෙනුවේ රූපය වෙනස්‌ වෙන ආකරයට හදනවා. මේ ආකාරයේ menu සම්පුර්නයෙන්ම css භවිතයෙන් හදන්න පුලුවන්. මම පෙන්වන්නම් කරන හැටි.

පලවෙනි උදාහරණය

මෙලෙස menu එක සැදීමෙන් වාසි කිහිපයක්‌ තියෙනවා.

  • menu එකේ අයිතමයක සාමාන්‍ය පෙනුම සහ mouseover කල විට පෙනුම සදහා රූප දෙකක්‌ වෙනුවට අපි භාවිතා කරන්න්නේ එක රූපයයි. එනිසා පරිශීලකයා මෙනු අයිතමය mouseover කල සැනින් අපට අවශ්‍ය පෙනුම ලබා ගන්නට පුලුවන්. මන්ද mouseover සදහා වෙනම රූපයක්‌ පරිශීලකයාගෙ පරිගනකයට බාගත වීමට අවශ්‍ය නොවන නිසා.
  • ඒ වාගේම අනවශ්‍ය javascript භාවිතා නොකර css මගින් menu එක ක්‍රියාත්මක වන නිසා කේතය පැහැදිලියි.

මෙහිදී අපි කරන්නේ යම් සබැදුමක්‌(link) සදහා එම සබැදුමේ පසුබිම් රූපය(background-image) වෙනස්‌ කිරීමයි. එය කරන්නේ මෙහෙමයි.

සාමාන්‍ය පෙනුම සහ mouseover කල පසු පෙනුම යන දෙකම අඩංගු කර රූපය සාදාගත යුතුයි. උදාහරණය සදහා මම පහත රූපය යොදා ගන්නවා. එහි අලු පැහැති ඉහල කොටස සාමාන්‍ය පෙනුම සදහාත් කලු පැහැ පහල කොටස mouseover සදහාත් යොද ගන්නවා.

hover logo

html කේතය

<a href="http://thilspage.blogspot.com" id="my-link"> </a>

css කේතය

#my-link {
    display: block;
    width: 325px;
    height: 80px;
    background-image:url(hoverlogo.jpg);
    background-position: top;
}

#my-link:hover {
    background-position: bottom;
}

ප්‍රතිඵලය

මෙම ක්‍රමය menu සදහා භවිතා කල හැකියි. පහත සබැදුම බලන්න.

පලවෙනි උදාහරණය

සම්පූර්ණ කේතය

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>
<style>

#wrapper { 
    margin:50px auto; 
    width:600px; 
}

#top_navigation { 
    height:40px; 
    background:url(menu_bg.gif) repeat-x; 
}

a.top_nav_home:link, a.top_nav_home:visited { 
    display:block; 
    width:94px; 
    height:40px; 
    float:left; 
    background:url(home.gif) no-repeat top; 
}

a.top_nav_home:hover { 
    background-position:bottom; 
}

a.top_nav_about:link, a.top_nav_about:visited { 
    display:block; 
    width:94px; 
    height:40px; 
    float:left; 
    background:url(about.gif) no-repeat top; 
}

a.top_nav_about:hover { 
    background-position:bottom; 
}

</style>
</head>

<body>
    <div id="wrapper">
        <div id="top_navigation">
            <a class="top_nav_home" href="#"> </a>
            <a class="top_nav_about" href="#"> </a>
        </div>
    </div>
</body>
</html>

'මා ගැන' බොත්තමේ රූපය

Wednesday, July 23, 2008

ඔබේ අඩවියට ඔබේම favicon

favicon කියන්නේ favorites අයිකොන් එකටයි. වර්ඩ්ප්‍රෙස්‌ හෝ බ්ලොගර් සම්මත favicon වෙනුවට ඔබටත් පුලුවන් ඔබේම favicon එකක්‌ යෙදීමට.

favicon

මෙම කුඩා රූපය සදහා jpg/png වැනි ග්‍රෆික්‌ ෆෝමැට්‌ එකක්‌ පාවිච්චි කරන්න පුලුවන් උනත් ico ෆෝමැට්‌ එක මෙන් සියලුම බ්‍රව්සර වල ක්‍රියා කරන්නේ නැහැ. ඒ නිසා අපි ico ෆෝමැට්‌ එකෙන් favicon එක සාදමු.

ඔබ භාවිතා කරන්නේ photoshop මෘදුකාංගය නම් මේ සදහා විශේෂ ප්ලගිනයක්‌ අවශ්‍යයි. මෙම වෙබ් අඩවියට ගොස්‌ එම plug-in එක ලබාගන්න. ඉන් පසු එය ඔබේ photoshop ෆෝල්ඩරයේ Plug-Ins\File Formats තුලට දමන්න.

Photoshop තුල 16x16 ගොනුවක්‌ විවෘත කර ඔබට අවශ්‍ය පරිදි රූපය සාදාගෙන File > Save As.. වෙත ගොස් Format dropdown‌ එකෙන් ICO තෝරා myfavicon.ico ලෙස save කරන්න. 16x16 තුල රූපය සෑදීමට අපහසු නම් 64x64 රූපය සාදා පසුව 16x16 දක්‌වා ප්‍රමානය අඩුකරගත හැකියි.

දැන් සාදාගත් favicon එක ඔබේ වෙබ් අඩවියට upload කර ඉන්පසු වෙබ් පිටුවේ <head> තුල පහත කේතය යොදන්න.

<link rel="shortcut icon" href="myfavicon.ico" />

ඔබේ බ්ලොග් එක තියෙන්නෙ බ්ලොගර් හි නම් ඔබට වෙනත් ස්ථානයක favicon එක upload කරන්නට සිදු වේවි. මගේ බ්ලොග් එකේ මම ඒ සදහා යොදාගෙන තිබෙන්නේ GooglePages. දැනට එහි ලියාපදිංචි වී නැත්නම් නව ගිනුමක්‌ ආරම්භ කර සාදගත් myfavicon.ico එක upload කරන්න.

ඔබේ බ්ලොගර් ගිනුමේ Layout වෙත ගොස්‌ Edit HTML විවෘත කරන්න. Edit Template කොටුවේ <head> ටැග් එක සොයාගෙන එයට යටින් පහත කේතය යොදන්න.

<link href='http://youraccount.googlepages.com/myfavicon.ico' rel='shortcut icon'/>
<link href='http://youraccount.googlepages.com/myfavicon.ico' rel='icon'/>

ඉන්පසු template එක save කරන්න

Sunday, July 20, 2008

css | footer එක පිටුවේ යටටම ගන්න හැටි

සාමාන්ය වෙබ් පිටු සැකසුමක් සලකමු.

<body>
<div id="wrapper">
 <div id="header">
      <h2>header</h2>
 </div>
 <div id="content">
      my content
 </div>
 <div id="footer">
  footer 
 </div>
</div>
</body>

උදාහරණය 1

මෙහි content කොටසෙහි අති දත්ත ප්රමානය අනුවයි එහි උස තීරණය වන්නේ.

පිටුවේ දත්ත ප්රමාණය හෝ පිටුව දර්ශනය වන resolution එක වෙනස් වෙද්දි සැම විටම පිටුවේ අන්තිමටම footer එක යොදන්නට අවශ්ය නම් එය කරන්නේ මෙහෙමයි.

මුලින්ම body සදහා 100% උසක් ලබා දෙමු. ඉන් පසු wrapper සදහා body එකේ ආකරයෙන්ම absolute position සහිතව 100% අවම උසක්(min-height) සහ පලලක් දෙමු.

body {
 margin: 0px;
 height: 100%;
}

#wrapper {
 display: block;
 position: absolute;
 min-height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 z-index: 0;
}

මෙම අවම උස සදහා වන min-height ෆයර් ෆොක්ස්(Firefox) සහ සෆාරි(Safari) සදහා වැඩ කලත් IE සදහා වැඩ කරන්නේ නැහැ. ඒනිසා අපිට සිදු වෙනවා අමතර css ගොනුවක් සාදා එය <!--[if lte IE 6]> මගින් අපේ පිටුවට එකතු කරගන්න.

ඒ සදහා අපි iefix.css නමින් අලුත් css ගොනුවක් විවෘත කර එහි පහත පරිදි wrapper හි උස සදහා 100% ලබා දෙමු.

#wrapper {
 height: 100%;
}

අපේ පිටුවට iefix.css අමුනා ගැනීම සදහායි පහත කේතය භාවිත කරන්නේ.

<!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" href="iefix.css" />
<![endif]-->

if lte IE 6 පරීක්ෂා කර බලනවා බ්රව්සරය IE6 හෝ IE6 වලට වඩා අඩුද කියලා. එසේනම් පිටුවට iefix.css අමුනා දෙනවා.

පිටුවේ දත්ත අතුල්කරන කොටස වන content සදහා padding-bottom අගය අප භවිතා කරන footer හි උස හා සමාන විය යුතුයි. උදාහරනය සදහා footer හි උස 50px ලෙස සලකමු.

#content {
 padding-bottom: 50px;
}

අවසාන වශයෙන් footer සදහා css කේතය

#footer {
 display: block;
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 100%;
 height: 50px;
 z-index: 999;
}

අවසාන ප්රතිඵලය

සම්පූර්ණ කේතය

footerposition.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>footer position</title>
<link rel="stylesheet" type="text/css" href="footerposition.css" />
<!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" href="iefix.css" />
<![endif]-->
</head>

<body>
<div id="wrapper">
 <div id="header">
     <h2>Lorem ipsum dolor sit amet</h2>
    </div>
 <div id="content">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam rutrum ipsum. Pellentesque tempus mi non turpis. Etiam tortor. Donec posuere, nulla quis venenatis faucibus, ante nisi convallis enim, a vestibulum purus tortor in nunc. Sed at nisl. Quisque eu mauris. Fusce a sapien. Cras lectus elit, ullamcorper vel, vehicula in, lacinia vel, nisl. Maecenas hendrerit, nulla nec viverra rutrum, velit massa euismod erat, at imperdiet enim neque nec sem. Proin felis ligula, rutrum vitae, dictum ut, rhoncus tristique, neque. Vivamus suscipit feugiat diam. Duis urna eros, suscipit vitae, malesuada ac, commodo eu, mi. Praesent tincidunt feugiat purus. Aenean lobortis sem nec leo lobortis semper. Mauris metus. Nulla facilisi. Fusce nec tortor id pede hendrerit scelerisque. Donec pharetra molestie neque.
    </div>
    <div id="footer">
     footer content goes here
    </div>
</div>
</body>
</html>
footerposition.css
@charset "utf-8";
/* CSS Document */
body {
 margin: 0px;
 height: 100%;
}

#wrapper {
 display: block;
 position: absolute;
 min-height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 z-index: 0;
}

#content {
 padding-bottom: 50px;
}

#footer {
 display: block;
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 100%;
 height: 50px;
 z-index: 999;
 background-color:#999999;
}
iefix.css
@charset "utf-8";
/* CSS Document */
#wrapper {
 height: 100%;
}

Friday, July 18, 2008

ඉදිරියේදි නිකුත් වෙන පරිගණක ක්රීඩා

World of Warcraft - Wrath of the Lich King

ලොව පුරා මිලියන දහයකට අදික පිරිසක් ක්රීඩා කරන World of Warcraft, MMORPG පරිගණක ක්රීඩවේ නවතම ප්රකාශනය Wrath of the Lich King එලබෙන නත්තල් සමයේදි නිකුත් කිරීමට නියමිතයි. මෙහි පලවෙනි ප්රකාශනය නිකුත් වුනේ 2004 නොවැම්බර් මාසයෙදීයි. වයස් බේදයක් නැතිව ඕනැම කෙනෙකුට එක සේ සතුටු වියහැකි ක්රීඩාවකි මෙය. මෙම ක්රීඩාව ක්රියත්මක වන්නේ අන්තර්ජාලය හරහායි.

මම ක්රීඩා කරන චරිතය

Starcraft II

දැනට අවුරුදු 10කට පමන පෙර නිකුත් වූ පලවෙනි ප්රකාශනයෙන් පසු ලොව පුරා බොහෝ දෙනා බලාසිටි Starcraft 2 පරිගනක ක්රීඩාවත් ලගදීම නිකුත් වීමට නියමිතයි.

Monday, July 14, 2008

jQuery | ඕනම element එකකට hover effect

ඉන්ටෙර්නෙට්‌ එක්‌ස්‌ප්ලොරර් 6 වල links හරුනුකොට වෙනත් element සදහා :hover pseudo-class එක වැඩ කරන්නේ නැහැ.

උදාහරණය 1 : firefox හි paragraph සදහා hover වැඩ කලත් ie6 හි වැඩ කරන්නේ නැහැ.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE hover test</title>
<style>
#wrapper { margin:20px auto; width:600px; }

.hover-me:hover { background:#eee; }
</style>
</head>

<body>
<div id="wrapper">
 <a class="hover-me" href="#">test link</a>
 <p class="hover-me">test paragraph</p>
</div>
</body>
</html>

ඉහත දැක්‌වෙන උදාහරණයේ හි link එක සදහා අලු පැහැති පසුබිම් වර්නයක්‌ mouse over කිරීමේදී දර්ශනය වූවත් paragraph (p) එක සදහා එය අපට අවශ්‍ය පරිදි ක්‍රියා කරන්නේ නැහැ.

මෙය හරි ආකාරව ක්‍රියාත්මක කර ගැනීම සදහා අපි jQuery භාවිතා කරමු.

අපි මෙහිදී කරන්නේ mouse over කරන අවස්‌තාවෙදී එම අදාල element එකට class එකක්‌ එකතු කිරීමයි.

උදාහරණය සදහා මම යොදා ගන්නේ hover-frosure class එකයි. එහි පසුබිම් වර්නය සදහ අලු පැහැය css මගින් යොදා තිබෙනවා.

.hover-forsure { background:#eee; }

දැන් අපි jQuery addClass මගින් hover වීමේදි hover-me paragraph class එක සදහා hover-forsure class එක යොදමු.

$(document).ready(function(){
 $('.hover-me').hover(function() {
 $(this).addClass('hover-forsure'); 
 }, function() {
 $(this).removeClass('hover-forsure');
 }); 
});

උදාහරණය 2: දැන් IE6 එකෙත් hover වැඩ කරනවා!

සම්පූර්ණ කේත

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover Demo</title>
<style>
#wrapper { margin:20px auto; width:600px; }
.hover-forsure { background:#eee; }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.hover-me').hover(function() {
 $(this).addClass('hover-forsure'); 
 }, function() {
 $(this).removeClass('hover-forsure');
 }); 
});
</script>
</head>
<body>
<div id="wrapper"> 
 <p class="hover-me">test hover 2</p>
</div>
</body>
</html>

Monday, July 7, 2008

jQuery එක්‌ක ලස්‌සන වෙන්න!

ThickBox (තික්‌ බොක්‌ස්‌)
වෙබ් මුහුනත් අලංකාර කරන්න වගේම පින්තූර දර්ශනය කරන්න නියමයි.
පින්තූර උදාහරණය
මුලින්ම අවශ්‍ය ගොනු බාගත කරගමු.
thickbox.js
thickbox.css
jquerry-latest.js (පසුගිය සතියේ zeebra table හදන්න පාවිච්චි කල library එකමයි)
loadingAnimation.gif
පින්තූර සදහා..
ඉන්පසු javascript සහ css ගොනු අපේ වෙබ් පිටුවට අතුලත් කරමු.
<link rel="stylesheet" type="text/css" href="thickbox.css" />
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
ඔබට අවශ්‍ය කුඩා රූපය සහ විශාල රූපය සාදා (උදාහරණය සදහා මගේ කුඩා රූපය illidan_small.jpg ලෙසත් විශාල රූපය illidan.jpg ලෙසත් පාවිච්චි කරනවා) පහත ආකාරයට thichbox එක ඇතුලත් කරගන්න.
<a href="illidan.jpg" title="ඔබට අවශ්‍ය මාතෘකාවක්‌ යොදන්න" class="thickbox"><img src="illidan_small.jpg" alt="Illidan"/></a>
පින්තූර උදාහරණය
iframe සදහා..
ඉහත ආකාරයටම javascript ගොනු සහ css ගොනු ඔබේ පිටුවට අතුලත් කර පහත දක්‌වෙන පරිදි thickbox එකක්‌ තුල iframe ලෙස දර්ශනය කරන්න පුලුවන්.
<a href="myiframe.html?keepThis=true&TB_iframe=true&height=300&width=400" title="ඔබට අවශ්‍ය මාතෘකාවක්‌ යොදන්න" class="thickbox">click here</a>
iframe උදාහරණය
thickbox වෙබ් අඩවිය

Tuesday, July 1, 2008

jQuery javascript එකතුව ගැන කෙටි හැදින්වීමක්‌

ප්‍රයෝජන
සැම බ්‍රව්සරයක්‌ ම එකම ආකාරයෙන් වෙබ් පිටු දර්ශනය කරන්නේ නැහැ. jQuery මගින් මෙම අඩුපාඩුව පහසුවෙන් මගහැරගන්නට පුලුවන්.
DOM script පේලි රාශියකින් ලියන දෙයක්‌ jQuery මගින් ඉතා සුලු පේලි ගනනකින් ලිවිය හැකියි.
පහසුවෙන් පිටුවක අන්තර්ගතයන් වෙනස්‌ කරගනීමේ හැකියාව jQuery ලබදෙයි. උදාහරනයක්‌ වශයෙන් පිටුවක ඇති text වෙනස්‌ කිරීම, පින්තූර මාරු කිරීම ලයිස්‌තු වෙනස්‌ කිරීම වැනි දේ.
වෙබ් පිටු සජීවීකරනය කරගැනීමට නොයෙකුත් ආකාරයේ දෘශ්‍ය ප්‍රයෝග jQuery එකතුව සතුයි.
වෙබ් පිටු පරිශීලකයා වෙබ් පිටුව හසුරුවන ආකරය ( link එකක්‌ මත ක්‌ලික්‌ කිරීම වැනි දේ ) event handlers මගින් පාලනය කිරීමේ පහසු ක්‍රම jQuery ලබාදෙයි.
මම ඒ පැහදිලි කරන්නට උත්සාහ කලේ jQuery මගින් අපට ලබාදෙන පහසුකම් සමහරක්‌. දැන් අපි බලමු jQuery උපයෝගී කරගෙන සරල උදාහරනයක්‌.

සීබ්‍රා tables
සීබ්‍රා tables වෙබ් පිටු වල බොහෝ සේ පාවිච්චි කරන දෙයක්‌. පේලියෙන් පේලියට වර්නය මාරු වෙන නිසා දත්ත පැහැදිලිව පෙනෙන අතරම පිටුව අලංකාරව පේනවා.
මුලින්ම බලමු කොහොමද jQuery අපේ පිටුවට එකතු කරගන්නෙ කියලා. http://www.jquery.com වෙබ් අඩවියෙන් jquery-1.2.6.js (දැනට පවතින version එක) බාගත කරගන්න.
වෙබ් පිටුවෙ head section එකේ පහත ආකරයෙන් එය link‌ කරගන්න.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zeebra</title>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
</head>
table එකේ html
<body>
<table id="zeebra" cellspacing="0">
<tr>
  <td>Nickelback</td>
  <td>If Everyone Cared</td>
</tr>
<tr>
  <td>Goo Goo Dolls</td>
  <td>Iris</td>
</tr>
<tr>
  <td>Edwin McCain</td>
  <td>I'll Be</td>
</tr>
<tr>
  <td>Metallica</td>
  <td>Nothing Else Matters</td>
</tr>
<tr>
  <td>Nirvana</td>
  <td>Smells Like Teen Spirit</td>
</tr>
</table>
</body>
css
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
#zeebra {  border: 1px solid #666666; }
#zeebra td { border-left: 1px solid #D9D9D9; padding:5px; }
<දැන් ඔබේ පිටුව මෙසේ දිස්‌ වේවි.
අපට ඉරට්‌ටේ පේලි නිල් පැහැ කිරීමට අවශ්‍ය යයි සිතමු. css‌ වලින් අපි even නමින් class එකක්‌ හදලා අපිට අවශ්‍ය විදිහට නිල් පාට පසුබිම් වර්නයක්‌ යොද ගනිමු.
.even { background-color:#edf3fe; }
දැන් ඉතිරිව ඇත්තේ මගින් අපට අවශ්‍ය zeebra stripe යොදාගනීම පමනයි. පහත දැක්‌වෙන පේලි head section එකේ යෙදීමෙන් ඉරට්‌ටෙ පේලි වල පසුබිම් වර්නය නිල් පැහැ වේවි.
<script type="text/javascript">
$(document).ready(function() {
 $('tr:even').addClass('even');
});
</script>
tr:even මගින් table එකේ ඇති ඉරට්‌ටෙ පේලි සොයා දෙන අතර addClass මගින් අපි කලින් css වලින් සාදාගත් even class එක එම ඉරට්‌ටෙ පේලි වලට යොදනු ලැබේ.
අවසාන ප්‍රතිපලය මෙසේ දිස්‌ වේවි.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zeebra</title>
<script src="http://thilina.gunasekara.googlepages.com/jquery.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
#zeebra {  border: 1px solid #666666; }
#zeebra td { border-left: 1px solid #D9D9D9; padding:5px; }
.even { background-color:#edf3fe; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('tr:even').addClass('even');
});
</script>
</head>

<body>
<table id="zeebra" cellspacing="0">
<tr>
    <td>Nickelback</td>
    <td>If Everyone Cared</td>
</tr>
<tr>
    <td>Goo Goo Dolls</td>
    <td>Iris</td>
</tr>
<tr>
    <td>Edwin McCain</td>
    <td>I'll Be</td>
</tr>
<tr>
    <td>Metallica</td>
    <td>Nothing Else Matters</td>
</tr>
<tr>
    <td>Nirvana</td>
    <td>Smells Like Teen Spirit</td>
</tr>
</table>
</body>
</html>
තවත් jQuery තොරතුරු සමග හමුවෙමු!