php+bootstrap 编写简易的步骤进度条

最新推荐文章于 2024-07-29 22:50:36 发布

の天命喵星人

最新推荐文章于 2024-07-29 22:50:36 发布

阅读量415

点赞数 4

文章标签： php bootstrap 开发语言

本文链接：https://blog.csdn.net/qq_42580037/article/details/140717573

版权

个人笔记记录，步骤进度条。

版本一：

初始版本，
当前版本单纯的根据bootstrap+CSS进行完成的简易版本。这个比较简单
样式我放在了最底下。
在这里插入图片描述

  <div class="form-group steps">
        <div class="steps-height">
            <div class="step-line step-completed"></div>
            <div class="step step-completed">
                <div class="step-text">1</div>
                <div class="step-main">
                    <p>1.立项信息</p>
                    <p>1.立项信息</p>
                    <p>1.立项信息</p>
                    <p>1.立项信息</p>
                    <p>1.立项信息</p>
                </div>
            </div>
            <div class="step-line step-completed"></div>
        </div>

        <div class="steps-height">
            <div class="step-line "></div>
            <div class="step">
                <div class="step-text">2</div>
                <div class="step-main">2.项目成员</div>
            </div>
            <div class="step-line "></div>
        </div>

        <div class="steps-height">
            <div class="step-line"> </div>
            <div class="step ">
                <div class="step-text">3</div>
                <div class="step-main">3.合作单位</div>
            </div>
            <div class="step-line "></div>
        </div>

        <div class="steps-height">
            <div class="step-line"> </div>
            <div class="step">
                <div class="step-text">4</div>
                <div class="step-main">4.项目预算</div>
            </div>
            <div class="step-line "></div>
        </div>

        <div class="steps-height">
            <div class="step-line"> </div>
            <div class="step">
                <div class="step-text">5</div>
                <div class="step-main">5.项目文档</div>
            </div>
            <div class="step-line "></div>
        </div>

        <div class="steps-height">
            <div class="step-line"></div>
            <div class="step">
                <div class="step-text">6</div>
                <div class="step-main">6.完成登记</div>
            </div>
            <div class="step-line"></div>
        </div>
    </div>

版本二

这个版本加入了php，从数据库读取内容。然后加载到前端。
框架用的是thinkphp。

从数据库进行加载内容

    <div class="form-group steps">
        
        {volist name="steps" id="step"  key="k"}
        <div class="steps-height">
            <div class="step-line  step-completed"></div>
            <div class="step step-completed">
                <div class="step-text">{$k}</div>
                <div class="step-main">
                    <p>{$k}.{$step.name}</p>
                    <p>数量：{$step.number}</p>
<!--                    <div>2.项目成员</div>-->
                </div>
            </div>
            <div class="step-line  step-completed"></div>
        </div>
        {/volist}

    </div>

    public function index()
    {
        //设置过滤方法
        $this->request->filter(['strip_tags', 'trim']);

        $todayStart = date('Y-m-d 00:00:00'); // 今天开始的时间戳
        $todayEnd = date('Y-m-d 23:59:59');   // 今天结束的时间戳

        //获取当前日期的步骤栏
        $steps =Db::name("step")
            ->where('createtime', '>=', $todayStart)
            ->where('createtime', '<=', $todayEnd)
            ->select();

        // 将数据传递给视图
        $this->assign('steps', $steps);

        return $this->view->fetch();

    }

版本3

这个版本比较完善了。根据下拉框，进行刷新需要的步骤进度条。
并且步骤条通过 js 进行动态生成。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="steps.css" rel="stylesheet" />
    <link rel="stylesheet" href="__CDN__/assets/libs/steps/steps.css">
</head>
<body>
<div class="panel panel-default panel-intro">
    <div  class="form-group">
        <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">下拉框:</label>
                <div class="col-xs-12 col-sm-8">

                    <select  id="c-fi_Sub" data-rule="required" class="form-control" name="row[title]">
				<!--   <option value="0" >请选择状态</option>-->
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div class="form-group steps">
<!--        步骤条位置-->
    </div>
</div>

</body>
</html>

js

//获取 步骤条内容
            function steps(rc_name){
                Fast.api.ajax(
                    {
                        url: 'step/step/select_step',
                        data: {rc_name: rc_name},
                    }, function (data, ret) {

                        //清楚 容器上的内容
                        $('.steps').empty();
                        //通过foreach构造 div
                        $.each(data.html, function(index, step) {
                            //创建div
                            var stepDiv = $('<div></div>').addClass('steps-height');

                            var lineDiv=$('<div></div>').addClass('step-line  step-completed');
                            var completed=$('<div></div>').addClass('step step-completed');
                            var lineDiv2=$('<div></div>').addClass('step-line  step-completed');
                            // ... 根据 step 对象创建 DOM 元素并添加到 stepDiv 中
                            completed.append('<div class="step-text">' + (index+1) + '</div>');
                            completed.append('<div class="step-main"><p>' + (index+1) + ' . '+ step.pi_name + '</p><p>数量：' + step.number + '</p></div>');

                            stepDiv.append(lineDiv);
                            stepDiv.append(completed);
                            stepDiv.append(lineDiv2);
                            // 将创建好的 stepDiv 添加到页面上
                            $('.steps').append(stepDiv); // 将步骤添加到 .steps 容器中
                        });

                        return false;

                    }, function (data, ret) {
                        alert(ret.msg);
                        return false;
                    });
            }

			//加载成功时刷新下拉框
            $(document).ready(function() {
                Fast.api.ajax({
                    url: 'step/step/select_rc_name',
                    data: {},
                }, function (data, ret) {
                    //将内容挂到下拉选择框
                    $("#c-fi_Sub").html(data.html);
                    // 获取选中的id
                    var rc_name = $("#c-fi_Sub").val();
                    //刷新步骤条
                    steps(rc_name);
                    return false;
                }, function (data, ret) {
                    alert(ret.msg);
                    return false;
                });
            });

            //选择下拉框时
            $(document).on("change", "#c-fi_Sub", function () {
                // 获取选中的id
                var rc_name = $("#c-fi_Sub").val();
                //刷新步骤条
                steps(rc_name);
            });

以下就是样式了。不是很难的内容

.steps {
    /*position: relative;*/
    /*padding: 25px 0 25px 20px;*/
    position: relative;
    display: flex;
    flex-wrap: wrap; /* 允许子元素换行 */
    align-items: flex-start; /* 垂直居中对齐子元素 */
    padding: 25px 0 25px 20px;
}

.step,
.step-line {
    float: left;
}
.steps-height{
    height: 150px;
}
.step {
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    line-height: 21px;
    text-align: center;
    /*font-size: 15px;*/
    border: 1px solid #cdcdcd;
    background: #cdcdcd;
    font: 16px Helvetica Neue,Helvetica,PingFang SC,微软雅黑,Tahoma,Arial,sans-serif;
}

.step-line {
    width: 50px;
    position: relative;
    top: 9px;
    height: 5px;
    background-color: #cdcdcd;
    /*display: none; !* 如果不需要线连接每个步骤，可以隐藏它 *!*/
    /* 如果需要线，则需要重新设计其显示方式，因为flex布局下自动换行会打破线的连续性 */
}
.step-text {

    font-size: 15px;
    color: #fff;
    background-color: #cdcdcd;
    border-radius: 50%;
    width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    margin-bottom: 5px; /* 与下面的文本保持一定距离 */

}

.step-main {
    font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif;
    text-align: center;
    color: #313131;
    margin-top: 8px; /* 适当的间距 */
}
.step-completed .step-text {
    background: #327ab7;
    border-color: #327ab7;
}
.step-completed .step-main {
    /* 如果需要，可以添加特定于已完成步骤的样式 */
}

/* 如果需要，可以为第一个步骤添加特殊处理，例如没有线条 */
.step:first-child::after {
    display: none;
}

.step::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -40px; /* 线条从步骤的左侧开始 */
    width: 30px; /* 线条的长度 */
    height: 2px; /* 线条的粗细 */
    background-color: #cdcdcd;
    transform: translateY(-50%); /* 垂直居中线条 */
}


.step-main {
    font: 14px Helvetica Neue,Helvetica,PingFang SC,微软雅黑,Tahoma,Arial,sans-serif;
    padding: 8px 0;
    display: block;
    width: 80px;
    text-align: center;
    position: relative;
    left: -34px;
    color: #313131;
}


.steps > .step-completed {
    background: #327ab7;
    border-color: #327ab7;
}

/*.step-completed > .step-main {
    color: #2f318e;
}*/

.step-completed > .step-circle {
    background-color: #2f318e;
}

.step-completed.step-line {
    background-color: #327ab7;
}
/* 响应式设计，可以根据需要调整 */
@media (max-width: 600px) {
    /*.step {*/
    /*    width: 50px; !* 在小屏幕上减小步骤宽度 *!*/
    /*    margin-right: 10px; !* 减小间距 *!*/
    /*}*/

    .step-text {
        font-size: 12px; /* 减小文本大小以适应小屏幕 */
    }

    .step-main {
        font-size: 12px; /* 同样减小主文本大小 */
    }
    .steps-height{
        height: 50px;
    }
    /*.step {*/
    /*    margin-right: 15px; !* 减小间距以适应小屏幕 *!*/
    /*    min-width: 40px; !* 减小最小宽度 *!*/
    /*}*/

    .step::before {
        left: -20px; /* 减小线条的起始位置 */
        width: 15px; /* 减小线条的长度 */
    }
}

/* 假设你在步骤中添加了一个 p 标签 */
.step p {
    /* 这里的样式将控制 p 标签的显示，它会自动增加 .step 的高度 */
    margin: 4px 0; /* 适当的间距 */
    font-size: 14px; /* 或其他适当的字体大小 */
}