About jQuery

Toggle in jQuery

Last Updated on Saturday, 08 January 2011 18:29 Written by Zack Saturday, 08 January 2011 18:21

ကြၽန္ေတာ္ ဒီ Post မွာ jQuery basic function ေလးေတြျဖစ္တဲ့ fadein(), fadeout(), hide(), show() စတာေတြကို ေရးခဲ့ပါတယ္။ ဒါဆိုရင္ ေမးစရာရွိတယ္ဗ်ာ။ fadein() နဲ႔ fadeout()၊ show() နဲ႔ hide() ေတြကို toggle တစ္ခုထည္းနဲ႔ ထိန္းမယ္ဆိုရင္ေရာ ရႏိုင္မလား? jQuery မွာ toggle ဆိုတဲ့ function ရွိတယ္ဗ်ာ။ ဘယ္လိုသုံးလဲ ဆိုတာၾကည့္လိုက္ရေအာင္

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
    #box_green
    {
    background: green;
    width: 100px;
    height: 100px;
    display: none;
    }
    #box_red
    {
    background: red;
    width: 100px;
    height: 100px;
    display: none;
    }
</style>

<script type="text/javascript">
    $(function() {
        $('a#boxred').click(function() {
            $('#box_red').toggle(5000, function() {alert("This is callback because after toggle you can see this message.")
            });
        });
        $('a#boxgreen').click(function() {
            $('#box_green').toggle(5000, function() {alert("This is callback because after toggle you can see this message.")
            });
        });
    });
</script>
</head>

<body>
<div id="box_green"> </div></br>
<a href="#" id="boxgreen">toggle green box</a></br>

<div id="box_red"> </div></br>
<a href="#" id="boxred">toggle red box</a></br>

</body>
</html>

example ေလးကရွင္းပါတယ္။ box_red နဲ႔ box_green div ေတြကို create လုပ္ထားျပီး display ကို css ထဲကေန none ေပးထားတာေၾကာင့္ မျမင္ရပါဘူး။ အဲဒါေတြကို toggle green box & toggle green box ဆိုတဲ့ Links ေတြကို click လိုက္တဲ့ အခါ toggle function ကိုေခၚလိုက္တာျဖစ္ပါတယ္။ ဒါဆိုရင္ toggle သေဘာတရားကို သိေလာက္ပါျပီ။ ဒီမွာ စမ္းၾကည့္ ႏိုင္ပါတယ္။

Write comment (0 Comments)

jQuery Basic Functions

Last Updated on Sunday, 02 January 2011 20:33 Written by Zack Sunday, 02 January 2011 19:00

ကြ်န္ေတာ္ဒီ post မွာ jQuery ရဲ႕ အေျခခံ function ေလးေတြျဖစ္တဲ့ fadeOut(), fadeIn(), hide(), show() စတဲ့ function ေလးေတြ အသံုးျပဳပံု ကို ေရးမွာျဖစ္ပါတယ္။

Syntx ကေတာ့ - $(selector).fadeOut(speed,callback) ပါ Speed parameter ကို milliseconds နဲ႔ေဖၚျပလို႔ရတယ္

ဥပမာ 1sec =1000 , slow လို႔သံုးလို႔လည္းရတယ္, fast ဆိုတဲ့ value လည္းရတယ္ , normal ကေတာ့ auto ပါ

ဒါဆို ေရးၾကည့္မယ္ paragraph အားလံုးကို 1sec နဲ႔ callback မပါဘဲ fade out လုပ္ၾကည့္မယ္

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
   $(function() {
       $(‘a’).click(function() {
              $(“p”).fadeOut(1000)
       });
});
</script>
</head>
<body>
   <p>This is a paragraph</p>
   <a href=“#”>Fade out</a>
</body>
</html>

fadeIn(), hide(), show() ေတြကလည္းအလားတူပါဘဲသံုးလို႔ရပါတယ္

$("p").fadeIn(1000)
$("p").hide(1000)
$("p").show(1000)

1000 ေနရာမွာ slow , fast ဆိုတဲ့ value လည္းသံုးလို႔ရေသးတယ္

$("p").fadeIn(fast)

callback parameter မသံုးတဲ့ ပုံစံကို သေဘာေပါက္နားလည္လိမ့္မယ္ထင္ပါတယ္။

ၿပီးခဲ့တဲ့ function ေတြကို callback parameter နဲ႔ပါသံုးၾကည့္မယ္ဆိုရင္ ဒီလိုပါ

ကြ်န္ေတာ္ေရးထားတာေတြကို ဒီ link မွာသြားစမ္းႏိုင္ပါတယ္။

- Fadeout only

- Basic Functions

Write comment (7 Comments)

jQuery Tutorial for set background color of p tag with class

Written by Zack Tuesday, 09 March 2010 06:22

ဒီ jQuery example ေလးကေတာ့ ဒီ post ရဲ႕အဆက္လို႕ေျပာနိုင္ပါတယ္။ ဘာလို႕လဲဆိုေတာ့ဒီ post မွာ CSS ရဲ႕ ID ေတြကို

Background color ထည့္မွာျဖစ္ပါတယ္။

<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p#intro").css("background-color", "yellow");
});
});
</script>
</head>

<body>
<h2>This Example will set yellow color to background of the paragraph that using id="intro"</h2>
<p id="intro">This paragraph'id is using intro.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

$("p#intro").css("background-color", "yellow");

Click me ကို click လုပ္လိုက္ရင္ေတာ့

<p id="intro"></p> ေရးထားတာေတြအားလံုးကို Background ထည့္ေပးမွာျဖစ္ပါတယ္။ က်န္တဲ့ <p>tag ေတြကို Background

မထည့္ပဲ id="intro" လို႕ေရးထားတာေလးကိုပဲထည့္ေပးသြားမွာေတြ႕နိုင္ပါတယ္။ ဒီမွာ စမ္းၾကည့္ျပီးေတာ့ ဒီမွာ Download ရယူနိုင္ပါတယ္။

Write comment (0 Comments)

jQuery Tutorial for set background color of p tag with class

Last Updated on Tuesday, 09 March 2010 04:37 Written by Zack Tuesday, 09 March 2010 03:49

ဒီ example ေလးက jQuery မွာ selector ေတြမွာ CSS ေတြကိုဘယ္လိုသံုးတယ္ဆိုတာကိုုရွင္းျပမွာျဖစ္ပါတယ္။

<html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p.intro").css("background-color", "yellow");
});
});
</script>
</head>

<body>
<h2>This Example will set yellow color to background of the paragraph that using class="intro"</h2>
<p class="intro">This paragraph'class is using intro.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>