php 仿Comsenz安裝效果代碼打包提供下載

更新時(shí)間：2010年05月09日 10:25:58 作者：

一直都覺(jué)得Comsenz產(chǎn)品的數(shù)據(jù)表安裝效果很漂亮，今天抽了個(gè)空，把它的核心代碼都提煉出來(lái)了。

最終的效果如下：

step.inc.php 安裝步驟效果類(lèi)：

 
/** 
* step.inc.php 安裝步驟效果類(lèi) * 
* 從Comsenz產(chǎn)品的數(shù)據(jù)表安裝效果中提取出主要代碼，以供大家學(xué)習(xí) 
* @author tianxin 
* @version 1.0.0 * 
*/ 
class StepClass { 
function show_header() { 
define('SHOW_HEADER', TRUE); 
$step = 1; 
$version = 'beta1.0'; 
$release = '20100223'; 
$install_lang = '簡(jiǎn)體中文UTF8版'; 
$title = '仿Comsenz安裝'; 
$charset = 'uft-8'; 
echo <<<EOT 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=$charset" /> 
<title>$title</title> 
<link rel="stylesheet" href="style.css" type="text/css" media="all" /> 
<script type="text/javascript"> 
function $(id) { 
return document.getElementById(id); 
} 
function showmessage(message) { 
$('notice').value += message + "\\r\\n"; 
} 
</script> 
<meta content="Comsenz Inc." name="Copyright" /> 
</head> 
<div class="container"> 
<div class="header"> 
<h1>$title</h1> 
<span>$version $install_lang $release</span> 
EOT; 
$step > 0 && $this->show_step($step); 
} 
function show_step($step) { 
$laststep = 4; 
$title = '仿Comsenz安裝'; 
$comment = '正在執(zhí)行操作'; 
$stepclass = array(); 
for($i = 1; $i <= $laststep; $i++) { 
$stepclass[$i] = $i == $step ? 'current' : ($i < $step ? '' : 'unactivated'); 
} 
$stepclass[$laststep] .= ' last'; 
echo <<<EOT 
<div class="setup step{$step}"> 
<h2>$title</h2> 
<p>$comment</p> 
</div> 
<div class="stepstat"> 
<ul> 
<li class="$stepclass[1]">1</li> 
<li class="$stepclass[2]">2</li> 
<li class="$stepclass[3]">3</li> 
<li class="$stepclass[4]">4</li> 
</ul> 
<div class="stepstatbg stepstat1"></div> 
</div> 
</div> 
<div class="main"> 
EOT; 
} 
function show_install() { 
?> 
<script type="text/javascript"> 
function showmessage(message) { 
document.getElementById('notice').value += message + "\r\n"; 
} 
function initinput() { 
window.location='http://www.dhdzp.com'; 
} 
</script> 
<div class="main"> 
<div class="btnbox"><textarea name="notice" style="width: 80%;" readonly="readonly" id="notice"></textarea></div> 
<div class="btnbox marginbot"> 
<input type="button" name="submit" value="正在執(zhí)行……" disabled style="height: 25" id="laststep" onclick="initinput()"> 
</div> 
<?php 
} 
function runquery() { 
for($i=1;$i<=15;$i++) 
{ 
$this->showjsmessage('執(zhí)行操作'.' '.$i.' ... '.'成功'); 
//模擬每執(zhí)行完一個(gè)動(dòng)作的延時(shí) 
sleep(1); 
} 
} 
function showjsmessage($message) { 
echo '<script type="text/javascript">showmessage(\''.addslashes($message).' \');</script>'."\r\n"; 
flush(); 
ob_flush(); 
} 
function show_footer($quit = true) { 
echo <<<EOT 
<div class="footer">&copy;2001 - 2010 <a href="http://www.dhdzp.com/">甜心</a> 瑤瑤說(shuō)殺很大.</div> 
</div> 
</div> 
</body> 
</html> 
EOT; 
$quit && exit(); 
} 
} 

調(diào)用方法：

復(fù)制代碼代碼如下:

 
header('Content-Type: text/html; charset=utf-8'); 
include('step.inc.php'); 
$step=new StepClass(); 
//顯示頁(yè)面頭部 
$step->show_header(); 
//顯示操作進(jìn)度 
$step->show_install(); 
//運(yùn)行操作 
$step->runquery(); 
echo '<script type="text/javascript">document.getElementById("laststep").disabled=false;document.getElementById("laststep").value = \'執(zhí)行完所有操作，進(jìn)入下一步\';</script>'."\r\n"; 
//顯示頁(yè)面尾部 
$step->show_footer(); 

完整的demo：stepdemo.rar

您可能感興趣的文章: