Wills's blogs

后台管理系统的主布局框架（告别传统的iframe）

发表于 | 分类于 |

实现原理：

① 整个后台管理系都是由一个完整的页面（.html | .jsp | .php）所切分的。​​

② 页面由头部、身体（左：菜单，右：内容）、尾部构成。

③ 对应着菜单项属性名称，新建同样名称的.html页面（注：这里的html不存在标签，该页面就是从主页面分出来的右边内容的一部分，它与主页面拼成一个完整的页面）。
④ 点击左边菜单项，就把当前的菜单项名称填写到Ajax的url中。

⑤ 将Ajax返回数据，填给右边内容。

代码实现：

​①.html部分（页面左：菜单）：

​②.html部分（页面右：内容）：​

​③.​目录结构：与菜单属性名保持一致的.html页面

④.Js部分（这里引用了jQuery库）：
​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var code = $(".menulist .selected").attr("data-code")；
$.ajax({
   url: code + ".html",
   type:"get",
   data:{
        code:code
   },
  dataType:"html",
  success:function(data){
        $("#content").html(data)
   }
})
$(".menulist li").click(function(){
  if($(this).hasClass("selected")==false){
       $(".menulist li").removeClass("selected");
       $(".menulist li").animate({width:"80%"},200,"swing");
       $(this).addClass("selected");
       $(this).animate({width:"100%"},200,"linear");
       var code = $(this).attr("data-code");
       hideDetail();
        $.ajax({
             url:code + ".html",
             type:"get",
             dataType:"html",
             success:function(data){
                         $("#content").html(data);
            }
         })
    }
});