diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-10-13 15:43:49 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-10-13 15:43:49 -0400 |
| commit | 7ce4ddbcac5c908c78ac6956b6c8799b5f927c4d (patch) | |
| tree | cb80f88a05b2f06e01bafa1ab13014d80355dbef /demos/tabs/manipulation.html | |
| parent | b12d528e8f84fa6509165e7adef09da0b4a71469 (diff) | |
| download | jquery-ui-7ce4ddbcac5c908c78ac6956b6c8799b5f927c4d.tar.gz jquery-ui-7ce4ddbcac5c908c78ac6956b6c8799b5f927c4d.zip | |
Tabs demos: Coding standards.
Diffstat (limited to 'demos/tabs/manipulation.html')
| -rw-r--r-- | demos/tabs/manipulation.html | 83 |
1 files changed, 43 insertions, 40 deletions
diff --git a/demos/tabs/manipulation.html b/demos/tabs/manipulation.html index 693eaada8..3e06d328a 100644 --- a/demos/tabs/manipulation.html +++ b/demos/tabs/manipulation.html @@ -1,86 +1,87 @@ <!DOCTYPE html> <html lang="en"> <head> - <meta charset="UTF-8" /> + <meta charset="utf-8"> <title>jQuery UI Tabs - Simple manipulation</title> - <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> - <script type="text/javascript" src="../../jquery-1.4.2.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> - <script type="text/javascript" src="../../ui/jquery.ui.dialog.js"></script> - <link type="text/css" href="../demos.css" rel="stylesheet" /> - <style type="text/css"> - #dialog label, #dialog input { display:block; } - #dialog label { margin-top: 0.5em; } - #dialog input, #dialog textarea { width: 95%; } - #tabs { margin-top: 1em; } - #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } - #add_tab { cursor: pointer; } + <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> + <script src="../../jquery-1.4.2.js"></script> + <script src="../../ui/jquery.ui.position.js"></script> + <script src="../../ui/jquery.ui.core.js"></script> + <script src="../../ui/jquery.ui.widget.js"></script> + <script src="../../ui/jquery.ui.button.js"></script> + <script src="../../ui/jquery.ui.tabs.js"></script> + <script src="../../ui/jquery.ui.dialog.js"></script> + <link rel="stylesheet" href="../demos.css"> + <style> + #dialog label, #dialog input { display:block; } + #dialog label { margin-top: 0.5em; } + #dialog input, #dialog textarea { width: 95%; } + #tabs { margin-top: 1em; } + #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } + #add_tab { cursor: pointer; } </style> - <script type="text/javascript"> + <script> $(function() { - var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content'); + var $tab_title_input = $( "#tab_title"), + $tab_content_input = $( "#tab_content" ); var tab_counter = 2; // tabs init with a custom tab template and an "add" callback filling in the content - 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) { - var tab_content = $tab_content_input.val() || 'Tab '+tab_counter+' content.'; - $(ui.panel).append('<p>'+tab_content+'</p>'); + 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 ) { + var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content."; + $( ui.panel ).append( "<p>" + tab_content + "</p>" ); } }); // modal dialog init: custom buttons and a "close" callback reseting the form inside - var $dialog = $('#dialog').dialog({ + var $dialog = $( "#dialog" ).dialog({ autoOpen: false, modal: true, buttons: { - 'Add': function() { + Add: function() { addTab(); - $(this).dialog('close'); + $( this ).dialog( "close" ); }, - 'Cancel': function() { - $(this).dialog('close'); + Cancel: function() { + $( this ).dialog( "close" ); } }, open: function() { $tab_title_input.focus(); }, close: function() { - $form[0].reset(); + $form[ 0 ].reset(); } }); // addTab form: calls addTab function on submit and closes the dialog - var $form = $('form',$dialog).submit(function() { + var $form = $( "form", $dialog ).submit(function() { addTab(); - $dialog.dialog('close'); + $dialog.dialog( "close" ); return false; }); // actual addTab function: adds new tab using the title input from the form above function addTab() { - var tab_title = $tab_title_input.val() || 'Tab '+tab_counter; - $tabs.tabs('add', '#tabs-'+tab_counter, tab_title); + var tab_title = $tab_title_input.val() || "Tab " + tab_counter; + $tabs.tabs( "add", "#tabs-" + tab_counter, tab_title ); tab_counter++; } // addTab button: just opens the dialog - $('#add_tab') + $( "#add_tab" ) .button() .click(function() { - $dialog.dialog('open'); + $dialog.dialog( "open" ); }); // 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() { - var index = $('li',$tabs).index($(this).parent()); - $tabs.tabs('remove', index); + $( "#tabs span.ui-icon-close" ).live( "click", function() { + var index = $( "li", $tabs ).index( $( this ).parent() ); + $tabs.tabs( "remove", index ); }); }); </script> @@ -113,8 +114,10 @@ </div><!-- End demo --> + + <div class="demo-description"> - <p>Simple tabs adding and removing.</p> +<p>Simple tabs adding and removing.</p> </div><!-- End demo-description --> </body> |