About jQuery

playing with font size in jQuery

Last Updated on Sunday, 06 February 2011 21:53 Written by Zack Sunday, 06 February 2011 21:46

ဒီတစ္ခါ ေရးမယ့္ example ေလးကေတာ့ website အေတာ္ မ်ားမ်ားမွာ ျမင္ရေတြ႔ ေနရတဲ့ feature တစ္ခုျဖစ္တဲ့ font size ေတြကို အၾကီး အေသး လုပ္တဲ့ အေၾကာင္းပဲ ျဖစ္ပါတယ္။ အဲလိုမ်ိဳး feature ကို jQuery မွာဘယ္လိုမ်ိဳး လုပ္သလဲ ဆိုတာကို ေလ့လာၾကည့္ ရေအာင္။ အလုပ္လုပ္သြားပုံ ကိုၾကည့္မယ္ဆိုရင္ေတာ့

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<script type="text/javascript">
$(function() {
    $('a').click(function() {
    var os=$('p').css('font-size');

    var num=parseFloat(os,10);

    var uom=os.slice(-2);


    $('p').css('font-size', num / 1.4 + uom);
    if (this.id=='larger') {
        alert('here');
        $('p').css('font-size', num * 1.4 + uom);
    }

    })
})

</script>

</head>
<body>
    <a href="#" id="larger">Larger</a>
    </br>
    <a href="#" id="smaller">Smaller</a>
    <p> It is a paragraph</p>

</body>

</html>

လက္ရွိ font size ကို ဒီ code var os=$('p').css('font-size'); ကေန ရတယ္။ ဥမမာ 16px ဆိုတာမ်ိဳး ကိုရပါတယ္။ အဲထဲကေန 16 နဲ႔ px ကိုျပန္ျဖတ္ခ်င္လို႕ var num=parseFloat(os,10); ဒီ code ကိုသုံးျပီး 16 ကိုယူလိုက္ပါတယ္။ ဒီ line ကေတာ့ var uom=os.slice(-2); px ကိုရေအာင္ လုပ္လိုက္တာ ျဖစ္ပါတယ္။
တကယ္လို႕ smaller လုပ္ခ်င္တယ္ ဆိုရင္ေတာ့ font size ေတြကို အစား ပုံစံနဲ႕ သြားျပီး larger လုပ္ခ်င္ရင္ေတာ့ အေျမာွက္ ပုံစံနဲ႕ သြားပါ လိမ့္မယ္။

$('p').css('font-size', num / 1.4 + uom);
   if (this.id=='larger') {
       alert('here');
       $('p').css('font-size', num * 1.4 + uom);
   }

ထုံးစံ အတိုင္း စမ္းခ်င္တယ္ ဆိုရင္ေတာ့ ဒီမွာ ပါ။

Write comment (0 Comments)

appendTo in jQuery

Last Updated on Saturday, 22 January 2011 00:12 Written by Zack Friday, 21 January 2011 22:57

ကြၽန္ေတာ္ jQuery API ထဲက အသုံးမ်ားမယ့္ function ေတြ အေၾကာင္းကို ေရးလာတာ ဒီ post မွာေတာ့ appendTo(), remove() အေၾကာင္းကို ေရာက္ပါျပီ။ တကယ္တန္းေျပာရင္ အဲဒီ function ေသးေသးေလးေတြကို သင့္ေတာ္သလို႕ ေပါင္းစပ္လိုက္ျပီး jQuery Plugins အလန္းေတြ ျဖစ္လာတာ ျဖစ္ပါတယ္။ ဒါေၾကာင့္ function ေလးေတြရဲ႕ အလုပ္လုပ္သြားပုံေတြကို ေသခ်ာသိမယ္ ဆိုရင္ ဘယ္ plugin ကိုပဲ ၾကည့္ၾကည့္ အခက္မေတြ႔ ႏိုင္ပါဘူး။ ကြၽန္ေတာ္ ေရးထားျပီး သေလာက္ jQuery Post ေတြကို ျပန္ဖတ္ခ်င္တယ္ ဆိုရင္ေတာ့

1) jQuery Basic Function

