<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="jquery-2.0.0.min.js"></script>
<style>
/* IE has layout issues when sorting (see #5413) */
.group { zoom: 1 }
</style>
</head>
<body>
<script>
function displayTabs(masterName,masterField){
$.post(
'ajax.php'
,{TabsgettmasterName:masterName,
TabsgettmasterField:masterField
}
,function(data)
{
$('#disp').html(data)
}
)
}
</script>
<h1>Welcome to PHP jQuery UI MySQL Tabs</h1>
<h2>To create your desired tabs and get their content from details table , based on your database master table please fill the form below:</h2>
<p>That is so easy and user friendly </p>
<p style="color:red;"><i>NOT: Database details are protected and must be customized through class.tabs File</i></p>
<input type="text" id="txtMastertableName" placeholder="Master Table Name" style="width:200px;">
<input type="text" id="txtMasterField" placeholder="Master Field to be displayed" style="width:200px;">
<input type="text" id="txtMasterTablePrimaryKey" placeholder="Master Table Primary Key" style="width:200px;">
<input type="text" id="txtDetailseName" placeholder="Details Table Name" style="width:200px;">
<input type="text" id="txtDetailseField" placeholder="Details Table Field to be displayed" style="width:250px;">
<input type="text" id="txtDetailseFK" placeholder="Details Table Foreign Key" style="width:200px;">
<ul>
<li><button onclick="displayTabs($('#txtMastertableName').val(),
$('#txtMasterField').val()
);" >tabs demo</button></li>
</ul>
<div id="disp">
</div>
<?php
?>
</body>
</html>
|
Download
