CodeIgniter：如何创建一个不刷新的菜单 [英] CodeIgniter: How to create a menu that doesn't refresh

问题描述

我在一个网站上有一个sidebar1，点击sidebar1中的一个选项后，它打开一个侧边栏2旁边，并从sidebar2选择一个选项后，它打开相关视图中的其余页面的空间。
我试图让它有点动画太。

如果你看菜单，就会出现这样的情况：
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 = > 
 
< div class =list> 
 
< ul class =menu> 
 
< li> 
< span> firs主选项< / span> 
< ul> 
 
< li> 
< a href =<？php echo base_url（）;？> kas>< span>选项1< / span>< / a> 
< / li> 
 
< li> 
< a href =<？php echo base_url（）;？> exx>< span>选项1< / span>< / a> 
< / li> 
 
< li> 
< a href =<？php echo base_url（）;？> weekly_reports>< span>选项1< / span>< / a> 
< / li> 
 
 
< / ul> 
< / li> 
 
 
< li> 
< span>第二个主选项< / span> 
< ul> 
 
< li> 
< a href =<？php echo base_url（）;？> mailer-generator>< span>邮件生成器< / span>< / a> 
< / li> 
 
< li> 
< a href =<？php echo base_url（）;？> mailer-generator2>< span>邮件生成器2< / span>< / a> 
< / li> 
 
< / ul> 
< / li> 
 
 
< / ul> 
 
 
< / div> <！ -  END List  - > 
 
 
 
 
< div id =logout> 
< a href ='<？php echo base_url（）。dashboard / logout？>'>退出< / a> 
< / div> 
 
 
 
< / div> <！ -  END sidebar  - > 
  

解决方案

p>

这将防止重新加载页面。

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

HTML

 < span class ='option'data-option ='1'>第一个主选项< / span> 
  

JS

  $（'span.option'）。click（function（）{
 var option = $（this）.attr（'data-option'）; 
 $ .ajax b $ b 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）; 
 
} 
  

I am working on a website that has a sidebar1, that after clicking on an option in sidebar1 - it opens a sidebar2 right next to it, and after choosing an option from sidebar2 - it opens the relevant view in the rest of the space of the page. I am trying to make it a little bit animated too.

Something like this if you look at the menu: https://webdesignersdream.files.wordpress.com/2013/11/everlytic-cms-dashboard-by-zoe-love7.png

(the menu can be undisplayed too in my case "hide menu" and get a full page display)

Currenly, I have a header.php view which contains all the head content, and a dashboard.php with the menu and the content part that gets refreshed with all the page whenever clicking on an option.

Because when clicking on an option it runs in the controller the views I want to show:

public function index(){

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

}

and refreshes everything.

How do I create an interactive menu that doesn't get refreshed when clicking on an option?

I know that wordpress websites do refresh after clicking an option from a menu, is this even recommended?

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 -->

解决方案

You have to use AJAX to achieve that.

This will prevent the reload of page.

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 (main/options)

public function option(){

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

}

这篇关于CodeIgniter：如何创建一个不刷新的菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！