<?php
global $CI;
ui_tabs();
?>
<div class="wrap">
<?php
admin_head('WP-CI Settings');
?>
<?php
echo form_open('saveSettings');
?>
<?php
success_and_failure();
?>
<?php
echo form_hidden('nonce', get_nonce());
?>
<div class="ui-tabs">
<ul class="ui-tabs-nav">
<li><a href="#general">General</a></li>
<li><a href="#debugging">Debugging</a></li>
</ul>
<div id="general">
<table class="form-table">
<tr>
<style type="text/css">
#vtabs .uiTabs { float:left; width:150px; margin:10px 0 0; }
#vtabs .uiTabbedBody { margin-left:150px; border:4px solid #ccc; background:#fff; min-height:300px; }
#vtabs .uiTabs li { border:0; background:none; float:none; margin:0; }
#vtabs .uiTabs li a { color:#005CB1; float:none; font:12px/1.1em Arial, sans-serif; }
#vtabs .uiTabs li a span { float:none; display:block; padding:6px 0 6px 15px; text-decoration:underline; }
#vtabs .uiTabs li a, #vtabs .uiTabs li a:hover { background:none; padding:0; }
#vtabs .uiTabs li a:hover span { background:none; }
#vtabs .uiTabs li.active a, #vtabs .uiTabs li.active a:hover span { background:#ccc; }
#vtabs .uiTabs li.active span { background:#ccc; }
</style>
<div id="vtabs">
<?php
echo ui_tabs(array(array('Lorem', '#uiTabbedView-vtabs1'), array('Ipsum', '#uiTabbedView-vtabs2'), array('Opossum', '#uiTabbedView-vtabs3')), 0, array('class' => 'uiTabs'));
?>
<div class="uiTabbedBody">
<div id="uiTabbedView-vtabs1">
View one.
</div>
<div id="uiTabbedView-vtabs2" style="display:none">
View two.
</div>
<div id="uiTabbedView-vtabs3" style="display:none">
View three.
</div>
</div>
<div style="clear:both;"></div>
</div>
<div id="manage-tabs">
<?php
echo ui_tabs(array(array('Lorem', '#', array('class' => 'uiTabbedView-ManageX')), array('Ipsum', '#', array('class' => 'uiTabbedView-ManageY')), array('Opossum', '#', array('class' => 'uiTabbedView-ManageZ'))), 0);
?>
<div class="uiTabbedBody">
<div id="uiTabbedView-ManageX">
<div class="app-header">
<h2>Manage flashcards</h2>
<div class="clear"></div>
</div>
<p>View one.</p>
</div>
<div id="uiTabbedView-ManageY" style="display:none">
View two.
</div>
<div id="uiTabbedView-ManageZ" style="display:none">
View three.
</div>
</div>
<div class="clear"></div>
</div>
