Zack Notes

toggleClass in jQuery

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)

Joomla 1.6 is available NOW!

Written by Zack Wednesday, 12 January 2011 00:20

10 January 2011 မွာ Joomla 1.6 ကို released လုပ္လိုက္ပါၿပီ၊ Joomla ၏ Next Generation ျဖစ္ရမယ္ဆိုတဲ့အတိုင္း More Power, More Control, More Option ေတြပါ၀င္လာတာကိုေတြ႕ရပါတယ္။ small, medium, enterprise, Business nature ေတြေပၚမႈတည္ၿပီး web application, နဲ႕ intranet application ေတြကိုပိုမိုလြယ္ကူစြာ တည္ေဆာက္ႏိုင္ပါလိမ့္မယ္။ အခု Joomla 1.6 ပါလာတဲ့ feature အသစ္ေတြကို အၾကမ္းမ်ဥ္းၾကည့္မယ္ဆိုရင္ျဖင့္

1. Nested category – simple ျဖစ္တဲ့ one level category ကေန complex ျဖစ္တဲ့ mulit level category ေတြကို ထဲ့လို႔ရပါၿပီ။

2. Assess control – community based web site မ်ား၊ user group ျဖစ္တဲ့ club web site ေတြတည္ေဆာက္တဲ့အခါအေရးႀကီးတဲ့ Assess control level Joomla အေခၚအရ ACL ေတြကို ပိုၿပီး powerful ျဖစ္ေအာင္လုပ္ထားတယ္လို႔ဆိုပါတယ္။

3. Installation improvement - အရင္က extension ေတြကိုတစ္ခုတည္းလုပ္ႏိုင္ေပမယ့္ အခု Joomla 1.6 မွာေတာ့ mulitple လုပ္ႏိုင္ပါၿပီ။

4. Expended language support – multi-lingual sites ေတြတည္ေဆာက္တဲ့အခါ အေရးႀကီးတဲ့ language support အပိုင္းေတြကိုအလြယ္တကူ လုပ္ႏိုင္ပါလိမ့္မယ္။

5. Template and module – designer တစ္ေယာက္အေနနဲ႔ Template ေတြကို ျမန္ျမန္ဆန္ဆန္နဲ႔တည္ေဆာက္ႏိုင္မယ့္အျပင္ module ေတြကို publish လုပ္တဲ့အခါ start time , end time စတဲ့ additional feature ေတြပါလာပါၿပီ၊

6. Additional feature - အရင္က Joomla ရဲ႕ workflow ေတြကို ရိုးရွင္းလြယ္ကူသြားေအာင္ လုပ္ထားတဲ့ အတြက္ပိုၿပီး efficient ျဖစ္သြားပါလိမ့္မယ္။

7. User type - အရင္တုန္းက Joomla ရဲ႕ User type မွာမရွိေသးတဲ့ features ျဖစ္တဲ့ Designer, Developer, Administrator, Webmaster စတဲ့ additional user type ေတြပါလာတာေတြ႕ရပါတယ္၊ တစ္ခုျခင္းစီရဲ႕ features ေတြကိုေအာက္က Link မွာၾကည့္ႏိုင္ပါတယ္။
- Designer Features
- Developer Features
- Administrator Features
- Webmaster Features

Joomla 1.6 ကိုေလ့လာခ်င္ရင္ေတာ့ ေအာက္က Link ေလးေတြက အသံုး၀င္ပါလိမ့္မယ္။

- Check the requirements

- Download Joomla

- Read the beginner docs

- Meet your comunity

- Browse 1.6 native extensions

- Get Joomla! in your language

- Youtube chanel

Write comment (14 Comments)

Mac App Store

Written by Zack Sunday, 09 January 2011 01:04

iPhone, iPad စတဲ့ mobile device ေတြမွာ applications ေတြအားေကာင္းမႈေၾကာင့္ ေအာင္ျမင္မႈေတြ ရေနတဲ့ apple ဟာ Mac App Store မွာလည္း ဆက္လက္ေအာင္ျမင္မယ့္ အေနအထား ရွိေနပါတယ္။ စျပီး launch လုပ္တဲ့ေန႕မွာပဲ download ေပါင္း 1 million ရွိခဲ့ တယ္လို႕ apple ကထုတ္ျပန္ခဲ့ပါတယ္။ Apple CEO Steve Jobs ကေတာင္ application က 1000 သာသာေလာက္ပဲ ရွိတဲ့ အခ်ိန္ေလးမွာ download 1 million ရွိေနတဲ့ user ေတြရဲ႕ response ေတြကို အံဩမိ ေၾကာင္းေျပာသြားပါတယ္။ သုံးခ်င္တယ္ဆိုရင္ေတာ့ Mac OS X 10.6.6 ျဖစ္ဖို႔ပဲ လိုပါတယ္။ Apple -> App Store မွာ လိုခ်င္တဲ့ app ေတြကို ရွာေဖြျပီး သုံးႏိုင္ပါျပီ။ Myanmar Tutorials မွာလည္း Mac App Store အေၾကာင္း ေရးထားတာ ဒီမွာ ရွိပါတယ္။ English လိုေရးထားတဲ့ တျခား links ေတြကို ဆက္ဖတ္ခ်င္တယ္ ဆိုရင္ေတာ့

