Skip to content

Instantly share code, notes, and snippets.

@HendrikHaase

HendrikHaase/rex_tpl_tabbed.php

Created March 5, 2015 13:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save HendrikHaase/915c681da3bbb2135a44 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save HendrikHaase/915c681da3bbb2135a44 to your computer and use it in GitHub Desktop.
Download ZIP
redaxo template for displaying a tabbed-template without any "navigation" at all, all content will be loaded upon creation. the template will load all subcategories of the rootcategory "tabs" and display those as links @ nav.
Raw
rex_tpl_tabbed.php
<html>
<head>
<!-- META inf -->
<!-- mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- remote JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- remote CSS -->
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.no-responsive.no-icons.min.css">
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Oxygen:700,400'><!-- remote FONT -->
<!-- local JS -->
<script type="text/javascript" src="/assets/js/pace.min.js"></script>
<!-- local CSS -->
<link rel="stylesheet" type="text/css" href="/assets/css/default.css">
<link rel="stylesheet" type="text/css" href="/assets/css/overrides.css">
<link rel="stylesheet" type="text/css" href="/assets/css/pace.corner.css">
</head>
<body>
<!--
how this works:
* main = the main template thats being called
it builds itself while parsing the "tabs" category.
try to make the function recursive so it can be used to parse sub-tabs etc!
-->
<div id="debug">
<?php
$clang = $this->getValue("clang");
$tabs = array();
foreach (OOCategory::getRootCategories(true, $clang) as $category) {
if(strcasecmp($category->getName(), "tabs") == 0) {
foreach(OOCategory::getChildrenById($category->getId(), true, $clang) as $tab) {
echo "pushed: ".$tab->getId()."<br />";
array_push($tabs, $tab);
echo "count(\$tabs): ".count($tabs)."<hr />";
}
}
}
?>
</div>
<div id="content">
<div class="tabbable boxed parentTabs">
<ul class="nav nav-tabs">
<?php
// fill this array with articles?
$setnr = 1;
foreach($tabs as $tab) {
//take the first prioritzed category inside "tabs"
if($setnr == 1) { ?>
<li class="active"><a href="#set<?php echo $setnr++; ?>"><?php echo $tab->getName(); ?></a></li>
<?php } else /* iterate the whole rest */ { ?>
<li><a href="#set<?php echo $setnr++; ?>"><?php echo $tab->getName(); ?></a></li>
<?php }
}
?>
</ul>
<div class="tab-content">
<?php
//reset $setnr, tabs stay the same!
$setnr = 1;
foreach($tabs as $tab) {
$article = new rex_article;
$article->setCLang($clang);
$article->setArticleID($tab->getId());
//take the first prioritzed category inside "tabs"
if($setnr == 1) { ?>
<div class="tab-pane fade active in" id="set<?php echo $setnr++; ?>"><?php echo $article->getArticle(); ?></div>
<?php } else { ?>
<div class="tab-pane fade" id="set<?php echo $setnr++; ?>"><?php echo $article->getArticle(); ?></div>
<?php }
}
?>
<!-- this is a tabbable tab, do this later, if needed.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#sub21">Tab 2.1</a>
</li>
<li><a href="#sub22">Tab 2.2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="sub21">
<p>Tab 2.1</p>
</div>
<div class="tab-pane fade" id="sub22">
<p>Tab 2.2</p>
</div>
</div>
</div> -->
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-Y', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.nav-tabs a").click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment