javascript - CodeIgniter:如何创建不刷新的菜单

Question

我正在开发一个具有侧边栏1的网站，在单击侧边栏1中的选项后 - 它会在其旁边打开一个侧边栏2，并且在从侧边栏2中选择一个选项后 - 它会在其余部分中打开相关 View 页面的空间。我也在努力让它变得生动一点。

如果你查看菜单，会是这样的: https://webdesignersdream.files.wordpress.com/2013/11/everlytic-cms-dashboard-by-zoe-love7.png

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

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

因为当单击一个选项时，它会在 Controller 中运行我想要显示的 View :

public function index(){

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

}

并刷新一切。

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

我知道 WordPress 网站在单击菜单中的选项后会刷新，是否建议这样做？

仪表板.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);
              }
            });
        });

Controller (主/选项)

public function option(){

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

}