Jquery Tabs

There are some common fuctions for tabs

Property
Default Value
Usage

ajaxOptions
{}
Options for remote AJAX tabs

cache
"false"
Load remote tab content only once (lazy-load)

cookie
null
Show active tab using cookie data on page load

disabled
[]
Disable specified tabs on pageload

idPrefix
"ui-tabs-"
Used when a remote tab's link element has no title attribute

event
"click"
Tabs event that triggers display of content

fx
null
Specify a transition effect when changing tabs

panelTemplate

A string specifying the elements used for the content section of a dynamically created tab

selected
0
The tab selected by default when the widget renders

spinner
"Loading&#B230"
Specify the loading spinner for remote tabs

tabTemplate

#{label}

A string specifying the elements used when creating new tabs dynamically

unselect
false
Hides an already selected tab when it is clicked

Property
Default Value

disabledCLass
"ui-tabs-disabled"

hideClass
"ui-tabs-hide"

loadingClass
"ui-tabs-loading"

navClass
"ui-tabs-nav"

panelClass
"ui-tabs-panel"

selectedClass
"ui-tabs-selected"

unselectClass
"ui-tabs-unselect

E.X.

If you want nothing should be selected on load
$(document).ready(function () {
var tabOpts = {

selected:null

};
$("#tabs").tabs(tabOpts);
});
else type 0,1,2 are index starts with 0

If you wanna disable TAB$(document).ready(function () {
var tabOpts = {

disables:[0]
};
$("#tabs").tabs(tabOpts);
});
disable first tab , change [0] to disable other or for mutliple [0,1] etc.

Transition Effects
$(document).ready(function () {
var tabOpts = {
fx: {
opacity:"toggle", duration:"slow" }
};
$("#tabs").tabs(tabOpts);
});
duration could be slow, normal, or fast

To only show the animation once, when a tab closes for example, we would need to nest the fx object within an array
$(function(){
//define config object
var tabOpts = {
fx: [{
opacity: "toggle",
duration: "slow"
},
null]
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});
/script>

executable functions on an event
Property
Usage

add
Execute a function when a new tab is added

disable
Execute a function when a tab is disabled

enable
Execute a function when a tab is enabled

load
Execute a function when a tab's remote data has loaded

remove
Execute a function when a tab is removed

select
Execute a function when a tab is selected

show
Execute a function when the content section of a tab is shown

tab's custom binding events and their triggers

Event
Trigger

tabsselect
A tab is selected

tabsload
A remote tab has loaded

tabsshow
A tab is shown

tabsadd
A tab has been added to the interface

tabsremove
A tab has been removed from the interface

tabsdisable
A tab has been disabled

tabsenable
A tab has been enabled

Functions
$(function(){
//alert the id of the tab that was selected
function handleSelect(event, tab) {
alert("The tab at index " + tab.index + " was
selected");
}
//define config object
var tabOpts = {
select:handleSelect
};
//create the tabs
$("#myTabs").tabs(tabOpts);
});

Using Jquery in Master Pages

There are few things to notice :

1) try google CDN's
link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css"/>
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript">/script>
script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript">/script>

2) Put stepone in the head section of the Master page before Head Content Placeholder
head runat="server">
title>/title>
link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css"/>


link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />



/head>

Jquery with master pages

Finally got it wirking for the master pages.

1)Link the below lines before the master cpntent in the master file. If its not working with the normal way
OLD:


NEW way point jquery to Web files:




2) Try goto content page. Try to make the custome .js file the same name as page e.g.
Default.aspx will have Default.js. This would help in the future.
and write the custom code in the Default .js file.

3)If you are using the User Controls in the Content pages even then you will follow the step 2:

Jquery preventDefault

In order to prevent the default behaviour for the regular function use

event.preventDefault();

Jquery Syntax

$(this).hide()
Demonstrates the jQuery hide() function, hiding the current HTML element.

$("#test").hide()
Demonstrates the jQuery hide() function, hiding the element with id="test".

$("p").hide()
Demonstrates the jQuery hide() function, hiding all

elements.

$(".test").hide()
Demonstrates the jQuery hide() function, hiding all elements with class="test".

$("p.test").hide()
hides all paragraphs with class="test

$("p#demo").hide()
hides the first

element with id="demo

jQuery uses a combination of XPath and CSS selector syntax.


$(document).ready(function(){
--- jQuery functions go here ----
});
This is to prevent any jQuery code from running before the document is fully loaded (is ready).

jQuery Attribute Selectors
jQuery uses XPath expressions to select elements with given attributes.

$("[href]") select all elements with an href attribute.

$("[href='#']") select all elements with an href value equal to "#".

$("[href!='#']") select all elements with an href attribute NOT equal to "#".

$("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".


$("ul li:first") The first

element of each

$("[href$='.jpg']") All elements with an href attribute that ends with ".jpg"
$("div#intro .head") All elements with class="head" inside a
element with id="intro"

Jquery

jQuery is a library of JavaScript Functions.
jQuery library contains the following features:

HTML element selections
HTML element manipulation
CSS manipulation
HTML event functions
JavaScript Effects and animations
HTML DOM traversal and modification
AJAX
Utilities

If you don't wanna store jquery in Project then you can ref it through Microsoft or Google
Google CDN



Microfost CDN