Search jQuery

jQuery Forum

Screen name:
flexxall

flexxall's Profile

1 Posts

7 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

jQuery Tabs "changes to save"
[0Replies]
- 27-Dec-2012 04:58 PM
- Forum: Using jQuery UI
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. 
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>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend