LavaLamp for jQuery lovers

ဒီေန႔ http://www.barcampyangon.org/ ကုိ ၀င္ၾကည့္ျဖစ္ပါတယ္။ Myanmar-Info Tech 2010,January 23rd-24th 9am to 5pm မွာ က်င္းပမယ့္ နည္းပညာဆုိင္ရာ ေဆြးေႏြးပဲြေလးပါ။ အဲဒီမွာ ၾကည့္ရင္းနဲ႔ အေပၚက menu bar ေလးက အရမ္းကုိလွတာေတြ႔ ရပါတယ္။ menu bar မွာ mouse hover ျဖစ္တဲ့ေနရာကုိ background image ေလးက ဘယ္ဘက္ထိပ္ကေနျပီး ေရြ႕လာတာျဖစ္ပါတယ္။
flash နဲ႔ လုပ္ထားတာ ျဖစ္မယ္ဆုိျပီးေတာ့ ကုတ္ေတြကုိ လုိက္ရွာၾကည့္တဲ့ အခါမွာ သူက javascript နဲ႔ jQuary ကုိ အသံုးျပဳျပီး ေရးထားတာ ေတြ႔ရပါတယ္္။ အဲဒီမွာ လာျပီ jQuary ????

What is jQuery?
jQuery is a new kind of JavaScript Library.
jQuery is great library for developing ajax based application. jQuery is great library for the JavaScript programmers, which simplifies the development of web 2.0 applications. You can use jQuery to develop cool web 2.0 applications. jQuery helps the programmers to keep code simple and concise. The jQuery library is designed to keep the things very simple and reusable.
jQuary ဆုိတာ javascript အတြက္ အသင့္ေရးထားတယ့္ Library file ေတြပါ။ website ေတြမွာ javascript code ေတြကုိ နည္းနည္းနဲ႔ effect ေကာင္းေကာင္း ေရးႏုိင္ဖုိ႔ အတြက္လုပ္ထားတာပါ။ jQuary နဲ႔ ေရးထားတယ့္ website ေတြမွာ ကုတ္ေတြက နည္းနည္းေလးပဲပါတာေတြ႕ ရပါတယ္။ jQuary အေၾကာင္းကုိ http://jquery.com/ မွာ ေလ့လာႏုိင္ပါတယ္။ အခုေတာ့ ဒီ LavaLamp အေၾကာင္းပဲ ဆက္ပါဦးမယ္။

LavaLamp
ဒီ jQuary ကုတ္ေလးက ၇၀၀ ဘုိက္ပဲ ရွိပါတယ္။ ေရးသားသူကေတာ့ Guillermo Rauch ပါ။ LavaLamp လုိ႔ အမည္ေပးသူကေတာ့ Stephan Beal ပါ။ User Interface developers ေတြအေနနဲ႔ သိရမွာက website visitors ေတြ အေနနဲ႔ ပထမဆံုး အသံုးျပဳတဲ့ widget က MENU BAR ပါ။ menu bar ကုိ အာရံုစုိက္သြားေအာင္ လုပ္ျခင္းက visitors ေတြကုိ ဆဲြေဆာင္ႏုိင္ပါတယ္။ ပံုမွန္ HTML widget တစ္ခုမွာ (၃) ပုိင္းပါပါတယ္။
* A semantically correct HTML markup
* A CSS to skin the markup
* An unobstrusive javascript that gives it a purpose
အဲဒီ အဆင့္တုိင္းပဲ ေလ့လာသြားပါမယ္။

Step 1: The HTML
User Interface developer အမ်ားစုက Menu တုိ႔ Navbar တုိ႔ ေတြလုပ္ရာမွာ unordered list(ul) ကုိအသံုးျပဳတာ အေကာင္းဆံုးလုိ႔ ေျပာၾကပါတယ္။ အဲလုိပဲ စလုိက္ၾကစုိ႔။ အခုေရးမယ့္ဟာေတြကုိ < body &gy နဲ႔ < /body > ၾကားထဲမွာထည့္ရပါမယ္။ ေနာက္ကေန ဆက္ေရးေပးမယ့္ CSS နဲ႔ javascript link ေတြကုိေတာ့ < head > နဲ႔ < /head > ၾကားမွာ ထည့္ရပါမယ္။

< ul class="lavaLamp" >
< li > < a href="#" > Home < /a > < /li >
< li > < a href="#" > Plant a tree < /a > < /li >
< li > < a href="#" > Travel < /a > < /li >
< li > < a href="#" > Ride an elephant < /a > < /li >
< /ul >

အေပၚမွာ ul ဆုိတာ menu ကုိေဖာ္ျပျပီး li ကေတာ့ menu-item ေတြကုိ ေဖာ္ျပတာပါ။ ဒီကုတ္မွာ menu-item ေတြကုိ ဘာ background မွ မထည့္ထားပါဘူး။ ထည့္ဖုိ႔ရာ ေအာက္ပါအတုိင္း ျပင္ေရးရ ပါလိမ့္မယ္။ # ကေတာ့ link ေတြထည့္ဖုိ႔ပါ။

< li class="back" > < div class="left" > < /div > < /li >

Step 2: The CSS
CSS skin ကုိ ကုိယ့္ဟာကုိယ္ ၾကိဳက္သလုိ ေရးလုိ႔ ရပါတယ္။ အခုဟာက ျဖစ္ႏုိင္တဲ့ တစ္ခု ကုိေရးျပထားတာပါ။ ကုိယ့္ဟာကုိယ္ ထြင္ျပီးေရးၾကည့္ပါ။ CSS ကုိ link နဲ႔ ထုတ္ျပီး သပ္သပ္ထားႏုိင္သလုိ < head > ထဲမွာလည္းေရးႏုိင္ပါတယ္။

/* Styles for the entire LavaLamp menu */
.lavaLamp
{
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li
{
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back
{
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left
{
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a
{
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}

အရင္ဆံုး ul မွာ background-image ကို bright orange background image ကုိထားလုိက္ပါတယ္။ က်န္တာကေတာ့ menu-item ေတြကုိ ၾကည့္ျပီး height,width,padding,margin ထားလုိက္တာပါပဲ။ relative position ထားပါတယ္။ ဘာလုိ႔လဲဆုိေတာ့ li ရဲ့ background ကုိ ul ထဲမွာ လြတ္လပ္စြာ ေျပာင္းလဲႏုိင္ေအာင္လုိ႔ပါ။
ေနာက္ li ကုိ horizontal ထားပါတယ္။ default က vertical ပါ။ "float:left " က ေျပာင္းလဲေပးပါတယ္။
ေနာက္ li ကုိ highlighted-background ေၾကညာေပးပါတယ္။ hover အတြက္ရယ္၊ သာမန္အေျခအေန အတြက္ရယ္ပါ။
ေနာက္ဆံုးအေနနဲ႔ menu-item တစ္ခုစီအတြက္ click လုိက္ရင္ ျဖစ္မယ့္ font အမ်ိဳးအစား၊ color၊ text-decoration စသည္တုိ႔ေၾကညာပါတယ္။


Step 3: The Javascript
ဒီအပုိင္းကေတာ့ လြယ္သြားပါျပီ။ javascript file ေတြကုိ ေၾကညာတဲ့ အပုိင္းပါ။

< script type="text/javascript" src="path/to/jquery.js" > < /script >
< script type="text/javascript" src="path/to/jquery.lavalamp.js" > < /script >
< !-- Optional -- >
< script type="text/javascript" src="path/to/jquery.easing.js" > < /script >

< script type="text/javascript" >
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
< /script>

နမူနာ လုပ္ထားတဲ့ဖုိင္မွာ ေအာက္ကကုတ္ေလးကုိ ျပင္ရပါမယ္။ false ျဖစ္ေနတာကုိ true လုိ႔ျပင္ေပးရပါမယ္။

$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});

လုိအပ္တဲ့ ဖုိင္ေတြကုိ ေဒါင္းျပီး link ထုတ္ေပးရပါမယ္။ jQuery here, Easing plugin here, and the LavaLamp plugin here.
You have the option to supply an easing “fx” , the “speed” with which the animation happens and a callback to be executed when a menu-item is clicked. They are optional, the default “fx” being “linear” and the default “speed” being “500″ ms.
နမူနာဖုိင္ကုိ ဒီမွာေဒါင္းႏုိင္ပါတယ္။
MORE INFO ==> http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/