2) toggle in jQuery

3) toggleClass in jQuery

4) Animate in jQuery

အရင္ဆုံး appendTo() ကိုၾကည့္လိုက္ ရေအာင္

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("<b>Hello World!</b>").appendTo("p");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Insert at the end of each p element</button>
</body>
</html>

အရမ္းကို ႐ိုးရွင္းတဲ့ concept တစ္ခု ျဖစ္ျပီး button ကို click လိုက္တိုင္းမွာ paragraph ေနာက္မွာ hello world ကိုေပါင္းသြားတာ ကိုျမင္ရပါမယ္။ အလုပ္လုပ္သြားတာကေတာ့ ဒီ coding ပဲျဖစ္ပါတယ္။

$("button").click(function(){
$("<b>Hello World!</b>").appendTo("p");
});

Test here!

ဒီတစ္ခါေတာ့ ul, li ေတြကို appendTo(), remove() ေတြကိုသုံးျပီး စမ္းၾကည့္ ရေအာင္။

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<script type="text/javascript">
    $(function() {
        var i = $('li').size() + 1 ;
        $('a#add').click(function() {
            $('<li>' + i + '</li>').appendTo('ul');
            i++;

        });

        $('a#remove').click(function() {
            $('li:last').remove();
            i--;
        });

    });

</script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<a href="#" id="add"> Add List Item</a>
</br>
<a href="#" id="remove">Remove List Item</a>
</body>
</html>

"Add List Item" ကို click လိုက္တဲ့ အခါ လက္ရွိ စုစုေပါင္း li ေတြရဲ႕ count ကို 1 ေပါင္းျပီး ul ထဲမွာ appendTo() သုံးကာ ထည့္သြားတာကို ေတြ႔ရပါမယ္။

var i = $('li').size() + 1 ;
$('a#add').click(function() {
$('<li>' + i + '</li>').appendTo('ul');
i++;
});

remove() သုံးသြား တာေလးကလဲ လွပါတယ္။ li ရဲ႕ ေနာက္ဆုံးေကာင္ကို ယူလိုက္ျပီး remove() function ကိုသုံးျပီး ျဖဳတ္လိုက္တာကိုေတြ႔ ရပါမယ္။

$('a#remove').click(function() {
$('li:last').remove();
i--;
});

Test here!

ဟုတ္ျပီဗ်ာ ဒီတစ္ခါ နဲနဲေလးခ်ဲျပီး စဥ္းစားၾကည့္ ရေအာင္။ div container တစ္ခု လုပ္ထားျပီး အဲဒီထဲကို သီျခား html file တစ္ခုကို append လုပ္ျပီး ထည့္မယ္ ဆိုရင္ေရာ။

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

    <script type="text/javascript">
            $(function() {
                $('a').click(function() {
                    $('#info').load('another.html #movies', function() {
                        $(this).hide()
                            .appendTo('#container')
                            .slideDown(1000);
                        });


                })
            });
        </script>

</head>
<body>
    <div id="container">
        <h1>My favorite Movies</h1>
    </div>
    <div id="info"></div>
    <a href="#">Load Favorite Movies</a>
</body>
</html>

Load Favorite Movies ကို click ရင္ div info ထဲကို another.html ထဲက id = movies ျဖစ္ေနတဲ့ အပိုင္းကို အရင္ဆုံး load လုပ္ျပီး div container ထဲကို appendTo() ကိုသုံးျပီး ထည့္လိုက္တာကို ေတြ႔ရပါလိမ့္မယ္။ အဲဒီေတာ့ another.html ကို create လုပ္ထားဖို႔ေတာ့ လိုတာေပါ့ဗ်ာ။

<html>
<body>
<ul id="movies">
    <li> Social Networks </li>
    <li> Salt</li>
    <li> Knight and Days</li>
</ul>
</body>
</html>

Test here!

Write comment (3 Comments)

toggleClass in jQuery

Last Updated on Tuesday, 18 January 2011 12:01 Written by Zack Tuesday, 18 January 2011 11:54

