本节讲述如何拆分页面以及使用jquery和ajax实现局部刷新。
==================================================================================================
从我们的页面来看,左边的菜单是不变的,右边的内容区根据不同的菜单来变化,我们就想到是否可以只针对
右边做局部刷新呢,可以使用ajax技术来完成。
1 拆分主页
我们把页面结构分成四块区域:1、页面上端Top区域;2、页面左侧Menu区域;3、页面中部区域;4、页面底端footer区域;
根据这种划分,我们把main_list拆分成top,menu,footer,并把页面head也单独出来,具体参见以下步骤:
1) 在view目录下创建container.php代替main_list.php文件
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> <!DOCTYPE html> <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie9"> <![endif]--> <!--[if !IE]><!--> <html lang="en"> <!--<![endif]--> <?php $this->load->view('templates/header'); ?> <body class="fixed-top"> <?php $this->load->view('templates/top'); ?> <div id="container" class="row-fluid"> <?php $this->load->view('templates/menu'); ?> <div id="main-content"> <?php $this->load->view('main'); ?> </div> </div> <?php $this->load->view('templates/footer'); ?> </body> </html> |
通过改造,我们的主页代码看起来就很简洁了,其中用到了几个文件:
i)header.php(view->templates目录下),用来存放页面head块代码:
<head> <meta charset="utf-8" /> <title>Software Service Manager System</title> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="" name="description" /> <meta content="Mosaddek" name="author" />
<!-- <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>--> <!-- <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">-->
<link rel="stylesheet" href="<?php echo base_url('assets/font-awesome/css/font-awesome.min')?>"> <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css')?>"> <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap-responsive.min.css')?>"> <link rel="stylesheet" href="<?php echo base_url('assets/bootstrap/css/bootstrap-fileupload.css')?>"> <link rel="stylesheet" href="<?php echo base_url('assets/css/style.css')?>"> <link rel="stylesheet" href="<?php echo base_url('assets/css/style-responsive.css')?>"> <link rel="stylesheet" href="<?php echo base_url('assets/css |
首页 上一页 1 2 3 4 5 6 下一页 尾页 1/6/6 | |
【大 中 小】【打印】 【繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部】 | |
上一篇:禁止网站某页面被频繁刷新(验证) | 下一篇:python 之 前端开发( JavaScript.. |