Wai Yan Lin » tutorial http://blog.waiyanlin.net Wed, 11 Aug 2010 02:30:07 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Tutorial: How to create a simple drop-down menu jQuery plugin http://blog.waiyanlin.net/2010/08/11/tutorial-how-to-create-a-simple-drop-down-menu-jquery-plugin/ http://blog.waiyanlin.net/2010/08/11/tutorial-how-to-create-a-simple-drop-down-menu-jquery-plugin/#comments Wed, 11 Aug 2010 02:30:07 +0000 waiyan http://blog.waiyanlin.net/?p=207 I’ve been using jQuery for quite a long time and simply love the power of it. It helps to speed up my development time like what they say: ‘write less, do more’. And I also used many jQuery plugins depending on my development’s needs. There are many great plugins which will make your life much easier.

In this tutorial, I will share how to write a simple plugin for your drop-down navigation menu.

Basic Structure

Lets take a look at the basic structure of jQuery plugin. (If you wish, you can read the official article for writing a plugin)

(function($) {

$.fn.yourplugin = function() {

this.each(function() {    

//your code comes here

});

return this;

};

})(jQuery);

(function($) {
$.fn.yourplugin = function() {
this.each(function() {    
//your code comes here
});
return this;
};
})(jQuery);

Options

You might want to include some options to let the users to change easily without touching your plugin’s code.

(function($) {

$.fn.yourplugin = function() {

//set default values of your options

var config = {

‘option1′: value’,

‘option2′: ‘value’

};

var settings = $.extend(config, settings);

this.each(function() {

//default options. you can call your settings like ‘s.option1′ or ‘s.option2′

var s = settings;

//your code comes here

});

return this;

};

})(jQuery);

Now we know what basic plugin structure looks like. Lets create our very simple drop-down menu plugin. First of all, we need to create a navigation menu before we move on to the plugin. Here’s how it looks like:

<div id=”navwrap”>

<ul id=”nav”>

<li><a href=”#”>Menu Item 1</a>

<ul>

<li><a href=”#”>Menu Item 1.1</a>

<ul>

<li><a href=”#”>Menu Item 1.1.1</a>

<ul>

<li><a href=”#”>Menu Item 1.1.1.1</a></li>

</ul>

</li>

<li><a href=”#”>Menu Item 1.1.2</a></li>

</ul>

</li>

<li><a href=”#”>Menu Item 1.2</a></li>

<li><a href=”#”>Menu Item 1.3</a></li>

</ul>

</li>

<li><a href=”#”>Menu Item 2 Is Long</a>

<ul>

<li><a href=”#”>Menu Item 2.1</a></li>

</ul>

</li>

<li><a href=”#”>Menu Item 3</a></li>

<li><a href=”#”>Menu Item 4</a></li>

</ul>

</div>

CSS

Then, we need to set some css rules for our menu.

ul#nav{

list-style: none;

margin: 0;

padding: 0;

position: relative;

}

ul#nav li{

float:left;

background-color: #0088AA;

position:relative;

display:block;

margin-right:1px;

font-size:14px;

}

ul#nav li a{

color:#FFF;

text-decoration: none;

padding:5px;

display:block;

position:relative;

width:100%;

}

ul#nav ul{

margin:0;

padding:0;

position:absolute;

width:100%;

}

ul#nav li li{

position:relative;

background-color:#0077AA;

display:block;

margin:0;

border-top:solid 1px #FFF;

width:100%;

font-size:11px;

}

ul#nav ul ul{

position:absolute;

left:100%;

top:0;

margin:0 0 0 1px;

width:100%;

}

Now, we will create the plugin which will use jQuery slideDown/Up effect for drop-down animation and giving one option for users to change the animation speed.

(function($) {

$.fn.jDropDown = function(settings) {

//option for speed with default value of 500 milliseconds

var config = {

‘speed’: ’500′

};

var settings = $.extend(config, settings);

this.each(function() {

var s = settings;

var mainNav = this;    

//set css to all second ul to display none

$(mainNav).find(‘ul’).css({‘display’:'none’});    

//hover event for each main li

$(mainNav).find(‘li’).hover(

function(){

$(this).find(‘ul:first’).slideDown(s.speed);    

},

function(){

$(this).find(‘ul:first’).slideUp(s.speed);    

}

);

});

return this;

};

})(jQuery);

This is all we have to do. Now, you can use this plugin by putting the following code in your html page between <head> and </head>

<script>

$(document).ready(function(){

$(‘ul#nav’).jDropDown({

‘speed’: 300

});

});

</script>

It is not too difficult to create your own jQuery plugin. I hope this tutorial will help you to write some cool plugins. If you have any doubt, feel free to write in the comment section below.

Demo

]]> http://blog.waiyanlin.net/2010/08/11/tutorial-how-to-create-a-simple-drop-down-menu-jquery-plugin/feed/ 0 Tutorial: Easiest way to display random image using PHP http://blog.waiyanlin.net/2010/07/30/tutorial-easiest-way-to-display-random-image-using-php/ http://blog.waiyanlin.net/2010/07/30/tutorial-easiest-way-to-display-random-image-using-php/#comments Fri, 30 Jul 2010 08:01:59 +0000 waiyan http://blog.waiyanlin.net/?p=201 First of all, this tutorial is mainly for the beginners who start learning programming especially PHP. If you are building some website and sometimes, you might need to display a random image per page load. It that case, you could use this method. There might be some other ways to achieve this but I find that this is the easiest way at least, for me.

<?php
$iArr = array(‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’);
$no = sizeof($iArr)-1;
$random = mt_rand(0, $no);
$path = ‘images/’;
$ranImg = $iArr[$random];
$img = $path.$ranImg;
echo $img;
echo ‘<img src=”‘.$img.’” alt=”"/>’;
?>

<?php

$iArr = array(‘image1.jpg’, ‘image2.jpg’, ‘image3.jpg’); //create an array of image

$no = sizeof($iArr)-1;

$random = mt_rand(0, $no); //get random number between 0 and array size

$path = ‘images/’; //this is the path to your images

$ranImg = $iArr[$random]; //get random image from array

$img = $path.$ranImg; //the full image path e.g. images/image1.jpg

echo ‘<img src=”‘.$img.’” alt=”"/>’; //display the random image

?>

I believe the code is quite simple and self explained. Please feel free to share your thoughts in comments.

]]> http://blog.waiyanlin.net/2010/07/30/tutorial-easiest-way-to-display-random-image-using-php/feed/ 0 jQuery: Flying Text With Fade Effect http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/ http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/#comments Tue, 16 Dec 2008 17:01:00 +0000 waiyan http://blog.waiyanlin.net/?p=154 With this great javascript framework, jQuery, you can create some flash like effects. In this post, I will show how to create very simple flying and fading text effect using jQuery. Here is live demo.

]]> With this great javascript framework, jQuery, you can create some flash like effects. In this post, I will show how to create very simple flying and fading text effect using jQuery. Here is live demo.

javascript:

$(‘.container .flying-text’).css({opacity:0}); //set all text opacity to 0

$(‘.container .active-text’).animate({opacity:1, marginLeft: “350px”}, 4000); //animate first text

var int = setInterval(changeText, 5000); // call changeText function every 5 seconds

function changeText(){

var $activeText = $(“.container .active-text”); //get current text

var $nextText = $activeText.next();  //get next text

if($activeText.next().length == 0) $nextText = $(‘.container .flying-text:first’); //if it is last text, loop back to first text

$activeText.animate({opacity:0}, 1000); //set opacity 0 to animated text

$activeText.animate({marginLeft: “-100px”}); //set animated text position to default

//animate next text

$nextText.css({opacity: 0}).addClass(‘active-text’).animate({opacity:1, marginLeft: “350px”}, 4000, function(){

$activeText.removeClass(‘active-text’);

});

}

HTML:

<div class=”container”>

<h3 class=”flying-text active-text”>I believe</h3>

<h3 class=”flying-text”>I can</h3>

<h3 class=”flying-text”>Fly</h3>

</div>

CSS:

body{

background-color:#000;

}

.container{

background-color:#000;

width:500px;

margin:0 auto;

color:#FFF;

overflow:hidden;

}

.flying-text{

margin-left:-100px;

}

Check this live demo.

]]> http://blog.waiyanlin.net/2008/12/17/jquery-flying-text-with-fade-effect/feed/ 10 HTML ဆိုတာ http://blog.waiyanlin.net/2007/06/05/html-%e1%80%86%e1%80%ad%e1%80%af%e1%80%90%e1%80%ac/ http://blog.waiyanlin.net/2007/06/05/html-%e1%80%86%e1%80%ad%e1%80%af%e1%80%90%e1%80%ac/#comments Tue, 05 Jun 2007 16:04:00 +0000 waiyan http://blog.waiyanlin.com/?p=80 ဒီပို႔စ္ကိုေရးရတဲ့ရည္ရြယ္ခ်က္ကေတာ့ မသိေသးသူမ်ား ဗဟုသုတရၿပီး HTML နဲ႔ပတ္သက္တာေတြကို အေျခခံကစၿပီး ေလ့လာႏိုင္ဖို႔အတြက္ပါ။ သိၿပီးသားပုဂၢိဳလ္မ်ားကေတာ့ မ်က္စိေညာင္းလိမ့္မယ္ဗ်။

