Wai Yan Lin » jQuery 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 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