如何在Codeigniter中显示动态选项卡和数据

问题描述：

我想要动态选项卡。我有两个表格，一个是Days，另一个是Work。如何在Codeigniter中显示动态选项卡和数据

天

+ -------- + -------- +
| day_id |一天|
+ ------- + --------- +
| 1 |第1天|
| 2 |第2天|
| 3 |第3天|
+ ------- + --------- +

工作

+ -------- + -------- + - ---------- +
| work_id | day_id |工作|
+ -------- + -------- + ----------- +
| 1 | 1 | ABC |
| 2 | 2 | PQR |
| 3 | 3 | XYZ |
+ ------- + ------- + ----------- +

我想动态地在选项卡中有天，我已经填充它在一个li使用foreach.Now我想显示特定标签的工作例如：第1天标签将有工作ABC.So我的问题是如何选择day_id并显示当天的工作，并使标签可点击。

我的控制器

成员：

public function work_plan() 
{ 
    $data['days'] = $this->member_model->get_days(); 
    $data['main_content'] = 'view'; 
    $this->load->view('includes/template', $data); 
}

观点：

 <ul class="tabs"> 

     <?php foreach($days as $curr_day): 
      $day_id = $curr_day['day_id']; 
      $day = $curr_day['day'];?> 

      <li><a href="<?php echo base_url();?>member/work_plan"><?=$day;?></a></li> 
      <?php endforeach; ?> 
    </ul> 

    <table> 
     <tr> 
      <td>No</td> 
      <td>Work</td> 
     </tr> 

     <tr> 
      <td>1</td> 
      <td>ABC</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>PQR</td> 
     </tr> 
    </table>

在此先感谢...

你使用任何主题@Snehal？ – AnkiiG

为了达到这个结果，你应该使用类似[jQuerUI标签]（http://api.jqueryui.com/tabs/）的例子。比你需要用ajax提取特定的数据并将其填充到每个选项卡中。 – Tpojka

不@ @Ankii gangrade – Snehal

答

你需要类似的东西（这只是一个提示）

但你必须查询数据库来获取work_id和day_id 我不是一个JavaScript专家，但它应该是类似这样的

$(document).ready(function() { 
 
    
 
     var currentId; 
 
     var content; 
 
      
 
     $(".subtabs").hover(function(){ 
 
      $(this).css("font-size","35px"); 
 
      $(this).css("cursor","pointer"); 
 
     },function(){ 
 
      $(this).css("font-size","24px"); 
 
     }); 
 

 
     $(".subtabs").click(function(){ 
 
      if($(this).attr('contentId') == currentId) 
 
      { 
 
       $(".subContents").animate({height:"0px"},1000); 
 
       $(".subContents").html(""); 
 
      } 
 
      else 
 
      { 
 
      $(".subtabs").css("background-color",""); 
 
      $(".subContents").animate({height:"0px"},1000); 
 
      $(".subContents").html(""); 
 
      $(this).css("background-color","#0000BF"); 
 
      currentId = $(this).attr('contentId'); 
 
      content ="content here"; 
 
      $("div[id$="+currentId+"]").animate({height:"600px"},500); 
 
      $("div[id$="+currentId+"]").html(content); 
 
      } 
 
     }); 
 

 
     $(".subtabs").toggle(function(){ 
 
     }, 
 
     function(){ 
 
      
 
     }); 
 
    });

body 
 
    { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    #top 
 
    { 
 
     height: 20px; 
 
    } 
 
    .tabs 
 
    { 
 
     margin: 0px auto; 
 
     width: 850px; 
 
     height: 50px; 
 
    } 
 
    .subtabs 
 
    { 
 
     margin-left: 10px; 
 
     margin-right: 10px; 
 
     height: 50px; 
 
     width: 100px; 
 
     line-height: 50px; 
 
     text-align: center; 
 
     float: left; 
 
     font-size: 24px; 
 
     border-top-left-radius: 5px; 
 
     border-top-right-radius: 5px; 
 
     background-color: #4679BD; 
 
    } 
 
    .content 
 
    { 
 
    } 
 
    .subContents 
 
    { 
 
     margin: 0px auto; 
 
     padding-left: 50px; 
 
     padding-right: 50px; 
 
     border-radius: 10px; 
 
     height: 0px; 
 
     width: 850px; 
 
     background-color: #00ACEE; 
 
     border-radius: 0px 0px 5px 5px; 
 
    } 
 
    .bottom 
 
    { 
 
     height: 3px; 
 
     background-color: #00ACEE; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
<title>jQuery 1.7.2</title> 
 
</head> 
 
<body> 
 
<div id="top"></div> 
 
<div class="tabs"> 
 
    <div class="subtabs" contentId="uid1">work1</div> 
 
    <div class="subtabs" contentId="uid2">work2</div> 
 
    <div class="subtabs" contentId="uid3">work3</div> 
 
</div> 
 
<div class="bottom"></div> 
 
<div class="content"> 
 
    <div class="subContents" id="uid1"><p>content of work 1</p></div> 
 
    <div class="subContents" id="uid2"><p>content of work 2</p></div> 
 
    <div class="subContents" id="uid3"><p>content of work 3</p></div> 
 
</div> 
 
</body> 
 
</html>

如何在Codeigniter中显示动态选项卡和数据

相关推荐