HTML ဆိုတာ

Hypertext Markup Language ကိုေခၚတာျဖစ္ပါတယ္။ အရိုးရွင္းဆံုးေျပာရမယ္ဆိုရင္ေတာ့ HTML ဆိုတာ အင္တာနက္စာမ်က္ႏွာ (website) မ်ားကိုဖန္တီးရာမွာ အသံုးျပဳတဲ့ ကြန္ပ်ဴတာဘာသာစကားတစ္မ်ိဳးျဖစ္ပါတယ္။
Hypertext – ဆိုတာက အသံုးျပဳသူ သို႔မဟုတ္ ၾကည့္ရွဳသူရဲ႕ ေတာင္းဆိုမွဳကိုအေျခခံၿပီး အျခားသက္ဆိုင္ရာ သတင္းအခ်က္အလက္မ်ားရွိတဲ့ေနရာမ်ားကို hyperlinks ဆိုတဲ့အထူးျပဳလုပ္ထားေသာ text မ်ားကိုႏွိပ္ျခင္းအားျဖင့္ ေရာက္ရွိသြားေအာင္ ျပဳလုပ္ေပးေသာနည္းပညာတစ္ခုပါ။
Markup Language – ဆိုတာက text ေတြနဲ႔အဲဒီ text ေတြရဲ႕အျခားအခ်က္အလက္မ်ားကို ေပါင္းစပ္ထားတဲ့ language တစ္ခုပါ။ အျခားအခ်က္အလက္ေတြဆိုတာက အဲဒီ text ေတြရဲ႕ဖြဲ႕စည္းပံု သို႔မဟုတ္ ဘယ္လိုေပၚရမယ္၊ ဘယ္လိုေနရာမွာေပၚရမယ္ စတာမ်ိဳးေတြအတြက္ျဖစ္ပါတယ္။

သမိုင္းေၾကာင္း

HTML ရဲ႕သမိုင္းေၾကာင္းကို အက်ဥ္းခ်ဳပ္ေျပာရရင္ေတာ့ ၁၉၉၀ ခုႏွစ္မွာ Tim Berners-Lee ဆိုတဲ့ Scientist တစ္ေယာက္က တီထြင္ခဲ့တာပါ။ သူ႔ရဲ႕အဓိကရည္ရြယ္ခ်က္ကေတာ့ တျခားတကၠသိုလ္၊ ေကာလိပ္မ်ားမွာရွိတဲ့ Scientists မ်ားနဲ႔ research လုပ္ထားတဲ့ စာရြက္စာတမ္းမ်ားကိုသူတို႔အခ်င္းခ်င္း ဖလွယ္ၾကည့္ရွဳႏိုင္ဖို႔ပါ။ ဒါေပမယ့္သူ႔ရဲ႕တီထြင္မွဳဟာ သူေမွ်ာ္မွန္းထားတာထက္ အဆေပါင္းမ်ားစြာ ပိုမိုႀကီးမားခဲ့ပါတယ္။ ဘာျဖစ္လို႔လဲဆိုေတာ့ ယေန႔ကမာၻႀကီးတစ္ခုလံုး အသံုးျပဳေနတဲ့ အင္တာနက္ထဲက စာမ်က္ႏွာမ်ားဟာ အဲဒီ HTML ဆိုတဲ့ဘာသာစကားကိုပဲ အေျခခံၿပီးအသံုးျပဳေနၾကရလို႔ပါပဲ။

ယေန႔ကာလမွာ Website တစ္ခုကိုဖန္တီးေတာ့မယ္ဆိုရင္ HTML ကိုဖယ္ထားလို႔မရပါဘူး။ Website ေတြဖန္တီးဖို႔ အထူးထုတ္လုပ္ထားတဲ့ software (ဥပမာ – Dreamweaver) ေတြကိုသံုးရင္ေတာင္မွ HTML ကိုသိထားမွအဆင္ေျပႏိုင္လိမ့္မယ္။ ဒါေပမဲ့ ပူစရာေတာ့မရွိပါဘူး။ HTML ကသင္ယူရတာလြယ္ကူၿပီး အသံုးျပဳရတာလဲ လြယ္ကူပါတယ္။

ဘယ္လိုအလုပ္လုပ္လဲဲ

HTML Tags ေတြနဲ႔ရိုးရိုးစာေတြေရးထားတဲ့ ဖိုင္တစ္ခုကို ေရးၿပီးသြားၿပီဆိုရင္ အဲဒီဖိုင္ကို .html သို႔မဟုတ္ .htm ဆိုတဲ့ file extension နဲ႔သိမ္းလိုက္ရမယ္။ အဲဒီဖိုင္ကို browser (Firefox သို႔မဟုတ္ IE) နဲ႔ဖြင့္ၾကည့္လိုက္ရင္ အဲဒီ browser က HTML ဖိုင္မွာေရးထားတဲ့ text ေတြကိုဖတ္လိုက္မယ္။ ၿပီးရင္ဖိုင္ထဲမွာပါတဲ့ Tags နဲ႔ Text ေတြကိုဘာသာျပန္ၿပီး browser ေပၚမွာစာမ်က္ႏွာတစ္ခုအျဖစ္ ျပန္ပံုေဖာ္ေပးပါတယ္။

Tag ဆိုတာဘာလဲ

Tag ဆိုတာကရိုးရိုးသာမန္ Text ေတြနဲ႔ HTML ကုဒ္ေတြကိုပိုင္းျခားေပးထားတာပါ။Tag အမ်ိဳးမ်ိဳးဟာ တစ္ခုနဲ႔တစ္ခု အသံုးျပဳရတာျခင္း ကြဲျပားၾကပါတယ္။ ကိုယ့္ရဲ႕ HTML စာမ်က္ႏွာကို Browser တစ္ခုခုနဲ႔ ၾကည့္လိုက္ရင္ Tags ေတြကိုျမင္ရမွာမဟုတ္ပါဘူး။ ဒါေပမယ့္ သူတို႔ရဲ႕ effects ေတြကအလုပ္လုပ္ပါလိမ့္မယ္။ ေယဘူယ်အားျဖင့္ေျပာရရင္ Tag ႏွစ္မ်ိဳးရွိပါတယ္။ အဖြင့္ Tag (opening tag) နဲ႔ အပိတ္ Tag (closing tag) ဆိုၿပီးေတာ့ျဖစ္ပါတယ္။ ေအာက္မွာျပထားတဲ့ ရိုးရိုးရွင္းရွင္း ဥပမာတစ္ခုကိုၾကည့္ပါ။

<b>This text is bold.</b>

အဲဒီ <b> နဲ႔ </b> တို႔ဟာ text ေတြကို bold ျဖစ္ေအာင္လုပ္ေပးတဲ့ Tag ျဖစ္ပါတယ္။ အဖြင့္ <b> နဲ႔အပိတ္ </b> တို႔ၾကားမွာေရးထားတဲ့စာမွန္သမွ်ဟာ bold text အေနနဲ႔ေပၚမွာပါ။

HTML tags တိုင္း အဖြင့္နဲ႔အပိတ္လိုသလားဆိုေတာ့ ျခြင္းခ်က္တစ္ခ်ိဳ႕ရွိပါတယ္။ အနည္းငယ္ေသာ HTML tags တစ္ခ်ိဳ႕က အပိတ္မလိုၾကပါဘူး။ ဥပမာ <br /> ဆိုတဲ့ လုိင္းတစ္ေၾကာင္းေအာက္ကိုဆင္းေစတဲ့ tag ဆိုရင္တစ္ခုပဲေရးရပါတယ္။ အဖြင့္အပိတ္ ႏွစ္ခုေရးစရာမလိုပါဘူး။

HTML နဲ႔စေရးၾကည့္ရေအာင္

ကိုယ္တိုင္အ
လြယ္ကူဆံုး page တစ္ခုကိုစေရးၾကည့္လိုက္ရင္ ပိုၿပီးနားလည္သြားပါလိမ့္မယ္။ ပထမဆံုး Notepad ကိုဖြင့္ၿပီးေတာ့ ေအာက္မွာျပထားတဲ့ ကုဒ္ေတြကိုကူးေရးပါ။

<html>
<head>
<title>This is Title</title>
</head>
<body>
<h1>This is header 1</h1>
This is my first HTML page.
<br/>
<b>This text is bold</b>
<br/>
<i>This text is italic.</i>
<br/>
<u>This text is underlined.</u>
</body>
</html>

ေရးၿပီးသြားၿပီဆိုရင္ အဲဒီဖိုင္ကို mypage.html ဆိုတဲ့ file extension အေနနဲ႔သိမ္းလိုက္ပါ။ ၿပီးရင္ေတာ့ အဲဒီဖိုင္သိမ္းထားတဲ့ေနရာ (ဥပမာ – C:\MyDocuments\mypage.html) ကိုသြားၿပီး ဖိုင္ကို double click ႏွိပ္ဖြင့္ၾကည့္လိုက္ပါ။

