Hi,
I am creating a plugin for tab functionality. I have one doubt.
$('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)?
Modify as follows:
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
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');
}
});
<!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>
Could you show the .disabled() function?
As far as I can see it’s not in the jQuery core is it?