ျပီးခဲ့တဲ့ ဒီ post မွာ toggle အေၾကာင္းကို ေရးခဲ့ပါတယ္။ အရင္ post မွာတုန္းက jquery function ေတြကို toggle လုပ္သြား သလိုမ်ိဳး CSS Class ေတြကိုလဲ ဘယ္လိုမ်ိဳး toggle လုပ္ႏိုင္လဲ ဆိုတာ ၾကည့္ရေအာင္။

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
#box
{
   width: 200px;
   height: 200px;
   background: red;
}
.border
{   border: 5px solid black;
}
.highlight
{
   background: yellow;
}
.large
{   font-size: 150%;
   color:red;
}

</style>
<script type="text/javascript">
   $(function() {
       $('a').click(function() {
           $('#box').toggleClass('border');
       });

       $('p').click(function() {
           $(this).toggleClass('highlight large border');
       });
   });
</script>

</head>
<body>
<div id="box"></div>
<a href="#">Click Me</a></br>

<p>This is a paragraph block</p>
<p>This is a paragraph block</p>

</body>

</html>

$('#box').toggleClass('border');

ကေတာ့ box ဆိုတဲ့ div ေလးကို border css class နဲ႔ toggle လုပ္တာ ျဖစ္ပါတယ္။

$(this).toggleClass('highlight large border');

ကေတာ့ CSS Class တစ္ခုထက္ မက ပိုထည့္လို႔ ရေၾကာင္းကို ေျပာခ်င္လို႕ပါ။ ဒီမွာ စမ္းၾကည့္ ႏိုင္ပါတယ္။

Write comment (0 Comments)

Animate in jQuery

Last Updated on Saturday, 08 January 2011 20:29 Written by Zack Saturday, 08 January 2011 20:03

ဒီ post မွာေတာ့ animate အေၾကာင္းေလး ေရးမွာပါ။ တကယ္ေတာ့ မသိရင္ animation တစ္ခုျဖစ္သြားတယ္လို႕ ထင္ရေအာင္ CSS properties ေတြကို ကစားတာပဲျဖစ္ပါတယ္။ animate အတြက္ syntax ကေတာ့

(selector).animate({styles},{options})

style ကေတာ့ css property ေတြကိုထည့္ေပးႏိုင္ျပီး options ကေတာ့ speed ကို ကစားတာ ျဖစ္ပါတယ္။ ဒီ ဥပမာေလး ကိုၾကည့္ရင္ အဆင္ေျပႏိုင္ပါတယ္။

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
#box {
    background:red;
    height:100px;
    width:200px;
    position:relative;
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $('#box').animate({left:"300px"},"slow");
            $('#box').animate({height:"300px"},"slow");
            $('#box').animate({height:"100px"},"slow");
            $('#box').animate({left:"0px"},"slow");
            $('#box').animate({fontSize:"2em"});
        });
    });
</script>
</head>
<body>
<div id="box">Welcome!</div>
<button>Start Animation</button>
</body>
</html>

ဒီမွာ အရင္သြားျပီး run ၾကည့္လိုက္ေစလိုပါတယ္။ ဒါမွာ ေအာက္ကေရးထားတာကို ဆက္စပ္လို႕ ရမွာျဖစ္ပါတယ္။ အေပၚက code ကိုၾကည့္မယ္ဆိုရင္ေတာ့ left, width, height စတာေတြကို အတိုးအေလွ်ာ့လုပ္ျပီး animate လုပ္သြားတာကို ေတြ႔ရႏိုင္တယ္ဗ်ာ။ အဲဒါေတြကို toggle နဲ႔လုပ္ၾကည့္မယ္ ဆိုရင္ေရာ ရႏိုင္မလား ? ရႏိုင္တာေပါ့ဗ်ာ။

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
#box {
    background:red;
    height:100px;
    width:200px;
    position:relative;
}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $('#clickme').click(function() {
        $('#box').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
        }, 5000, 'linear', function() {
          $(this).after('<div>Animation complete.</div>');
        });
});
    });
</script>
</head>
<body>

<button>Start Animation</button>
<div id="box">Hello!</div>
<input type="button" value="Click Me" id="clickme">
</body>
</html>