dynamic tab interface
This commit is contained in:
parent
e7afb296ee
commit
f934e95449
@ -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>
|
||||
|
@ -230,4 +230,32 @@ tr.highlighted td {
|
||||
list-style-type: inherit;
|
||||
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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user