Permalink
Browse files

Tabs: Cleaned up manipulation demo.

  • Loading branch information...
1 parent a02e393 commit ffc983248d7b71fba4ea0aa271fb71e3202e93dc @scottgonzalez scottgonzalez committed May 11, 2011
Showing with 13 additions and 23 deletions.
  1. +13 −23 demos/tabs/manipulation.html
@@ -22,18 +22,12 @@
</style>
<script>
$(function() {
- var tab_title_input = $( "#tab_title"),
- tab_content_input = $( "#tab_content" ),
+ var tabTitle = $( "#tab_title" ),
+ tabContent = $( "#tab_content" ),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
- tab_counter = 2;
+ tabCounter = 2;
- // tabs init with a custom tab template and an "add" callback filling in the content
- var tabs = $( "#tabs").tabs({
- add: function( event, ui ) {
- var tab_content = tab_content_input.val() || "Tab " + tab_counter + " content.";
- $( ui.panel ).append( "<p>" + tab_content + "</p>" );
- }
- });
+ var tabs = $( "#tabs" ).tabs();
// modal dialog init: custom buttons and a "close" callback reseting the form inside
var dialog = $( "#dialog" ).dialog({
@@ -48,32 +42,29 @@
$( this ).dialog( "close" );
}
},
- open: function() {
- tab_title_input.focus();
- },
close: function() {
form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
- var form = $( "form", dialog ).submit(function() {
+ var form = dialog.find( "form" ).submit(function( event ) {
addTab();
dialog.dialog( "close" );
- return false;
+ event.preventDefault();
});
- // actual addTab function: adds new tab using the title input from the form above
+ // actual addTab function: adds new tab using the input from the form above
function addTab() {
- var label = tab_title_input.val() || "Tab " + tab_counter,
- id = "tabs-" + tab_counter,
+ var label = tabTitle.val() || "Tab " + tabCounter,
+ id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
- tab_content = tab_content_input.val() || "Tab " + tab_counter + " content.";
+ tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
- tabs.find('ul').append( li );
- tabs.append( "<div id='" + id + "'><p>" + tab_content + "</p></div>" );
+ tabs.find( ".ui-tabs-nav" ).append( li );
+ tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
tabs.tabs( "refresh" );
- tab_counter++;
+ tabCounter++;
}
// addTab button: just opens the dialog
@@ -84,7 +75,6 @@
});
// close icon: removing the tab on click
- // 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() {
$( this ).closest( "li" ).remove();
$( "#" + $( this ).prev().attr( "aria-controls" ) ).remove();

0 comments on commit ffc9832

Please sign in to comment.