Search jQuery

jQuery Forum

Screen name:
deshmukh.rahul2007

deshmukh.rahul2007's Profile

3 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Cannot able to remove tab from remove button ? Please help
[2Replies]
- 10-Jan-2013 10:30 AM
- Forum: Using jQuery
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-personalized.js"></script>
<script type="text/javascript">
//<![CDATA[
var dyna_tabs = {

tabs: null,

init: function (id) {
var tabs = $('<div></div>').append('<div id="'+ id + '"></div>');
$('body').append(tabs);

var list = $('<ul></ul').append('<li><a href="#"></a></li>');
tabs.append(list);

tabs.tabs();

// remove the dummy tab
tabs.tabs('remove', 0);
tabs.hide();

this.tabs = tabs;
},

add: function (tab_id, tab_name, tab_content) {
if (this.tabs != null) {
if (this.tabs.css('display') == 'none') {
this.tabs.show();
}
var data = $('<div id="'+tab_id+'"></div>').append(tab_content);
this.tabs.append(data).tabs('add', '#' + tab_id, tab_name);
this.tabs.tabs('select', '#' + tab_id);
} else {
alert('Tabs not initialized!');
}
}

};

$(function () {
dyna_tabs.init('mytabs');

var tab_counter = 1;

$('#addtab').click(function () {
dyna_tabs.add(
'Tab' + tab_counter,
'Tab #' + tab_counter,
'<div><h2>Sample content '+tab_counter+'</h2><p><iframe align=\"middle\" frameborder=\"0\" height=\"300\" scrolling=\"no\" src=\"CountryBs.html?iddid=" . "\" width=\"100%\"></iframe></p></div>'
);

tab_counter += 1;
});

});
$('#remove').('click', function() {
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
if(selected == -1)
selected = $('p[id=remove]').index(this);
$('#tabs').tabs("remove", [selected]);
});

//]]>
</script>
</body>
</html>

Cannot remove tab from Remove button in jquery
[0Replies]
- 10-Jan-2013 10:25 AM
- Forum: Using jQuery UI
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>
</title>
<style type="text/css">
/* ----------------------------------------------------------------------------
jQuery UI Tabs
*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }

/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Component containers
----------------------------------*/
.ui-widget-header { border: 1px solid #4297d7; background: #5c9ccc url(C:\xampp\phpMyAdmin\Tabs\dyamic-tab.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }
.ui-widget-content { border: 1px solid #a6c9e2; background: #fcfdfd url(C:\xampp\phpMyAdmin\Tabs) 50% bottom repeat-x; color: #222222;
width: 625px;
}
.ui-widget-content a { color: #222222; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #c5dbec; background: #dfeffc url(C:\xampp\phpMyAdmin\Tabs) 50% 50% repeat-x; font-weight: bold; color: #2e6e9e; outline: none; }
.ui-state-default a { color: #2e6e9e; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #79b7e7; background: #d0e5f5 url(C:\xampp\phpMyAdmin\Tabs\dyamic-tab.png) 50% 50% repeat-x; font-weight: bold; color: #1d5987; outline: none; }
.ui-state-hover a { color: #1d5987; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #79b7e7; background: #f5f8f9 url(C:\xampp\phpMyAdmin\Tabs\dyamic-tab.png) 50% 50% repeat-x; font-weight: bold; color: #e17009; outline: none; }
.ui-state-active a { color: #e17009; outline: none; text-decoration: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fad42e; background: #fbec88 url(C:\xampp\phpMyAdmin\Tabs\dyamic-tab.png) 50% 50% repeat-x; color: #363636; }
/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; }
.ui-corner-tr { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; }
.ui-corner-br { -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; }
.ui-corner-top { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; } .ui-corner-bottom { -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; } .ui-corner-right { -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; } .ui-corner-left { -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .ui-corner-all { -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* Overlays */
.ui-widget-overlay { background: #aaaaaa url(C:\xampp\phpMyAdmin\Tabs\dyamic-tab.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(C:\xampp\phpMyAdmin\Tabs\dyamic-tab.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; }

.ui-tabs {padding: .2em;}
.ui-tabs-nav { padding: .2em .2em 0 .2em; position: relative; }
.ui-tabs-nav li { float: left; border-bottom: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs-nav li a { display:block; text-decoration: none; padding: .5em 1em; }
.ui-tabs-nav li.ui-tabs-selected { padding-bottom: .1em; border-bottom: 0; }
.ui-tabs-panel { padding: 1em 1.4em; display: block; border: 0; background: none; }
.ui-tabs-hide {

/*display: none !important; */
position: absolute;
left: -10000px;
}
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<input type="button" id="addtab" name="addtab" value="Add Tab Programatically" />
<input type="button" id="remove" name="removetab" value="Remove Site" />
</div>

<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-personalized.js"></script>
<script type="text/javascript">
//<![CDATA[
var dyna_tabs = {

tabs: null,

init: function (id) {
var tabs = $('<div></div>').append('<div id="'+ id + '"></div>');
$('body').append(tabs);

var list = $('<ul></ul').append('<li><a href="#"></a></li>');
tabs.append(list);

tabs.tabs();

// remove the dummy tab
tabs.tabs('remove', 0);
tabs.hide();

this.tabs = tabs;
},

add: function (tab_id, tab_name, tab_content) {
if (this.tabs != null) {
if (this.tabs.css('display') == 'none') {
this.tabs.show();
}
var data = $('<div id="'+tab_id+'"></div>').append(tab_content);
this.tabs.append(data).tabs('add', '#' + tab_id, tab_name);
this.tabs.tabs('select', '#' + tab_id);
} else {
alert('Tabs not initialized!');
}
}

};

$(function () {
dyna_tabs.init('mytabs');

var tab_counter = 1;

$('#addtab').click(function () {
dyna_tabs.add(
'Tab' + tab_counter,
'Tab #' + tab_counter,
'<div><h2>Sample content '+tab_counter+'</h2><p><iframe align=\"middle\" frameborder=\"0\" height=\"300\" scrolling=\"no\" src=\"CountryBs.html?iddid=" . "\" width=\"100%\"></iframe></p></div>'
);

tab_counter += 1;
});

});
$('#remove').('click', function() {
var $tabs = $('#tabs').tabs();
var selected = $tabs.tabs('option', 'selected');
if(selected == -1)
selected = $('p[id=remove]').index(this);
$('#tabs').tabs("remove", [selected]);
});

//]]>
</script>
</body>
</html>

jquery multiple tab dynamically
[0Replies]
- 26-Dec-2012 06:11 PM
- Forum: Using jQuery
Hello Guys,
I want to create multiple same tabs according to User request.Please help me in how to do that
Attachments
- Download
  Delete
  IDD Page.png
  Size: 79.46 KB Downloads: 398

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend