Monday, October 27, 2008

jQuery | සරල jQuery වැඩ කිඩ

ඔන්න අපේ මලින්ත මලයත් දෙතුන් පාරක්‌ ම මතක්‌ කරපු නිසා හිතුන අද පොඩි jQuery වැඩ කෑලි ටිකක්‌ ලියන්න. jQuery ගැන කෙටි හැදින්වීමක්‌ සහ කෙටි ලිපියක්‌ මීට කලින් මම ලිව්වා. පහත සබැදි වලින් ඒවා බලන්න පුලුවන්.

jQuery javascript එකතුව ගැන කෙටි හැදින්වීමක්‌
jQuery එක්‌ක ලස්‌සන වෙන්න!
ඕනම element එකකට hover effect

අද අපි බලමු slide effect එකක්‌ කරන්නෙ කොහොමද කියලා.

උදාහරණය:

මගේ වෙබ් පිටුවේ ඉහල දකුණු කෙලවරේ contact me, click කර බලන්න. contact ෆෝරමයක්‌ පහලට එනු පෙනේවි. අද අපි හදන්න යන්නේ මීට සමාන දෙයක්‌.

අපි මුලින්ම පිටුවට toggle button එකක්‌ එකතු කරමු. මේ සදහා මම භවිතා කරන්නේ සාමාන්‍ය ලින්ක්‌ එකක්‌. මෙය වරක්‌ එබූ විට my_slide div එක පෙන්වීමටත් නැවත එබූ විට my_slide div එක නොපෙනී යාමටත් සකස්‌ කරමු.

html
<a href="#" class="my_button">show me the slide</a>

<div id="my_slide">
    <div id="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>
css
#my_slide { 
    width:300px; 
    margin-top:20px; 
    background:#CDEB8B; 
    overflow:hidden; 
}

#container { 
    padding:20px; 
}

අලුත්ම jQuery සංස්‌කරණය jQuery.com වෙතින් ලබා ගන්නට පුලුවන්. එය ඔබේ පිටුවට අමුණූ පසු පහත පරිදි කේතය ලියන්න.

javascript
<script type="text/ecmascript">
$(document).ready(function(){
    $('#my_slide').hide();
    $('.my_button').click(function(){
        $('#my_slide').slideToggle('slow');
        return false;
    });
});
</script>

මෙහි $('#my_slide').hide(); මගින් my_slide, div එක සගවනවා. ඉතිරි පේලි වලින් කියන්නේ ලින්ක්‌ එක එබූ පසු my_slide, div එකට ස්‌ලයිඩ් වෙන ලෙසයි.

සබැදිය බලන්න

නැවත හමුවෙමු !

11 comments:

Malinthe Samarakoon said...

නියමයි ඔය තියෙන්නෙ. තව ටිකක් advanced එව්වා තමයි ඕන ;)

Madhuranga Rathnayake said...

ෂෙහ්.... කියලා වැඩක් නෑ.... මරු...

මටත් අහගන්න දෙයක් තියෙනවා...
හිතන්න Image gallery එකේ තියෙනවා ලොකු image එකක් පෙන්නන්න. ඒක 800x1000 ලොකුයි. ඒ නිසා මට ඒක 800x600 ThickBox එකක scroll bar එකක් එක්ක ඇරෙන්න හදන්න ඕනා...කොහොමද ඒක කරන්නෙ...??
-ස්තුතියි-

Anonymous said...

ආ...ව්! මේක එළ නෙව. තව මේ වගේ ඒවා ලියන්ඩ ඕනේ! :)

කාලිංග said...

ආ.... කොල්ල ඉතින් වඩ කාරයනේ.... :-D
නරකද සම්පල් වගේ ඒව හදලා පෙන්නුවෙත් ? :)

තිලිණ said...

@ pvgm

thickbox එකේ width එක percentage වලින් දෙන්න

said...

ඔයා භාවිතා කරන Code Editor එක මොකද්ද?

Akila said...

ඔන්න මමත් සින්හලෙන්ම ලිව්වා. ස්තුතියි.

said...

jQuery වලින් Light Box,Gray Box Effects ගන්න පුළුවන්ද?

තිලිණ said...

ඔව්. lightbox බාවිතා කරන්නේ prototype .jQuery වලිනුත් මේ සමාන effect එකක්‌ ගන්න පුලුවන්

said...

බොහෝම ස්තූතියි. මට උදාහරණයක් හම්බ උනා
මෙතන

තිලිණ said...

ඔය තියෙන්නෙ ..හිහි