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 එකට ස්‌ලයිඩ් වෙන ලෙසයි.

සබැදිය බලන්න

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