CodeIgniter:如何创建一个不刷新的菜单

时间:2016-03-08 10:17:25

标签: javascript php jquery codeigniter

我正在开发一个有侧边栏1的网站,在点击侧边栏1中的选项后 - 它会在旁边打开一个侧边栏2,并在从侧边栏2中选择一个选项后 - 它会在其余部分打开相关视图页面的空间。 我试图让它有点动画。

如果您查看菜单,请执行以下操作: https://webdesignersdream.files.wordpress.com/2013/11/everlytic-cms-dashboard-by-zoe-love7.png

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

Currenly,我有一个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 -->

1 个答案:

答案 0 :(得分: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);

}