JQuery တဲ့လား (၁)

ThihaJanuary 27, 2010Javascript and Ajax

JQuery ဆို နေရာတကာမှာ ပါတဲ့ javascript library ဖြစ်ပါတယ်။ သုံးရတာ အတန်အသင့် လွယ်ကူသလို၊ လေ့လာတဲ့အခါမှာလည်း အသုံးချသူ ဖက်က အတန်အသင့် လွယ်ကူပါတယ်။ jQery Tutorial အနေနဲ့ ပထမဦးဆုံး Sliding Panel ရေးတဲ့ နည်းနဲ့ စဖွင့်ပါမယ်။

ပထဦးဆုံးလုပ်ရမှာက Template Design ပါ။ ဒါပေမယ့် ဒီ Tutorial မှာတော့ အဲဒီ Design ပိုင်းကို ကျော်သွားပါ့မယ်။ အရင်ဆုံး Folder Structure ကို ကြည့်ရအောင်

Root Folder နေရာမှာတော့ ကိုယ်ကြိုက်တာ ထားပေါ့။ js ဆိုတဲ့ Folder တစ်ခုရယ်၊ images ဆိုတဲ့ Folder တစ်ခုရယ် Folder နှစ်ခု ဆောက်ရပါမယ်။ js ဆိုတဲ့ Folder ကတော့ jquery.js ဆိုတဲ့ slidepanel.js ဆိုတဲ့ ဖိုင်နှစ်ခုကို ထည့်ဖို့ပါ။ jquery.js ကိုတော့ http://jquery.com/ မှာ သွားပြီး ဒေါင်းလုတ်ချပါ။ minified ကို Download ချရင်လည်း ဖြစ်ပါတယ်။ ပြီးရင် jquery.js ဆိုပြီး ဖိုင်နာမည်ကို ပြောင်းလိုက်ပါ။ နောက်ထပ် blank js file အနေနဲ့ Notepad မှာ ဘာမှမရေးပဲ Blank Document အနေနဲ့ထားပြီး slidepanel.js ဆိုတဲ့ နာမည်နဲ့ js Folder ထဲမှာ သိမ်းလိုက်ပါ။

နောက်တစ်ဆင့် အနေနဲ့ images ဆိုတဲ့ ဖိုဒါထဲမှာ အောင်မှာ ပေးထားတဲ့ ဇစ်ဖိုင်ကို Download ချ ပြန်ဖြည်ပြီး images folder ထဲကို ထည့်လိုက်ပါ။ ဒါကတော့ အထဲမှာ ပါလာမယ့် ဖိုင်တွေပါ။

You can download HERE for ZIP FILE.

ကဲအဲဒါတွေပြီးသွားရင် index.html၊ style.css၊ ie.css ဆိုတဲ့ ဖိုင် သုံးခု ဆောက်လိုက်ပါ။ ဒီနေရာမှာ တစ်ခု ပြောချင်တာက Coding လုပ်တဲ့အခါမှာ Dreamweaver ဖြစ်ဖြစ်၊ Netbean ဖြစ်ဖြစ် သုံးစေချင်ပါတယ်။ ကိုယ် Coding လုပ်တဲ့အခါမှာ အများကြီး အထောက်အကူ ဖြစ်ပါတယ်။ index.php ကိုဖွင့်ပြီး အောက်မှာပေးထားတဲ့ Code ကို ရိုက်ထည့်လိုက်ပါ။ တတ်နိုင်သမျှ Copy& Paste မလုပ်စေချင်ပါဘူး။

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>TESTING SLIDEPANEL</title>
    <!-- STYLE SHEETS -->
    <link href="style.css" rel="stylesheet" type="text/css" />

    <!-- JS FILES -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/panelslide.js" type="text/javascript"></script>
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>

<body>
    <div id="container"> <!-- Container Start -->
        <div id="header"> <!-- Header Start -->
            <div id="slide-panel"> <!-- Slide Panel Start -->
                SLIDE PANEL CONTENT HERE
            </div> <!-- Slide Panel End -->
            <p class="slide"><a href="#" class="btn-slide">Login</a></p> <!-- LOGIN BUTTON TEXT -->
        </div> <!-- Header End -->
    </div> <!-- Container End -->
</body>
</html>

ကဲ index.html ပြီးရင် style.css ဖက် လှည့်ရအောင်။ style.css ကို ဖွင့်ပြီး အောက်မှာ ပေးထားတဲ့ Code တွေကို ရိုက်ထည့်လိုက်ပါ။

* {
	margin: 0px; /*No margin */
	padding: 0px; /* No padding */
}

body {
	background-image:url(images/bg.png); /* BACKGROUND IMAGE */
	background-repeat: repeat-x; /* REPEAT HORIZONTALLY */
	background-color: #E6E6E6; /* SET BACKGROUND COLOR */
	margin: 0 auto; /* SET TOP AND BOTTOM MARGIN TO 0 ALSO SETS LEFT AND RIGHT MARGIN TO AUTO */
	padding:0; /* NO PADDING */
	font-family: Arial, Helvetica, sans-serif; /* SET FONT FAMILY */
	line-height: 100%; /* LINE HEIGHT */
}

#search_box {
        background-image: url(images/search_bar.png);
        float: right;
        width: 378px;
        height: 44px;
        margin-right: 5px;
        margin-top: 35px;
}

#container {
	margin: auto; /* SETS MARGINS TO AUTO, THIS CENTER'S OUR WEBSITE */
	width: 900px; /* CONTAINER WIDTH */
}

#header {
	float: left; /* FLOAT HEADER LEFT */
	height: 165px; /* HEIGHT OF HEADER IMAGE */
	width: 1000px; /* WIDTH OF WEBSITE */
	background-repeat: no-repeat; /* STOP HEADER IMAGE REPEATING */
        background-image: url("images/header.png");
}

/* SLIDING PANEL STYLES */
#slide-panel {
    height: 200px; /*HEIGHT OF HIDDEN SLIDE PANEL*/
    width: 350px; /*WIDTH OF HIDDEN SLIDE PANEL*/
    display: none; /*THE ELEMENT WILL NOT BE DISPLAYED*/
    border-right-width: 2px; /*ADDS RIGHT BORDER OF 2PX*/
    border-left-width: 2px; /*ADDS LEFT BORDER OF 2PK*/
    border-right-style: solid; /*MAKES RIGHT BORDER SOLID*/
    border-left-style: solid; /*MAKES LEFT BORDER SOLID*/
    border-right-color: #626262; /*RIGHT BORDER COLOR*/
    border-left-color: #626262; /*LEFT BORDER COLOR*/
    background-color: #949494; /*SLIDE PANEL BACKGROUND COLOR*/
    border-bottom-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/
    border-bottom-style: solid; /*MAKES BOTTOM BORDER SOLID*/
    border-bottom-color: #626262; /*BOTTOM BORDER COLOR*/
    opacity: .8; /*SETS SLIDE PANEL BACKGROUND'S OPACITY TO 80%*/
    margin: auto; /*CENTERS OUR SLIDE PANEL*/
}

.slide {
    margin: 0; /*NO MARGIN*/
    padding: 0; /*NO PADDING*/
    background-image: url(images/slide_button.png); /*ADDS OUR BUTTON IMAGE*/
    background-repeat: no-repeat; /*STOPS BUTTON FROM REPEATING*/
    background-position: center top; /*SETS BUTTON POSITION*/
}

