php 仿Comsenz 安装效果

一直都觉得Comsenz产品的数据表安装效果很漂亮，今天抽了个空，把它的核心代码都提炼出来了。

最终的效果如下：

step.inc.php 安装步骤效果类：

/**
* step.inc.php 安装步骤效果类   *
* 从Comsenz产品的数据表安装效果中提取出主要代码，以供大家学习
* @author tianxin
* @link http://tianxin2001x.cnblogs.com
* @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://tianxin2001x.cnblogs.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="正在执行……" 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://tianxin2001x.cnblogs.com/">甜心</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：/Files/tianxin2001x/stepdemo.rar

posted @ 2010-02-23 14:24 tianxin 阅读(491) 评论(1) 编辑收藏举报

甜心

技术无极限

php 仿Comsenz 安装效果

公告