Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 372
  • Last Modified:

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

0
jdav357
Asked:
jdav357
  • 3
  • 2
1 Solution
 
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
 
Gurvinder Pal SinghCommented:
please mention what your code is trying to do.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
Gurvinder Pal SinghCommented:
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now