|
By: Bradley
Date: 2016-12-06
Time: 01:19
|
Creating Tabs based on data attribute
I am trying to create a dynamic tab script that will run through an array and create a dynamic tab set based on unique values in the data. I am having some troubles getting the results I want.
In this example I have 4 records with three different status (Pending, Approved, Disabled). This should create three tabs, one for each. But in all honesty it shouldn't matter how many there are it should just group and spit out the tab and its data.
Each tab should display only the records with the status that applies to the tab.
I have included my array and my html code. I have tried using the headergrp which creates the two different sections but won't display all the data for each status. Only one record.
Any tips on what the best method would be would be great. Thanks.
-----PHP-----
//TabData Array
$args["tabData"][] = array("type"=>"News", "status"=>"approved", "date" => "12/07/1976", "time"=>"", "endDate" => "", "endTime"=>"", "title" => "News 1", "message" => "News Value 1");
$args["tabData"][] = array("type"=>"Event", "status"=>"approved", "date" => "12/07/1976", "time"=>"1:00 pm", "endDate" => "12/07/1976", "endTime"=>"6:00 pm", "title" => "Event 1", "message" => "Event Value 1");
$args["tabData"][] = array("type"=>"News", "status"=>"pending", "date" => "12/07/1976", "time"=>"", "endDate" => "", "endTime"=>"", "title" => "News 2", "message" => "News Value 2");
$args["tabData"][] = array("type"=>"Event", "status"=>"disabled", "date" => "12/07/1976", "time"=>"1:00 pm", "endDate" => "12/07/1976", "endTime"=>"6:00 pm", "title" => "Event 2", "message" => "Event Value 2");
|
-----HTML-----
<div class="col s12">
<div id="[tabData.status; block=div;headergrp=status]" class="col s12 grey lighten-4" style="display: block">
<div id="[tabData.#; block=div;]">
<div>[tabData.title; block=div]</div>
</div>
</div>
</div>
|
-----Final HTML----
<div class="col s12">
<div id="approved" class="col s12 grey lighten-4" style="display: block">
<div id="1"><div>News 1</div></div>
<div id="2"><div>Event 1</div></div>
</div>
<div id="pending" class="col s12 grey lighten-4" style="display: block">
<div id="3"><div>News 2</div></div>
</div>
<div id="disabled" class="col s12 grey lighten-4" style="display: block">
<div id="4"><div>Event 2</div></div>
</div>
</div>
|
|