php 仿Comsenz安装效果代码打包提供下载 |
本文标签:php,Comsenz,安装效果 最终的效果如下: step.inc.php 安装步骤效果类: 复制代码 代码如下: /** * step.inc.php 安装步骤效果类 * * 从Comsenz产品的数据表安装效果中提取出主要代码,以供大家学习 * @author tianxin * @version 1.0.0 * */ class StepClass { function show_header() { define(SHOW_HEADER, TRUE); $step = 1; $version = beta1.0; $release = 20100223; $install_lang = 简体中文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 = 正在执行操作; $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.jb51.net; } </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="正在执行……" disabled style="height: 25" id="laststep" onclick="initinput()"> </div> <?php } function runquery() { for($i=1;$i<=15;$i++) { $this->showjsmessage(执行操作. .$i. ... .成功); //模拟每执行完一个动作的延时 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">©2001 - 2010 <a href="http://www.jb51.net/">甜心</a> 瑶瑶说杀很大.</div> </div> </div> </body> </html> EOT; $quit && exit(); } } 调用方法: 复制代码 代码如下: header(Content-Type: text/html; charset=utf-8); include(step.inc.php); $step=new StepClass(); //显示页面头部 $step->show_header(); //显示操作进度 $step->show_install(); //运行操作 $step->runquery(); echo <script type="text/javascript">document.getElementById("laststep").disabled=false;document.getElementById("laststep").value = \执行完所有操作,进入下一步\;</script>."\r\n"; //显示页面尾部 $step->show_footer(); 完整的demo:stepdemo.rar |