කේෂාන්ගේ මනෝ විකාර......|: ජේකුඅරි සිංහලෙන්....-2

හෆ්ෆා..යන්තං ඇති එක පේපරයක් ගොඩ දාගත්ත. ඒක ඉවර කොරල තකහනියක්ම බ්ලොග්ස්පොට් පැත්තෙ දුවගෙන ආවෙ ජේකුඅරි ගැන 2 වැනි ලිපිය ලියන්න කියල.. ආ.. කලින් එක කියවපු නැති කෙනෙක් ඉන්නවනං මෙතන කෙටුවම ඒක බලාගන්න පුළුවන්.
හරි එහෙනං පටංගමු අද දවසෙ වැඩ : හොදයි... ජේකුඅරි අපේ පිටුවකට load කරගන්න විදිය අපි කලින් දවසෙ බැලුවනෙ...

$(document).ready()

ජේකුඅරි ඉගෙන ගැනීමේදී මුලින්ම ඉගෙන ගතයුතු වන්නේ මෙන්න මේ function එකයි. ඔබේ events (events ගැන ඉස්සරහට කතාකරමු) ඇතුලත් කළ යුතු වන්නේ මෙම function එක තුලටය.

$(document).ready(function(){
// ඔබේ ජේකුඅරි වැඩ කෑලි මෙහි ඇතුලත් කල හැක ;)

});

සමහර වෙලාවට මේක කෙටියෙන් ලියන්න මෙන්න මේ විදියත් පාවිච්චි කරනව ඒකෙත් වැරැද්දක් නෑ.

$(function(){
});

අපි එහෙනං පොඩි උදාහරනයක් බලමු.

මුලින්ම ඔබේ TextEditor එක අරගෙන මෙන්න මේ විදියට HTML පිටුවක් හදාගන්න.

<html>
   <head>
           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   </head>
     <body>
          <a href="http://crazykesh.blogspot.com">Click here</a>
     </body>
</html>

මම මේකෙ කළේ HTML පිටුවට hyperlink එකක් එකතු කරපු එක දැන් බලමු ඒ ලින්ක් එක click කලාම ඒක ජේකුඅරි වලින් handle කරන විදිය.

$(function(){
$ ("a").click(function(event){
          alert("you clicked.....");
          event.preventDefault();
    });
});

මේකෙදි වෙන්නෙ ඉහත hyperlink එකේ click event එකක් ඇතිවුන හැටියෙ මෙම function එක මගින් alert එකක් ලබා දීමයි. මෙහි preventDfeault() මගින් සිදු කරනුයේ hyperlink එකෙන් ලබාදී ඇති link එකට යාම වැළැක්වීමයි.

මෙම කේතය වෙනම .js file එකක් ලෙස save කර අදාල file නම script ටැගයක් ඇතුලේ ලබාදීම හෝ HTML පිටුවටම script ටැගයක් තුල ලබාදීම කළ හැක.

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

<html>
   <head>
           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript">
              $(function(){
               $ ("a").click(function(event){
                    alert("you clicked.....");
                    event.preventDefault();
                 });
              });
   </script>
   </head>
     <body>
          <a href="http://crazykesh.blogspot.com">Click here</a>
     </body>
</html>

CSS වල වැඩ ටිකක් ගැන ඊළඟට කතාකරමු..............|

7 අදහස්:

බිඟූ said...: ela ela...; January 20, 2010 at 7:46 PM
ශාකුන්තල | Shaakunthala said...: great post! I wonder why don't you use the syntaxhighlighter..; January 21, 2010 at 12:47 AM
ම said...: එළ; January 21, 2010 at 4:51 PM
kesh said...: @ ශාකුන්තල අයියෝ..මම ඔය ගැජට්ටුව ගැන දැනං උන්නෙ නැහැ නොවැ යංතං ගූගල් කොරල හොයාගත්ත ටිප් එකට ස්තූතියි !!; January 21, 2010 at 7:56 PM
Saranga Rathnayake said...: එල එල, දිගටම ලියන්න.
මමත් JQuery ගැන ලිව්ව, මෙතනින් බලන්න.
මේකත් උදව් වෙයි,
බ්ලොග් එකට Syntax Highlighter එකක් දාගමු; January 22, 2010 at 12:45 AM
kesh said...: @ සාරංග ඔයාගෙ පෝස්ට් එකත් කියෙව්ව මරු... Syntax Highlighter ගැන කිව්වට ස්තූතියි ඒක සෑහෙන ප්‍රයෝජනවත්.. :); January 22, 2010 at 9:54 AM
සරදියල් said...: එල මචෝ දිගටම වැඩේ කරගෙන යන්න. ඊලග කොටස එනකං බලාගෙන ඉන්නවා; January 23, 2010 at 11:10 AM