- The Mac App Store: A Walkthrough
- 10 Must-Have Apps in the Mac App Store

Write comment (0 Comments)

Animate in jQuery

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>

ဒီေနရာမွာ သုံးသြားတာက animate ကိုဒီလို syntax နဲ႔သုံးသြားတာ ပဲျဖစ္ပါတယ္။

.animate( properties, [ duration ], [ easing ], [ callback ] )

ဒီမွာ စမ္းၾကည့္ႏိုင္ပါတယ္။ ဒီေလာက္ဆိုရင္ animate သေဘာကို သိေလာက္ပါျပီ။ ကြၽန္ေတာ္လဲ အဲေလာက္ပဲသိတာဗ်။

Write comment (0 Comments)

Toggle in jQuery

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)

Quick question to me?

Written by Zack Monday, 03 January 2011 20:31

ကြၽန္ေတာ္ Site မွာ QA ပုံစံမ်ိဳး လုပ္လို႕ရတဲ့ extension တစ္ခုကိုထည့္ထားပါတယ္။ ဘာေၾကာင့္ထည့္ထားရသလဲဆိုရင္ေတာ့

ကြၽန္ေတာ္ Site ကိုလာဖတ္ေနတဲ့သူ တစ္ဦးျဖစ္တဲ့ ကိုေအာင္ေအာင္က အၾကံျပဳထားပါတယ္။ တစ္ခ်ိဳ႕ comment မွာေမးထားတာေတြက ေရးထားတဲ့ အေၾကာင္းအရာ နဲ႔ မကိုက္တဲ့ဟာမ်ိဳးေတြ ျဖစ္ေနတာမ်ိဳးေတြ ျဖစ္ေနတယ္။ ဒါေၾကာင့္ QA ပုံစံမ်ိဳးေလး ရွိရင္ အဆင္ေျပႏိုင္မယ္လို႕ အၾကံျပဳပါတယ္။

ဟုတ္ပါတယ္။ ကြၽန္ေတာ္လည္း အဲလိုလြဲေနတာမ်ိဳးေတြကို ေတြ႔ပါတယ္။ ကြၽန္ေတာ္ QA ကိုမထည့္ထားတာက ကြၽန္ေတာ္ Site က community မရွိဘူးဗ်။ အေျဖေတြက တစ္ဦးတစ္ေယာက္ထဲရဲ႕ အျမင္မ်ိဳးပဲ ျဖစ္ေနပါလိမ့္မယ္။ ေနာက္ျပီး community QA ေတြလိုမ်ိဳးလဲ ျမန္ခ်င္မွ ျမန္လိမ့္မယ္။ အဲဒါေတြကို လက္ခံႏိုင္တယ္ ဆိုလို႕ ကေတာ့ ေမးလို႕ရပါတယ္။ ကြၽန္ေတာ္သိထားတာကို ေျပာျပမယ္။ မသိတာရွိရင္လည္း ဝိုင္းရွာေပးမယ္ဗ်ာ။

ေမးခ်င္တယ္ ဆိုရင္ေတာ့ menu မွာ Quick Question to me? ဆိုတာေလးကို click လိုက္ပါ။ ကိုယ္ေမးခ်င္တဲ့ category ကိုေရြးျပီး Question တင္ႏိုင္ျပီး ကိုယ့္ၾကိဳက္တဲ့ Answer ကိုလဲ "Best Answer" အေနနဲ႔ ေရြးေပးႏိုင္ပါတယ္။ Answer submit လုပ္ရင္လဲ email notify ရႏိုင္မွာ ျဖစ္ပါတယ္။ ေမးခြန္းတင္ဖို႔ register လုပ္ဖို႔ေတာ့ လိုတာေပါ့ ... အဲဒီ Joomla Extension ကိုေတာ့ေနာက္ Post တစ္ခုမွာ details ေရးပါမယ္။

Write comment (12 Comments)

Zack Notes

toggleClass in jQuery

Joomla 1.6 is available NOW!

Mac App Store

Animate in jQuery

Toggle in jQuery

Quick question to me?

More Articles...

Login Form

Latest Post

Categories Table View

Most read article

RSS Feed

Facebook Share

Accordion FAQ

mod_joomtouch