library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tabs: update manipulation demo to use the refresh method

Browse Source
This commit is contained in:
David Petersen 2011-04-19 12:55:04 -04:00 committed by Scott González
parent 9bd731da14
commit a02e393786
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
demos/tabs/manipulation.html
View File

@ -22,21 +22,21 @@
</style> </style>
<script> <script>
$(function() { $(function() {
var $tab_title_input = $( "#tab_title"), var tab_title_input = $( "#tab_title"),
$tab_content_input = $( "#tab_content" ); tab_content_input = $( "#tab_content" ),
var tab_counter = 2; tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
tab_counter = 2;
// tabs init with a custom tab template and an "add" callback filling in the content // tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $( "#tabs").tabs({ var tabs = $( "#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function( event, ui ) { add: function( event, ui ) {
var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content."; var tab_content = tab_content_input.val() || "Tab " + tab_counter + " content.";
$( ui.panel ).append( "<p>" + tab_content + "</p>" ); $( ui.panel ).append( "<p>" + tab_content + "</p>" );
} }
}); });
// modal dialog init: custom buttons and a "close" callback reseting the form inside // modal dialog init: custom buttons and a "close" callback reseting the form inside
var $dialog = $( "#dialog" ).dialog({ var dialog = $( "#dialog" ).dialog({
autoOpen: false, autoOpen: false,
modal: true, modal: true,
buttons: { buttons: {
@ -49,24 +49,30 @@
} }
}, },
open: function() { open: function() {
$tab_title_input.focus(); tab_title_input.focus();
}, },
close: function() { close: function() {
$form[ 0 ].reset(); form[ 0 ].reset();
} }
}); });
// addTab form: calls addTab function on submit and closes the dialog // addTab form: calls addTab function on submit and closes the dialog
var $form = $( "form", $dialog ).submit(function() { var form = $( "form", dialog ).submit(function() {
addTab(); addTab();
$dialog.dialog( "close" ); dialog.dialog( "close" );
return false; return false;
}); });
// actual addTab function: adds new tab using the title input from the form above // actual addTab function: adds new tab using the title input from the form above
function addTab() { function addTab() {
var tab_title = $tab_title_input.val() || "Tab " + tab_counter; var label = tab_title_input.val() || "Tab " + tab_counter,
$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title ); id = "tabs-" + tab_counter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tab_content = tab_content_input.val() || "Tab " + tab_counter + " content.";
tabs.find('ul').append( li );
tabs.append( "<div id='" + id + "'><p>" + tab_content + "</p></div>" );
tabs.tabs( "refresh" );
tab_counter++; tab_counter++;
} }
@ -74,14 +80,15 @@
$( "#add_tab" ) $( "#add_tab" )
.button() .button()
.click(function() { .click(function() {
$dialog.dialog( "open" ); dialog.dialog( "open" );
}); });
// close icon: removing the tab on click // close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924 // note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$( "#tabs span.ui-icon-close" ).live( "click", function() { $( "#tabs span.ui-icon-close" ).live( "click", function() {
var index = $( "li", $tabs ).index( $( this ).parent() ); $( this ).closest( "li" ).remove();
$tabs.tabs( "remove", index ); $( "#" + $( this ).prev().attr( "aria-controls" ) ).remove();
tabs.tabs( "refresh" );
}); });
}); });
</script> </script>