CodeIgniter：如何创建不刷新的菜单

Question

我正在开发一个具有 sidebar1 的网站，单击 sidebar1 中的一个选项后 - 它会在旁边打开一个 sidebar2，然后从 sidebar2 中选择一个选项后 - 它会在其余部分中打开相关视图页面的空间。 我也在试着让它有点动画。

如果您查看菜单，会出现这样的情况： https://webdesignersdream.files.wordpress.com/2013/11/everlytic-cms-dashboard-by-zoe-love7.png

（在我的情况下，菜单也可以不显示“隐藏菜单”并获得整页显示）

目前，我有一个 header.php 视图，其中包含所有头部内容，以及一个带有菜单和内容部分的dashboard.php，每当单击一个选项时，所有页面都会刷新。

因为当点击一个选项时，它会在控制器中运行我想要显示的视图：

public function index(){

    $this->load->view('header');
    $this->load->view('dashboard');
    $this->load->view('kas/kas_main');
    $this->load->view('footer');

}

并刷新一切。

如何创建在单击选项时不会刷新的交互式菜单？

我知道 wordpress 网站在单击菜单中的选项后会刷新，甚至推荐这样做吗？

dashboard.php：

<div class="sidebar">

    <div class="list">

        <ul class="menu">

            <li>
                <span>firs main option</span>
                <ul>

                    <li>
                        <a href="<?php echo base_url();?>kas"><span>option 1</span></a>
                    </li>

                    <li>
                        <a href="<?php echo base_url();?>exx"><span>option 1</span></a>
                    </li>

                    <li>
                        <a href="<?php echo base_url();?>weekly_reports"><span>option 1</span></a>
                    </li>


                </ul>
            </li>


            <li>
                <span>second main option</span>
                <ul>

                    <li>
                        <a href="<?php echo base_url();?>mailer-generator"><span> Mailer Generator</span></a>
                    </li>

                    <li>
                        <a href="<?php echo base_url();?>mailer-generator2"><span> Mailer Generator 2</span></a>
                    </li>

                </ul>
            </li>


        </ul>        


    </div> <!-- END List -->




    <div id="logout">
        <a href='<?php echo base_url()."dashboard/logout" ?>'> Logout </a>
    </div>    



</div> <!-- END sidebar -->

Answer 1

您必须使用 AJAX 来实现。

这将防止重新加载页面。

http://www.w3schools.com/ajax/

HTML

<span class='option' data-option='1'>first main option</span>

JS

        $('span.option').click(function(){  
            var option = $(this).attr('data-option');  
            $.ajax({
              url: "main/options",
              type: "POST",
              data: {opt: option},
              dataType: "html",
              success:function(result){
                   $('#content').html(result);
              }
            });
        });

控制器（主要/选项）

public function option(){

    echo $this->load->view( $_POST['opt'], null, true);

}