/* Create dynamic tab menu based on display alphabatic range Save below code as dynamictabmanu.php and put it along with images*/
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("ul#brandstab li:first").addClass("activebox");
$("div#divcontentbox div:first").css("display","block");
$('ul#brandstab li a').click(function()
{
$("ul#brandstab li").removeClass("activebox");
$(this).parent().addClass("activebox");
$(".abi_htab_content").css("display","none");
var divid = $(this).attr("rel");
$(divid).css("display","block");
});
});
</script>
<style type="text/css">
#divcontentbox .abi_htab_content{display:none;}
#brandstab{height: 46px; margin: 0; padding: 0;}
#brandstab li.activebox, #brandstab li:hover {background: none repeat scroll 0 0 #F0F0F0; bottom: -1px; position: relative;}
#brandstab li{border-radius: 6px 6px 0 0; cursor: pointer; float: left; list-style: none outside none; margin-right: 1px; padding: 0 10px;}
#brandstab li a{color: #CCCCCC; display: block; line-height: 9px; text-decoration: none;}
#brandstab li.activebox a h3, #brandstab li a h3:hover {color:#000;}
#divcontentbox { background: none repeat scroll 0 0 #F0F0F0;padding: 10px;}
div.datablock{float:left; margin:15px;}
</style>
<?php
$display_range = 'A-H,I-Z'; // change this as per need for example create three tab set range like this 'A-H,I-P,Q-Z'
$resexplode = explode(',',$display_range);
$mainarray = array(
"0"=>array("id"=>1,"title"=>"AR","img"=>"ar.jpg","w"=>100,"h"=>100),
"1"=>array("id"=>10,"title"=>"CR","img"=>"cr.jpg","w"=>100,"h"=>100),
"2"=>array("id"=>20,"title"=>"HR","img"=>"hr.jpg","w"=>100,"h"=>100),
"3"=>array("id"=>25,"title"=>"HK","img"=>"hk.jpg","w"=>100,"h"=>100),
"4"=>array("id"=>30,"title"=>"KP","img"=>"kp.jpg","w"=>100,"h"=>100),
"5"=>array("id"=>40,"title"=>"SR","img"=>"sr.jpg","w"=>100,"h"=>100),
"6"=>array("id"=>50,"title"=>"SK","img"=>"sk.jpg","w"=>100,"h"=>100),
"7"=>array("id"=>55,"title"=>"VJ","img"=>"vj.jpg","w"=>100,"h"=>100),
"8"=>array("id"=>58,"title"=>"ZQ","img"=>"zq.jpg","w"=>100,"h"=>100),
);
$recAH = array();
$brandcollection = array();
$data = array();
for($k=0;$k<count($resexplode);$k++)
{
$charsetLetter = explode('-',$resexplode[$k]);
if(count($charsetLetter) == 2)
{
$datastr = $charsetLetter[0]."2".$charsetLetter[1];
$recAH = range($charsetLetter[0], $charsetLetter[1]);
for($i=0;$i<count($mainarray);$i++)
{
$brandname = trim($mainarray[$i]['title']);
$char = ucfirst(substr($brandname, 0,1));
if(in_array($char,$recAH)){
$mainarray[$i]['class'] = $charsetLetter[0]."2".$charsetLetter[1];
$data[] = $mainarray[$i];
}
}
array_filter($data);
$brandcollection[$k]= $data;
unset($data);
}
}
echo '<ul class="abi_htabs" id="brandstab">';
for($k=0;$k<count($resexplode);$k++){ echo '<li><a rel="#'.$resexplode[$k].'"><h3>'.$resexplode[$k].'</h3></a></li>';}
echo '</ul>';
echo '<div class="abi_htab_container" id="divcontentbox">';
for($k=0;$k<count($resexplode);$k++)
{
echo '<div id="'.$resexplode[$k].'" class="abi_htab_content">';
for($i=0;$i<count($brandcollection[$k]);$i++)
{
echo '<div class="datablock"><div class="title">'.$brandcollection[$k][$i]['title'].'</div>';
echo '<div class="img"><img src="'.$brandcollection[$k][$i]['img'].'" width="'.$brandcollection[$k][$i]['w'].'" height="'.$brandcollection[$k][$i]['h'].'"></div>';
echo '</div>';
}
echo '<br style="clear:both;">';
echo '</div>';
}
echo '</div>';
?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("ul#brandstab li:first").addClass("activebox");
$("div#divcontentbox div:first").css("display","block");
$('ul#brandstab li a').click(function()
{
$("ul#brandstab li").removeClass("activebox");
$(this).parent().addClass("activebox");
$(".abi_htab_content").css("display","none");
var divid = $(this).attr("rel");
$(divid).css("display","block");
});
});
</script>
<style type="text/css">
#divcontentbox .abi_htab_content{display:none;}
#brandstab{height: 46px; margin: 0; padding: 0;}
#brandstab li.activebox, #brandstab li:hover {background: none repeat scroll 0 0 #F0F0F0; bottom: -1px; position: relative;}
#brandstab li{border-radius: 6px 6px 0 0; cursor: pointer; float: left; list-style: none outside none; margin-right: 1px; padding: 0 10px;}
#brandstab li a{color: #CCCCCC; display: block; line-height: 9px; text-decoration: none;}
#brandstab li.activebox a h3, #brandstab li a h3:hover {color:#000;}
#divcontentbox { background: none repeat scroll 0 0 #F0F0F0;padding: 10px;}
div.datablock{float:left; margin:15px;}
</style>
<?php
$display_range = 'A-H,I-Z'; // change this as per need for example create three tab set range like this 'A-H,I-P,Q-Z'
$resexplode = explode(',',$display_range);
$mainarray = array(
"0"=>array("id"=>1,"title"=>"AR","img"=>"ar.jpg","w"=>100,"h"=>100),
"1"=>array("id"=>10,"title"=>"CR","img"=>"cr.jpg","w"=>100,"h"=>100),
"2"=>array("id"=>20,"title"=>"HR","img"=>"hr.jpg","w"=>100,"h"=>100),
"3"=>array("id"=>25,"title"=>"HK","img"=>"hk.jpg","w"=>100,"h"=>100),
"4"=>array("id"=>30,"title"=>"KP","img"=>"kp.jpg","w"=>100,"h"=>100),
"5"=>array("id"=>40,"title"=>"SR","img"=>"sr.jpg","w"=>100,"h"=>100),
"6"=>array("id"=>50,"title"=>"SK","img"=>"sk.jpg","w"=>100,"h"=>100),
"7"=>array("id"=>55,"title"=>"VJ","img"=>"vj.jpg","w"=>100,"h"=>100),
"8"=>array("id"=>58,"title"=>"ZQ","img"=>"zq.jpg","w"=>100,"h"=>100),
);
$recAH = array();
$brandcollection = array();
$data = array();
for($k=0;$k<count($resexplode);$k++)
{
$charsetLetter = explode('-',$resexplode[$k]);
if(count($charsetLetter) == 2)
{
$datastr = $charsetLetter[0]."2".$charsetLetter[1];
$recAH = range($charsetLetter[0], $charsetLetter[1]);
for($i=0;$i<count($mainarray);$i++)
{
$brandname = trim($mainarray[$i]['title']);
$char = ucfirst(substr($brandname, 0,1));
if(in_array($char,$recAH)){
$mainarray[$i]['class'] = $charsetLetter[0]."2".$charsetLetter[1];
$data[] = $mainarray[$i];
}
}
array_filter($data);
$brandcollection[$k]= $data;
unset($data);
}
}
echo '<ul class="abi_htabs" id="brandstab">';
for($k=0;$k<count($resexplode);$k++){ echo '<li><a rel="#'.$resexplode[$k].'"><h3>'.$resexplode[$k].'</h3></a></li>';}
echo '</ul>';
echo '<div class="abi_htab_container" id="divcontentbox">';
for($k=0;$k<count($resexplode);$k++)
{
echo '<div id="'.$resexplode[$k].'" class="abi_htab_content">';
for($i=0;$i<count($brandcollection[$k]);$i++)
{
echo '<div class="datablock"><div class="title">'.$brandcollection[$k][$i]['title'].'</div>';
echo '<div class="img"><img src="'.$brandcollection[$k][$i]['img'].'" width="'.$brandcollection[$k][$i]['w'].'" height="'.$brandcollection[$k][$i]['h'].'"></div>';
echo '</div>';
}
echo '<br style="clear:both;">';
echo '</div>';
}
echo '</div>';
?>
No comments:
Post a Comment