ေဟာဒီလိုျမင္ရပါလိမ့္မယ္။ HTML page ေတြဟာ <html> နဲ႔စၿပီး </html> နဲ႔အဆံုးသတ္ပါတယ္။ <head> နဲ႔ </head> ၾကားမွာ header information ေတြကိုေဖာ္ျပရန္ျဖစ္ပါတယ္။ ဥပမာ – ေနာက္ပိုင္းကိုယ့္ page ကို CSS (Cascading Style Sheet) ေတြနဲ႔တန္ဆာဆင္မယ္ဆိုရင္ CSS ကုဒ္ေတြကို သူတို႔ၾကားမွာေရးရမွာေပါ့။ အဲဒီ header information ေတြဟာ browser ကေနဖြင့္ၾကည့္ရင္ ျမင္ရမွာမဟုတ္ပါဘူး။ <title> ကေတာ့ကိုယ့္ page ရဲ႕ေခါင္းစဥ္ေပါ့။ အဲဒီေခါင္းစဥ္က browser ရဲ႕ caption မွာေပၚမွာပါ။

browser ကေနကိုယ္ျမင္ေစခ်င္တဲ့စာေတြအားလံုးကို <body> နဲ႔ </body> ၾကားမွာေရးရမွာပါ။
<h1> ဆိုတာကေခါင္းစဥ္အတြက္ tag တစ္ခုပါ။ ေခါင္းစဥ္အတြက္ ၆ မ်ိဳးရွိပါတယ္။ <h1>, <h2>, <h3>, <h4>, <h5>, <h6> ဆိုၿပီးေတာ့ျဖစ္ပါတယ္။
<br/> ရဲ႕ရည္ရြယ္ခ်က္ကေတာ့ ေနာက္စာေၾကာင္းတစ္ေၾကာင္းကိုဆင္းေစတာပါ။
<b> ကစာသားကို bold ျဖစ္ဖို႔အတြက္
<i> ကေတာ့ စာသားေတြကုိနည္းနည္းေစာင္းေစရန္နဲ႔
<u> ဆိုတာကေတာ့ စာသားေတြရဲ႕ေအာက္က မ်ဥ္းေၾကာင္းတားဖို႔ ျဖစ္ပါတယ္။
အဲဒီထက္အမ်ားႀကီးရွိပါေသးတယ္။ ဒီမွာသြားၿပီးေလ့လာၾကည့္ၾကပါ။

ခုလက္ရွိျမင္ေနၾကတဲ့ အင္တာနက္စာမ်က္ႏွာ (Website) ေတြလိုလွလွပပ ဒီဇိုင္းေတြလုပ္ခ်င္ရင္ေတာ့ HTML တစ္ခုထဲနဲ႔တင္ မရပါဘူး။ CSS (Cascading Style Sheet ) ေတြ Javascript ေတြနဲ႔ထပ္ၿပီးေပါင္းစပ္လိုက္မွ အဲဒီလိုအဆင့္ျမင့္လွပတဲ့ အင္တာနက္စာမ်က္ႏွာ (Website) ေတြကိုဖန္တီးလို႔ရပါတယ္။

ဒါေလာက္ဆိုရင္ HTML ကိုနည္းနည္းေတာ့ မတတ္တစ္ေခါက္ေလး သိသြားေလာက္ၿပီထင္ပါတယ္။ ဒီထက္ပိုၿပီး အမ်ားႀကီးသိခ်င္ၾကသူမ်ားကိုေတာ့ လင့္ခ္ေလးေတြေပးလိုက္ပါတယ္။ အဲဒီက Tutorial ေတြကိုထပ္ေလ့လာလိုက္ရင္ HTML ဆိုတာႀကီးကို ကၽြမ္းက်င္သြားပါလိမ့္မယ္။ မခက္ပါဘူး။ လုပ္ၾကည့္ဖို႔ပဲလိုပါတယ္။

http://www.w3schools.com/html/default.asp
http://www.devx.com/projectcool/Article/17861/0/page/3
http://www.yourhtmlsource.com/myfirstsite/

အဲဒီေနရာေတြမွာ ေလ့လာႏိုင္ပါတယ္။

Credit: w3schools, devx, yourhtmlsource

Technorati:,

]]> http://blog.waiyanlin.net/2007/06/05/html-%e1%80%86%e1%80%ad%e1%80%af%e1%80%90%e1%80%ac/feed/ 10