Thursday 25 April 2013

Create dynamic tab menu based on display alphabatic range

 /* 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>';
?>

No comments:

Post a Comment

List OF BANK PAN Numbers

List OF BANK PAN Numbers Bank/Home Loan Providers PAN Number Allahabad Bank AACCA8464F Andhra Bank AABCA7375C Axis Bank...