PHP 응용 프로그램의 탭 - 퓨전 차트

-2

탭 내용이로드되는 동안 어떻게 기다리거나 진행 휠을 표시 할 수 있습니까?PHP 응용 프로그램의 탭 - 퓨전 차트

"현재 상태"탭을 클릭하면 융합 차트가있는 "dashboard_sla.php"가로드됩니다. 차트가로드되는 동안 진행 휠을 표시하거나 기다려주십시오.

사용자가 탭을 클릭

<?php 

if($status == AUTH_LOGGED){ 
    ?> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Dashboard</title> 

<style> 
#tabs{ 
    padding-right:20px; /* The right most tab will be padded 20px from its right */ 
    margin:0px; 
    float:right;  /* For right aligned tabs */ 
} 
#tabs a{ 
    background:#000 url(images/left_tab.gif) top left no-repeat; /* Background image is positioned top, left */ 
    color:#FFF; 
    padding-left:5px; /* Change this padding according to the size of image slices used to create tab */ 
    text-decoration:none; 
} 
#tabs a:hover{ 
    background:#EDCB27 url(images/selected_left_tab.gif) top left no-repeat; 
    color:#000; 
    text-decoration:none; 
} 
#tabs a span{ 
    background:#000 url(images/right_tab.gif) top right no-repeat; /* Note the position of background image */ 
    color:#FFF; 
    padding-right:15px; 
} 
#tabs a:hover span{ 
    background:#EDCB27 url(images/selected_right_tab.gif) top right no-repeat; 
    color:#000; 
} 
#tabs li{ 
    list-style:none; 
    float:left; 
    padding-left:3px; 
} 
#tabs b{ 
    background:#EDCB27 url(images/selected_left_tab.gif) top left no-repeat; 
    color:#FFF; 
    padding-left:5px; 
    font-weight:normal; 
} 
#tabs b span{ 
    background:#EDCB27 url(images/selected_right_tab.gif) top right no-repeat; 
    color:#000; 
    padding-right:15px; 
} 
#tabs span{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    padding:6px; 
    cursor:pointer; 
} 
#tabs a,#tabs a span,#tabs b,#tabs b span{ 
    display:block;  /* Set display to block, otherwise background images will not work*/ 
    float:left; 
} 
</style> 

</head> 

<body> 
<?php 
    $tab=$_REQUEST['tab']; 
    if($tab=='') $tab='Dashboard1'; 
?> 
    <ul id="tabs"> 

     <?php if($tab=='Dashboard1'){ ?> 
     <li><b><span>Current Status</span></b></li> 
     <?php }else{ ?> 
     <li><a href="?tab=Dashboard1"><span>Current Status</span></a></li> 
     <?php } ?> 

     <?php if($tab=='Dashboard2'){ ?> 
     <li><b><span>SLA Trend IT</span></b></li> 
     <?php }else{ ?> 
     <li><a href="?tab=Dashboard2"><span>SLA Trend IT</span></a></li> 
     <?php } ?> 


    </ul> 
<div style="clear:both; background-color:#FFFFFF; height:0px; overflow:hidden"></div> 
    <div style="border:solid 3px #FFFFFF; background-color:#FFFFFF; padding:10px; font-family:Verdana, Geneva, sans-serif; font-size:11px;"> 
<?php if($tab=='Dashboard1'){ 
    include('dashboard_sla.php'); 
    } else if($tab=='Dashboard2'){ 
     include('dashboard_sla6.php'); 
    } 


} 
else{ 
echo "<center>You must log in First</center>"; 
echo "</td>"; 
echo "<td style='padding:0 0 0 28px;' valign=top>"; 
echo "<iframe frameborder=0 width=100% name=mainf scrolling=auto src=dashboard.php marginwidth=0 marginheight=0 style=margin:0px; padding:0px; height=600></iframe>"; 
echo "</td></tr></table>"; 
echo " </div>\n"; 
echo "</div>\n"; 
echo "\n"; 
} ?> 


</div> 
</body> 
</html>

출처

2013-12-19 user3116069

당신은 jQuery를 아약스 방법을 조회 할 수 있습니다, 코드를 작성 하나 개의 탭을 클릭하고 온라인 아약스에 대한 자습서를보고 S.O.에 다시 게시 할 때 당신이 붙어 있다면 ... 당신이 묻고있는 것과 당신이 이미 게시 한 것을 성취하기 위해 제안 할 것이 너무 많습니다. – blad

이것은 중복 게시물입니다. 이미이 질문을 올렸습니다. http://stackoverflow.com/questions/20673730/tabs-in-php-application – chanchal118

추가 JQuery와 진행 표시 줄 내 코드를 검색 할 수 있습니다. Jquery UI 플러그인을 추가하십시오.

<script> 
$(function() { 
$("#progressbar").progressbar({ 
}); 
}); 
</script>

출처

2013-12-19 06:02:53 Livintha

또 다른 옵션으로 '로더'를 추가 할 수 있습니다. 로더 이미지 추가.

<div id="loader"> 
<img src="loader.gif" alt="" /> 
</div>

그 후 당신은

$('#loader').show();

출처

2013-12-19 06:08:54 Livintha

이 솔루션은 일반적인 솔루션입니다. 여기에 묻는 것에 따르지 않습니다. – chanchal118

은 @ user3116069가 무엇을 해야할지에 대한 아이디어를 얻을 수있는 좋은 해결책입니다. –

그런 다음 @ user3116069의 접근 방식이 필요한 수정 내용을 설명하십시오. – chanchal118

PHP 응용 프로그램의 탭 - 퓨전 차트

답변

관련 문제