metabox part 3

This commit is contained in:
Jana Deutschländer 2017-01-09 17:08:44 +01:00
commit 92c91ef8b0
5 changed files with 67 additions and 17 deletions

View file

@ -59,6 +59,8 @@
}
}
&.active > a {
cursor: default;
tab-index: -1;
color: #555;
background-color: @background_page-header;
border-color: transparent;
@ -98,21 +100,24 @@
padding-left: .5em;
a {
font-size: .78rem;
display: inline-block;
padding-left: 10px;
position: relative;
}
li {
}
div.li {
position: relative;
::before {
position: relative;
top: -.2em;
position: absolute;
top: .3em;
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin-right: .3rem;
background-color: @color-border;
background-color: #ccc;
overflow: hidden;
left: 0;
}
padding: .15em 0;
}

41
js/meta-box.js Normal file
View file

@ -0,0 +1,41 @@
(function ($, spc) {
var toggleTabs = function () {
var $metaBox = $('#meta-box'),
$tabLinks = $metaBox.find('.meta-tabs').find('a'),
$tabPanels = $metaBox.find('.meta-content').find('.tab-pane');
try {
$tabLinks.each(function () {
$(this).on("click", function (e) {
e.preventDefault();
var $link = $(this),
$panel = $($link.attr('href'));
//reset
resetTabs();
//current state
$link.addClass('active').attr('aria-expanded','true');
$panel.addClass('active').attr('aria-hidden','false');
});
});
} catch (err) {
alert('err');
}
},
resetTabs = function($tabLinks,$tabPanels){
$tabLinks.closest('li').removeClass('active');
$tabLinks.attr('aria-expanded','false');
$tabPanels.removeClass('active').attr('aria-hidden','true');
};
$(function () {
toggleTabs();
});
})(jQuery, spc);

View file

@ -92,7 +92,7 @@
}catch(err){
alert('err');
//console.log('err');
}
};

View file

@ -26,9 +26,7 @@
/* DOKUWIKI:include js/plugins/do_tasks.js */
/* DOKUWIKI:include js/sidebar-menu.js */
/* DOKUWIKI:include js/meta-box.js */

View file

@ -1,21 +1,27 @@
<?php
if (!defined('DOKU_INC')) die();
?>
<div class="tab-container">
<ul class="meta-tabs">
<!--<li class="active"><a data-toggle="tab" href="#tab1" aria-expanded="true"><span class="prefix">Sitemap</span><span class="num"></span></a></li>-->
<li><a data-toggle="tab" href="#tab1" aria-expanded="false"><span class="prefix">Sitemap</span><span class="num"></span></a></li>
<li><a data-toggle="tab" href="#tab2" aria-expanded="false"><span class="prefix">Tags</span><span class="num"></span></a></li>
<li><a data-toggle="tab" href="#tab3" aria-expanded="false"><span class="prefix">Jira</span><span class="num"></span></a></li>
<li><a href="#tab1" aria-expanded="false"><span class="prefix">Sitemap</span><span class="num"></span></a></li>
<?php if ($tags !== null) { ?><li><a href="#tab2" aria-expanded="false"><span class="prefix">Tags</span><span class="num"></span></a></li><?php } ?>
<li><a href="#tab3" aria-expanded="false"><span class="prefix">Jira</span><span class="num"></span></a></li>
</ul>
<div class="meta-content">
<div class="box-content">
<div id="tab1" class="tab-pane"> <!-- .active -->
<div id="tab1" class="tab-pane" aria-hidden="true">
<?php tpl_toc(); ?>
</div>
<div id="tab2" class="tab-pane">
</div>
<div id="tab3" class="tab-pane">
<?php if ($tags !== null) { ?>
<div id="tab2" class="tab-pane" aria-hidden="true">
<?php $tags->tpl_tags(); ?>
</div>
<?php } ?>
<div id="tab3" class="tab-pane" aria-hidden="true">
</div>
</div>