SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Tab - Jquery

  1. #1
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tab - Jquery

    Hi,

    I am creating a plugin for tab functionality. I have one doubt.

    Code JavaScript:
    $('ul#tab1 li, ul#tab2 li').disabled(3)

    I want to disable the tab for 3rd li in each obj. Already i did the disable functionlity but its working only first object of ul#tab1.

    How do i get object separtely(ul#tab1 li, ul#tab2 li)?
    Cheers,
    Dinesh

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,077
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Could you show the .disabled() function?
    As far as I can see it's not in the jQuery core is it?
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by ScallioXTX View Post
    Could you show the .disabled() function?
    As far as I can see it's not in the jQuery core is it?
    Code JavaScript:
    jQuery.fn.extend({
    disabled:function(flag,options){
    			var defaults = {
    				cssClass:'disabled'
    			}
    			var obj = $(this);
    			var o = $.extend(defaults, options);
    			obj.eq(flag-1).addClass(o.cssClass);
    			obj.eq(flag-1).unbind('click');
    	}
     
    });

    Code HTML4Strict:
    <!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="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script src="tab.js"></script>
    <script>
    	$(document).ready(function(){
    		$('.ui-tabs').tabs({tabbodyClass:'tbody', active:2});
     
    		$('#mainTab li, #mainTab1 li').disabled(2,{cssclass:'disabled'});
     
    	});
    </script>
    <style>
    body {
    	font:12px Verdana;
    }
    a {
    	text-decoration:none;
    }
    .ui-tabs {
    	margin:0;
    	padding:0;
    	padding-left:20px;
    }
    .ui-tabs li {
    	margin:0 2px;
    	padding:3px 15px;
    	float:left;
    	font:14px;
    	list-style-type:none;
    	background-color:#999999;
    	cursor:pointer;
    	border:1px solid #666;
    	border-bottom:0;
    }
    .ui-tabs li.selected {
    	border-bottom:#fff;
    	bottom:-1px;
    	background-color:#FFFFFF;
    	position:relative;
    }
    .ui-tabs li.disabled {
    	border-bottom:#fff;
    	bottom:-1px;
    	background-color:#666;
    	position:relative;
    	cursor:default;
    }
    .ui-tabs li.disabled a {
    	color:#999;
    	cursor:default;
    }
    .tbody {
    	margin:0 10px;
    	padding:10px;
    	display:block;
    	clear:both;
    	border:1px solid #666;
    }
    h1, h2, h3 {
    	font-size:12px;
    	margin:0;
    	padding:0;
    }
    .tabgrp {
    	display:block;
    	clear:both;
    	margin:10px;
    	margin-top:0
    }
    .accordion {
    	width:300px;
    	border-bottom:1px solid black
    }
    .accordion .tabbody {
     
    	padding:10px;
    	display:block;
    	clear:both;
    	border:1px solid #666;
    	margin:0;
    	border-bottom:0;
    }
    h2 {
    	background:#999999;
    	padding:5px;
    	border:1px solid black;
    	border-bottom:0;
    	cursor:pointer;
    }
    h2.selected {
    	background:#3366FF;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
      <ul class="ui-tabs" id="mainTab">
        <li><a href="#">Tab1</a></li>
        <li><a href="#">Tab2</a></li>
        <li><a href="#">Tab3</a></li>
        <li><a href="#">Tab4</a></li>
        <li><a href="#">Tab5</a></li>
      </ul>
      <div class="tbody">
        <h1>tab1</h1>
        	<ul class="ui-tabs">
                <li><a href="#">sub Tab1</a></li>
                <li><a href="#">sub Tab2</a></li>
                <li><a href="#">sub Tab3</a></li>
                <li><a href="#">sub Tab4</a></li>
                <li><a href="#">sub Tab5</a></li>
          	</ul>
            <div class="tbody">
                <h1>sub tab1</h1>
            </div>
            <div class="tbody">
               <h1>sub tab2</h1>
            </div>
            <div class="tbody">
               <h1>sub tab3</h1>
            </div>
            <div class="tbody">
               <h1>sub tab4</h1>
            </div>
            <div class="tbody">
               <h1>sub tab5</h1>
            </div>
      </div>
      <div class="tbody">
        <h1>tab2</h1>
      </div>
      <div class="tbody">
        <h1>tab3</h1>
      </div>
      <div class="tbody">
        <h1>tab4</h1>
      </div>
      <div class="tbody">
        <h1>tab5</h1>
      </div>
    </div>
     
     
    <div id="wrap1">
      <ul class="ui-tabs" id="mainTab1">
        <li><a href="#">Tab1</a></li>
        <li><a href="#">Tab2</a></li>
        <li><a href="#">Tab3</a></li>
        <li><a href="#">Tab4</a></li>
        <li><a href="#">Tab5</a></li>
      </ul>
      <div class="tbody">
        <h1>tab1</h1>
        	<ul class="ui-tabs">
                <li><a href="#">sub Tab1</a></li>
                <li><a href="#">sub Tab2</a></li>
                <li><a href="#">sub Tab3</a></li>
                <li><a href="#">sub Tab4</a></li>
                <li><a href="#">sub Tab5</a></li>
          	</ul>
            <div class="tbody">
                <h1>sub tab1</h1>
            </div>
            <div class="tbody">
               <h1>sub tab2</h1>
            </div>
            <div class="tbody">
               <h1>sub tab3</h1>
            </div>
            <div class="tbody">
               <h1>sub tab4</h1>
            </div>
            <div class="tbody">
               <h1>sub tab5</h1>
            </div>
      </div>
      <div class="tbody">
        <h1>tab2</h1>
      </div>
      <div class="tbody">
        <h1>tab3</h1>
      </div>
      <div class="tbody">
        <h1>tab4</h1>
      </div>
      <div class="tbody">
        <h1>tab5</h1>
      </div>
    </div>
    </body>
    </html>
    Cheers,
    Dinesh

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,077
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Modify as follows:

    Code JavaScript:
    jQuery.fn.extend({
    	disabled:function(flag,options) {
    		return this.each( function() {
    			var defaults = {
    				cssClass:'disabled'
    			}
    			var obj = $(this);
    			var o = $.extend(defaults, options);
    			obj.eq(flag-1).addClass(o.cssClass);
    			obj.eq(flag-1).unbind('click');
    		});
    	}
    });

    the return this.each( parts takes care of multiple selectors if you put those in using $('selector1, selector2');
    Also, the function now returns so you can chain it
    $('selector').disabled(1).disabled(2).show(); etc

    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •