සැම බ්‍රව්සරයක්‌ ම එකම ආකාරයෙන් වෙබ් පිටු දර්ශනය කරන්නේ නැහැ. 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 තොරතුරු සමග හමුවෙමු!
Posts
7 comments:
වාව් වාව්.............
jQuery Javascript නියමයිනේ.
ඔහොම යං ඔහොම යං.
ඔබේ ලිපි කියෙව්වා. නියමයි. සවිස්තරව පැහැදිලිව ලියා තිබෙනවා. මෙවන් පරිගණක ආශ්‍රිත තාක්ෂණික කරුණු සිංහලෙන් කියාදෙන බ්ලොග් අඩවි නැති තරම්. මෙවන් බ්ලොග් පරිගණක තාක්ෂණය හදාරණ නවකයින්ට අත්වැලක් වේවි.
තාක්ෂණික කරුණු කියාදෙන බ්ලොග් අඩවි තව තවත් පටන් ගන්න කියා ක්ෂේත්‍රයේ ඉන්න හැමොගෙන්ම ඉල්ලන්න කැමතියි. (ලඟදිම මමත් එකක් පටන් ගන්නම්... :) )
සරලව හා පැහැදිලිව මේ වගේ නොදන්න කරාණු හැමෝගෙම දැනගැනීම සඳහා පලකරනවට බොහොමත් ම ස්තූතිවන්ත වෙනව.දිගට ම කරගෙන යාමට අවැසි හැකියාව හා කාලය ලැබෙන්න කියා පාර්තනා කරනවා.
cool pichchoo.... nice work as ever,, keep it up...
සරලයි - සුගමයි - නියමයි! :)
නියමයි
නියමයි
Post a Comment