ページの先頭にあるデータベースからデータを呼び出し、foreach で配列情報を使用してタブのテーブルにデータを入力しようとしています。現在、タブ 2 でテストしていますが、これを最初にタブに表示したいと考えています。ユーザーが移動しない限り 1。db クエリと結果が正しく入力されるように、どこに、またはどのように含めるかがわかりません。これが私がこれまでに持っているものです。
{source 0}
<?php
$user =& JFactory::getUser();
if (!$user->guest)
$name = $user->username;
$db =& JFactory::getDbo();
$query = $db->getQuery(true);
$query = "
SELECT image_url, name_test, image_date
FROM #__image_data
WHERE user_name = '$name'";
$db->setQuery($query);
echo $name."'s Pets" . "<br/>";
$list = $db->loadObjectList();
foreach ($list as $item){
}
?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Simple manipulation</title>
<link rel="stylesheet" href="/Joomla3/jquery/themes/base/jquery.ui.all.css">
<script src="/Joomla3/jquery/jquery-1.8.3.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.position.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.core.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.widget.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.mouse.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.sortable.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.button.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.tabs.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.dialog.js"></script>
<script src="/Joomla3/jquery/ui/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="/Joomla3/jquery/demos/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"><img src="http://localhost/Joomla3/myimage.png"></li>
<li class="ui-state-highlight">
<?php"<tr><td>"."<img src='$item->image_url'>" . "<td>" . $item->name_test . "<td>" . $item->image_date ."</td></tr>"?></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>
{/source}