- This topic has 0 replies, 1 voice, and was last updated 11 years, 4 months ago by .
- Posts
How could i set up a jquery tab page to pull info for each user from a MySQL db and display it on the page .. allowing the user to add new tabs and move items from one tab to another and update the db with the info so when they cam back to the page it is in the same state that they left it. And have this function for each user that interacts with this page individually per there db account id. If you could help with this i would greatly appreciate it.
Here is what i have started with
<code><!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>jQuery UI Tabs – Simple manipulation</title>
<link rel=”stylesheet” href=”../../themes/base/jquery.ui.all.css”>
<script src=”../../jquery-1.8.3.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.mouse.js”></script>
<script src=”../../ui/jquery.ui.sortable.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>
<script src=”../../ui/jquery.ui.droppable.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; }
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( “#sortable1, #sortable2” ).sortable().disableSelection();
var $tabs = $( “#tabs” ).tabs();
var $tab_items = $( “ul:first li”, $tabs ).droppable({
accept: “.connectedSortable li”,
hoverClass: “ui-state-hover”,
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( “a” ).attr( “href” ) )
.find( “.connectedSortable” );
ui.draggable.hide( “slow”, function() {
$tabs.tabs( “select”, $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( “slow” );
});
}
});
});
</script>
<script>
$(function() {
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>”,
tabCounter = 2;
var tabs = $( “#tabs” ).tabs();
// modal dialog init: custom buttons and a “close” callback reseting the form inside
var dialog = $( “#dialog” ).dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( “close” );
},
Cancel: function() {
$( this ).dialog( “close” );
}
},
close: function() {
form[ 0 ].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( “form” ).submit(function( event ) {
addTab();
dialog.dialog( “close” );
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || “Tab ” + tabCounter,
id = “tabs-” + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, “#” + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = tabContent.val() || “Tab ” + tabCounter;
tabs.find( “.ui-tabs-nav” ).append( li );
tabs.append( “<div id='” + id + “‘></div>” );
tabs.tabs( “refresh” );
tabCounter++;
}
// addTab button: just opens the dialog
$( “#add_tab” )
.button()
.click(function() {
dialog.dialog( “open” );
});
// close icon: removing the tab on click
$( “#tabs span.ui-icon-close” ).live( “click”, function() {
var panelId = $( this ).closest( “li” ).remove().attr( “aria-controls” );
$( “#” + panelId ).remove();
tabs.tabs( “refresh” );
});
});
</script>
<script>
$(function() {
var tabs = $( “#tabs” ).tabs();
tabs.find( “.ui-tabs-nav” ).sortable({
axis: “x”,
stop: function() {
tabs.tabs( “refresh” );
}
});
});
</script>
</head>
<body>
<div id=”main_container”>
<div id=”dialog” title=”Tab data”>
<form>
<fieldset class=”ui-helper-reset”>
<label for=”tab_title”>Title</label>
<input type=”text” name=”tab_title” id=”tab_title” value=”” class=”ui-widget-content ui-corner-all” />
</fieldset>
</form>
</div>
<button id=”add_tab”>Add Tab</button>
<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″>Main</a></li>
<li><a href=”#tabs-2″>Tab 2</a></li>
<!–<li><a href=”#tabs-3″>Tab 3</a></li> // Additional tabs added to the main–>
</ul>
<div id=”tabs-1″>
<p>Test information.</p>
</div>
<div id=”tabs-2″>
<ul id=”sortable2″ class=”connectedSortable ui-helper-reset”>
<li class=”ui-state-highlight”>Item 1</li>
<li class=”ui-state-highlight”>Item 2</li>
<li class=”ui-state-highlight”>Item 3</li>
<li class=”ui-state-highlight”>Item 4</li>
<li class=”ui-state-highlight”>Item 5</li>
</ul>
</div>
</div>
</div>
</body>
</html></code>
- You must be logged in to reply to this topic.
