javascript - 如何在 php 循环函数上应用 html/css

Question

我一直在使用 Bootstrap 使用 php、codeigniter、Html、CSS 和 Javascript 为属性列表页面做管理面板。

我已完成管理面板的基本设计和功能。但这次我想探索更多，因为我的布局对用户不友好。

例子我想列出一个属性，所以我有很多字段需要填写。在我的布局中，因为我有很多字段，所以我需要滚动页面。检查我的示例屏幕截图

如您所见，我的滚动条太长了。所以我在想我应该使用导航选项卡或类似表单向导来为我的页面节省空间。

如果您对字段使用 foreach/if else 函数，任何人都可以获得有关如何制作 formwizard 或 nav-tabs 的教程/提示？

在我的 foreach 上，我有 CATEGORY 和 Fields。所以在每个字段上都有一个父级。示例:

事实(类别)

-目的(字段)

-属性类型(字段)

-描述(字段)

建筑信息(类别)

-建筑物名称(字段)

-便利设施(田野)

引用代码:

<?php foreach($options as $key_option=>$val_option):?>                                          
    <?php
    $required_text = '';
    $required_notice = '';
    if($val_option->is_required == 1)
    {
        $required_text = 'required';
        $required_notice = '*';
    }

    $max_length_text = '';
    if($val_option->max_length > 0)
    {
        $max_length_text = 'maxlength="'.$val_option->max_length.'"';
    }

    ?>

    <?php if($val_option->type == 'CATEGORY'):?>
    <hr />
    <h5><?php echo $val_option->option?> <span class="checkbox-visible"><?php echo form_checkbox('option'.$val_option->id.'_'.$key, '   true', set_value('option'.$val_option->id.'_'.$key, isset($estate->{'option'.$val_option->id.'_'.$key})?$estate->{'option'.$val_option->id.'_'.$key}:''), 'id="inputOption_'.$key.'_'.$val_option->id.'"')?> <?php echo lang_check('Hidden on preview page'); ?></span></h5>
    <hr />
    <?php elseif($val_option->type == 'INPUTBOX' || $val_option->type == 'DECIMAL' || $val_option->type == 'INTEGER'):?>
        <div class="form-group <?php echo (!$val_option->is_frontend && $this->session->userdata('type') == 'AGENT_LIMITED'?' hidden':'') ?>">
            <label class="col-lg-3 control-label"><?php echo $required_notice.$val_option->option?> <?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
          <div class="<?php echo empty($options_lang[$key][$key_option]->prefix)&&empty($options_lang[$key][$key_option]->suffix)?'col-lg-9':'col-lg-6'; ?>">
            <?php echo form_input('option'.$val_option->id.'_'.$key, set_value('option'.$val_option->id.'_'.$key, isset($estate->{'option'.$val_option->id.'_'.$key})?$estate->{'option'.$val_option->id.'_'.$key}:''), 'class="form-control '.$val_option->type.'" id="inputOption_'.$key.'_'.$val_option->id.'" placeholder="'.$val_option->option.'" '.$required_text.' '.$max_length_text)?>
          </div>
          <?php if(!empty($options_lang[$key][$key_option]->prefix) || !empty($options_lang[$key][$key_option]->suffix)): ?>
          <div class="col-lg-3">
            <?php echo $options_lang[$key][$key_option]->prefix.$options_lang[$key][$key_option]->suffix?>
          </div>
          <?php endif; ?>
        </div>
    <?php elseif($val_option->type == 'DROPDOWN'):?>
        <div class="form-group <?php echo (!$val_option->is_frontend && $this->session->userdata('type') == 'AGENT_LIMITED'?' hidden':'') ?>">
          <label class="col-lg-3 control-label"><?php echo $required_notice.$val_option->option?>  <?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>
          <div class="col-lg-9">
            <?php
            if(isset($options_lang[$key][$key_option]))
                $drop_options = array_combine(explode(',',check_combine_set(isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', $val_option->values, '')),explode(',',check_combine_set($val_option->values, isset($options_lang[$key])?$options_lang[$key][$key_option]->values:'', '')));
            else
                $drop_options = array();

            // If you don't want translation to admin interface langauge uncomment this 1 line below:
            // $drop_options = array_combine(explode(',', $options_lang[$key][$key_option]->values), explode(',', $options_lang[$key][$key_option]->values));

            $drop_selected = set_value('option'.$val_option->id.'_'.$key, isset($estate->{'option'.$val_option->id.'_'.$key})?$estate->{'option'.$val_option->id.'_'.$key}:'');

            echo form_dropdown('option'.$val_option->id.'_'.$key, $drop_options, $drop_selected, 'class="form-control" id="inputOption_'.$key.'_'.$val_option->id.'" placeholder="'.$val_option->option.'" '.$required_text)

            ?>
            <?php //=form_dropdown('option'.$val_option->id.'_'.$key, explode(',', $options_lang[$key][$key_option]->values), set_value('option'.$val_option->id.'_'.$key, isset($estate->{'option'.$val_option->id.'_'.$key})?$estate->{'option'.$val_option->id.'_'.$key}:''), 'class="form-control" id="inputOption_'.$val_option->id.'" placeholder="'.$val_option->option.'"')?>
          </div>
        </div> 

Answer 1

您可以只使用 Bootstrap 选项卡，然后执行如下操作:

    <script type="text/javascript">
        $(document).ready(function () {
            // this will default the first tab to be shown
            $('#myTab a:first').tab('show');
        });
    </script>
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <?php foreach ($options as $key_option => $val_option): ?>
            <?php $item = str_replace(' ', '_', strtolower($val_option->option)); ?>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#<?php echo $item; ?>" role="tab" aria-controls="<?php echo $item; ?>"><?php echo $val_option->option; ?></a>
            </li>
        <?php endforeach; ?>
    </ul>
    <div class="tab-content" id="myTabContent">
        <?php foreach ($options as $key_option => $val_option): ?>
            <?php $item = str_replace(' ', '_', strtolower($val_option->option)); ?>
            <div class="tab-pane fade" id="<?php echo $item; ?>" role="tabpanel">
                <?php //echo $val_option->content; // or whatever?>
            </div>
        <?php endforeach; ?>
    </div>

您需要包括以下内容:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">

Bootstrap 4 需要 popper js 才能工作!