.btn-slide {
    text-align: center; /*ALIGNS TEXT CENTER*/
    width: 191px; /*BUTTON WIDTH*/
    height: 26px; /*BUTTON HEIGHT*/
    display: block; /*DISPLAY AS A BLOCK*/
    color: #fff; /*TEXT COLOR*/
    text-decoration: none; /*REMOVES UNDERSCORE FROM LINK*/
    font-family: Arial, Helvetica, sans-serif; /*FONT FAMILY*/
    font-weight: bold; /*TURNS TEXT BOLD*/
    font-size: 1em; /*FONT SIZE*/
    margin-right: auto; /*MARGIN AUTO*/
    margin-left: auto; /*MARGIN AUTO*/
    line-height: 22px; /*LINE HEIGHT OF BUTTON TEXT*/
}

နောက်တစ်ခုက Internet Explorer မှာ အဆင်ပြေစေဖို့ အတွက် ie.css ကိုလည်း ရေးရပါ့မယ်။ ထုံးစံအတိုင်း ie.css ကိုဖွင့်ပြီး အောက်မှာပေးထားတဲ့ Code နည်းနည်းကို ကူးလိုက်ပါ။

#slide-panel {
	filter: alpha(opacity = 80); /* SET OPACITY OF SLIDE TO 80% */
}

ဒီတစ်ခါ နောက်ဆုံးအနေနဲ့ panelslide.js မှာ ရေးရမှာ ဖြစ်ပါတယ်။ ထုံးစံအတိုင်း အောက်မှာ ပေးထားတဲ့ Code တွေကို ကူးထည့်ပါ။

$(document).ready(function(){

$(".btn-slide").click(function(){
$("#slide-panel").slideToggle("slow");
});

});

အဲဒါတွေပြီးသွားပြီး ဆိုရင်တော့ index.html ကို Browser မှာ ခေါ်ကြည့်လိုက်တာနဲ့ Sliding Panel အလုပ်လုပ်တာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ နမူနာ ကြည့်ချင်တယ် ဆိုရင်တော့ jQuerySlide ကို ကလစ်ခေါက်ပါ။

ရွှင်လန်းချမ်းမြေ့ပါစေ …

Facebook comments:

4 Responses

fokhwar says:

April 11, 2010 at 11:37 PM

အစ်ကိုရေ Image အတွက် Zip File ကလင့်ခ် မချိတ်ရသေးဘူးထင်တယ်

Reply
Kaunglay007 says:

July 27, 2010 at 11:31 AM

အစ်ကို HTML ထဲမှာ

ဒီလိုရေးထားတော့ အဲဒီ IE အတွက်ခေါ်ထားတဲ့ link က အလုပ်မလုပ် သိချင်ပါတယ်ခင်ဗျ။ အဲဒါ commend ကြားဆိုတော့ ကျွန်တော့်အထင်မလုပ်လောက်ဘူးထင်တယ်ဗျ။ အဲဒါမှန်ပါသလားခင်ဗျ။

Reply
Nyinyiaung Analyst says:

November 3, 2010 at 1:46 AM

Zip File ရဲ့ Link လေးပေးပါဦး၊ စမ်းကြည့်ချင်နေပြီဗျ… ကူညီပါ…

Reply
Mi Mi says:

May 29, 2011 at 10:07 AM

Image အတွက် link မပေးထားသေးဘူးနော်

Reply

About the Author

Thiha

စာမရေးရ မနေနိုင်သူ၊ ဒီဇိုင်းဆွဲခြင်း၊ ပရိုဂရမ်ရေးခြင်း၊ အင်တာနက်တွင် သင်ယူခြင်းတို့ အမြဲမပြတ် ပြုလုပ်နေသူ၊ နည်းပညာနှင့် ပတ်သက်လျှင် အကုန် စိတ်ဝင်စားသူ၊ ကလေး တစ်ယောက် အဖေ၊ နည်းပညာသမားအပေါ် နားလည်မှု အပြည့်ပေးနိုင်သော ဇနီးတစ်ယောက်၏ ခင်ပွန်း၊ Myanmar Links မှာ နည်းပညာ အကြောင်း သောင်းပြောင်းထွေလာ သင်တဲ့ဆရာ ... လောလောဆယ် လေ့လာနေတာက iOS