dynamic tab interface

This commit is contained in:
John Bintz 2010-01-03 10:17:31 -05:00
parent e7afb296ee
commit f934e95449
2 changed files with 64 additions and 1 deletions

View File

@ -39,3 +39,38 @@
<?php do_action('comicpress-options-admin') ?>
</form>
</div>
<script type="text/javascript">
(function() {
var tab_holder = new Element('div', { className: 'comicpress-tab-holder' });
$$('.comicpress-admin > h2').pop().insert({after: tab_holder});
var show_tab = function(which) {
tab_holder.childElements().each(function(t) {
var is_same = (t.id == which);
t[is_same ? 'addClassName' : 'removeClassName']('active');
$('comicpress-' + t.id.replace(/^comicpress-tab-/, ''))[is_same ? 'show' : 'hide']();
});
};
$$('.comicpress-admin > form > h3').each(function(t) {
var id_suffix = t.innerHTML.replace(/\s+/g, '_');
var holder = new Element("div", { className: 'comicpress-admin-section', id: 'comicpress-' + id_suffix });
t.insert({before: holder});
holder.insert(t.next().remove());
holder.insert({top: t.remove()});
var tab = new Element("a", { href: "#", id: 'comicpress-tab-' + id_suffix }).update(t.innerHTML);
tab_holder.insert(tab);
tab.observe('click', function(e) {
Event.stop(e);
show_tab(e.target.id)
});
});
tab_holder.childElements().pop().addClassName('last');
show_tab(tab_holder.childElements().shift().id);
}());
</script>

View File

@ -231,3 +231,31 @@ tr.highlighted td {
margin: inherit;
padding: inherit
}
/* Options */
.comicpress-tab-holder {
padding: 2px 0
}
.comicpress-tab-holder a {
padding: 5px;
background-color: #aaa;
font-size: 10px;
border-color: black;
border-style: solid;
border-width: 1px 0 0 1px;
}
.comicpress-tab-holder a.last {
border-right-width: 1px;
}
.comicpress-tab-holder a.active {
background-color: white
}
.comicpress-admin form {
border: solid black 1px;
padding: 0 10px 10px;
}