我正在开发一个有侧边栏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 -->
答案 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);
}