Jquery plugin authoring

Hi,
I need to reuse the same bit of code numerous times, so i'm figuring plugins for jquery are probably the way to go. The examples though seem to be quite complex and I cant get my head around them.
Can anyone point me in the right direction please?
Here is the code I am going to use for the plugin, I just need to know how to modify it as a plugin:
<script type="text/javascript">
          $('.tabs').find('div:first').siblings('div').hide();
          $('.tabs > ul > li >a').click(function(e){
              container=$(this).parent().parent().parent();
              $(this).parent().addClass('selected').siblings().removeClass('selected');
              $('.'+$(this).attr('rel'),container).show().siblings('div').hide();//Show the div with the content in
              e.preventDefault();
          });
      </script>

Open in new window


Which will be used in conjunction with the following markup:

 <div class="tabs">
          <ul>
              <li><a href="#" rel="tab1">Tab1</a></li>
              <li><a href="#" rel="tab2">Tab2</a></li>
              <li><a href="#" rel="tab3">Tab3</a></li>
          </ul>
          <div class="tab1">Tab 1 content</div>
          <div class="tab2">Tab 2 content</div>
          <div class="tab3">Tab 3 content</div> 
      </div>

Open in new window

LVL 2
jdav357Asked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
i think you code is already in shape, just add this
<<# (function($){>>  in the beginning
and <<})(jQuery);  >> in the end

http://net.tutsplus.com/articles/news/learn-how-to-create-a-jquery-plugin/
0
 
Gurvinder Pal SinghCommented:
Could you please rephrase the question a little, as i couldn't understand the requirement?
Thanks
0
 
jdav357Author Commented:
With my javascript I have attached, I need to change it to a plugin, so that I can just add a class or id of tabbed for example to an element and it will use my function above!
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Gurvinder Pal SinghCommented:
please mention what your code is trying to do.
0
 
SRigneyCommented:
This tutorial seems to be an easier one to understand.

http://www.queness.com/post/112/a-really-simple-jquery-plugin-tutorial
0
 
jdav357Author Commented:
[code]
<script type="text/javascript">
          $('.tabs').find('div:first').siblings('div').hide();
          $('.tabs > ul > li >a').click(function(e){
              container=$(this).parent().parent().parent();
              $(this).parent().addClass('selected').siblings().removeClass('selected');
              $('.'+$(this).attr('rel'),container).show().siblings('div').hide();//Show the div with the content in
              e.preventDefault();
          });
      </script>
[/code]
This is my code that I am trying to convert in to a plugin. It is for a special kind of tabs that I require. Thanks for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.