jQuery Tabs "changes to save"

jQuery Tabs "changes to save"

With the Jquery tabs is there a way to save the changes made on a per user basis. I would also like to use the lists inside the tabs with the lists holding data retrieved from MySQL. What would the best way to go about this be. Unfortunately I am just a nooblet cutting and pasting code to get things to somewhat work.  

Thank you in advance
Steve

Here's a copy of the code I have used so far
  2. <!doctype html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <title>jQuery UI Tabs - Simple manipulation</title>
  7. <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  8. <script src="../../jquery-1.8.3.js"></script>
  9. <script src="../../ui/jquery.ui.position.js"></script>
  10. <script src="../../ui/jquery.ui.core.js"></script>
  11. <script src="../../ui/jquery.ui.widget.js"></script>
  12. <script src="../../ui/jquery.ui.mouse.js"></script>
  13. <script src="../../ui/jquery.ui.sortable.js"></script>
  14. <script src="../../ui/jquery.ui.button.js"></script>
  15. <script src="../../ui/jquery.ui.tabs.js"></script>
  16. <script src="../../ui/jquery.ui.dialog.js"></script>
  17. <script src="../../ui/jquery.ui.droppable.js"></script>
  18. <link rel="stylesheet" href="../demos.css">
  19. <style>
  20. #dialog label, #dialog input { display:block; }
  21. #dialog label { margin-top: 0.5em; }
  22. #dialog input, #dialog textarea { width: 95%; }
  23. #tabs { margin-top: 1em; }
  24. #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
  25. #add_tab { cursor: pointer; }
  26. #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  27. </style>
  29. <script>
  30. $(function() {
  31. $( "#sortable1, #sortable2" ).sortable().disableSelection();

  33. var $tabs = $( "#tabs" ).tabs();

  35. var $tab_items = $( "ul:first li", $tabs ).droppable({
  36. accept: ".connectedSortable li",
  37. hoverClass: "ui-state-hover",
  38. drop: function( event, ui ) {
  39. var $item = $( this );
  40. var $list = $( $item.find( "a" ).attr( "href" ) )
  41. .find( ".connectedSortable" );

  43. ui.draggable.hide( "slow", function() {
  44. $tabs.tabs( "select", $tab_items.index( $item ) );
  45. $( this ).appendTo( $list ).show( "slow" );
  46. });
  47. }
  48. });
  49. });
  50. </script>
  52. <script>
  53. $(function() {
  54. var tabTitle = $( "#tab_title" ),
  55. tabContent = $( "#tab_content" ),
  56. tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
  57. tabCounter = 2;

  59. var tabs = $( "#tabs" ).tabs();

  61. // modal dialog init: custom buttons and a "close" callback reseting the form inside
  62. var dialog = $( "#dialog" ).dialog({
  63. autoOpen: false,
  64. modal: true,
  65. buttons: {
  66. Add: function() {
  67. addTab();
  68. $( this ).dialog( "close" );
  69. },
  70. Cancel: function() {
  71. $( this ).dialog( "close" );
  72. }
  73. },
  74. close: function() {
  75. form[ 0 ].reset();
  76. }
  77. });

  79. // addTab form: calls addTab function on submit and closes the dialog
  80. var form = dialog.find( "form" ).submit(function( event ) {
  81. addTab();
  82. dialog.dialog( "close" );
  83. event.preventDefault();
  84. });

  86. // actual addTab function: adds new tab using the input from the form above
  87. function addTab() {
  88. var label = tabTitle.val() || "Tab " + tabCounter,
  89. id = "tabs-" + tabCounter,
  90. li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
  91. tabContentHtml = tabContent.val() || "Tab " + tabCounter;

  93. tabs.find( ".ui-tabs-nav" ).append( li );
  94. tabs.append( "<div id='" + id + "'></div>" );
  95. tabs.tabs( "refresh" );
  96. tabCounter++;
  97. }

  99. // addTab button: just opens the dialog
  100. $( "#add_tab" )
  101. .button()
  102. .click(function() {
  103. dialog.dialog( "open" );
  104. });

  106. // close icon: removing the tab on click
  107. $( "#tabs span.ui-icon-close" ).live( "click", function() {
  108. var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
  109. $( "#" + panelId ).remove();
  110. tabs.tabs( "refresh" );
  111. });
  112. });
  113. </script>
  115. <script>
  116. $(function() {
  117. var tabs = $( "#tabs" ).tabs();
  118. tabs.find( ".ui-tabs-nav" ).sortable({
  119. axis: "x",
  120. stop: function() {
  121. tabs.tabs( "refresh" );
  122. }
  123. });
  124. });
  125. </script>
  127. </head>
  128. <body>
  129. <div id="main_container">
  130. <div id="dialog" title="Tab data">
  131. <form>
  132. <fieldset class="ui-helper-reset">
  133. <label for="tab_title">Title</label>
  134. <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" />
  136. </fieldset>
  137. </form>
  138. </div>

  140. <button id="add_tab">Add Tab</button>

  142. <div id="tabs">
  143. <ul>
  144. <li><a href="#tabs-1">Main</a></li>
  145. <li><a href="#tabs-2">Tab 2</a></li>
  146. <!--<li><a href="#tabs-3">Tab 3</a></li>  // Additional tabs added to the main-->
  147. </ul>
  148. <div id="tabs-1">
  149. <p>Test information.</p>
  150. </div>
  151. <div id="tabs-2">
  152. <ul id="sortable2" class="connectedSortable ui-helper-reset">
  153. <li class="ui-state-highlight">Item 1</li>
  154. <li class="ui-state-highlight">Item 2</li>
  155. <li class="ui-state-highlight">Item 3</li>
  156. <li class="ui-state-highlight">Item 4</li>
  157. <li class="ui-state-highlight">Item 5</li>
  158. </ul>
  159. </div>
  160. </div>
  161. </div>
  162. </body>
  163. </html>