jqyery(ajax) div css 构建界面布局

来源：互联网发布：excel数据清洗工具编辑：程序博客网时间：2024/06/05 05:17

1. web工程界面布局分解:

典型的界面格局如下:

按些格局可分成如下几个div：

a. top 放logo 导航等一些不经常变动的

b.middle 常变动的部分

b1.left 分类的常变动(针对导航模块的分类列表)或不变的

b2.right 显示每个动作的显示结果界面

c.bottom 不常变的如版权信息

<body>

<div id="out"> // 样式控制界面与浏览器边距和整个网面显示内容大小及样式

</div>

</div>

</body>

如放置在index.jsp中所有操作就在这一个界面内进行局部更新来完成所有工作当然如果界面不足以完成所有操作可另加格局

2.界面分解:

a.主界面可为index.jsp 包括上面的布局然后再加入所有用到的js，css 下面讲到其中可以加入一些隐藏域比用放置用户登录名 id等

b.top界面 top.html 这些界面也是格局 div + css 任何动态信息没有

c.left界面 left.html

d.right界面 right.html

d.bottom界面 bottom.html

...

3.样式分解

a.top.css

b.left.css

c.right.css

d.bottom.css

d.common.css

...

mail.css

@import url("common.css");

@import url("top.css");
@import url("left.css");
@import url("right.css");
@import url("bottom.css");

...

4.js分解

a.top.js

b.left.js

c.right.js

d.bottom.js

d.common.js

...

例如 top.js

var top={

loadDiv:function(){ //请求top界面格局

       $("#top").load("page/top.html",function(){
        top.init(); //界面加载完后增加界面动态信息
       });

init:function(){

}

5.利用ajax进行界面动态更新

工程转到index.jsp界面后

index.js

$(function(){

top.loadDiv();

left.loadDiv();

right.loadDiv();

bottom.loadDiv();

});

分别加载各个部分并对各个部分进行动态更新

如果还有other界面

分别增加other.html (div 格式布局)

other.css

other.js

如

var other={

loadDiv:function(){ //请求top界面格局

       $("#right").load("page/top.html",function(){
        other.init(); //界面加载完后增加界面动态信息
       });

init:function(){

}

如果other显示在right内

$("#right").empty();

other.loadDiv();

即可达到效果

6.权限设置

如果用户必顺登录才能操作的话

可加一个过滤器,对用户的请求进行过滤,如果用户session过时,可转到index.jsp界面

因为都是异步对html界面进行请求所以过滤可以将html排除在外,就是过客能请求到html等静态格局界面,但里面都是div格局,也看不到任何信息

7.js对用户请求进行过滤

当调用如other.loadDiv进行一次session判断如果过时转整个界面转向index.jsp

但是这样会加很多这样的判断，解决方法

可以写一个基类,让其它对象继承,在调用这个继承类的所有或部分方法前调用.

优点:界面格局明显,易控制,异步数据加载,只更新要更新的部分,禁止了整个界面更新或其它无用更新,省得用iframe造成的不良体验,

缺点:加载js过多,首界面必顺把所有界面用到的js加载进来,权限过滤可能要在js中调用

前进后退刷新控制

var ={
   operate:true,   // false:为前进后退刷新操作 true:为实际操作
   currentIndex:-1,
   maxLenght:50,
    activeStrArr:[],
    addActive:function(str){
      activeObject.currentIndex++;
      activeObject.activeStrArr.push(str);
    },
    goAhead:function(){
       if(activeObject.currentIndex < activeObject.activeStrArr.length - 1){
           activeObject.operate = false;
           var index = ++activeObject.currentIndex;
           eval(activeObject.activeStrArr[index]);
       }
    },
    goBack:function(){
       if(activeObject.currentIndex > 0){
           activeObject.operate = false;
           var index = --activeObject.currentIndex;
           eval(activeObject.activeStrArr[index]);
       }
    },
    clear:function(){
       activeObject.currentIndex=-1;
          activeObject.activeStrArr=[];
    },
    flush:function(){
       activeObject.operate = false;
       eval(activeObject.activeStrArr[activeObject.currentIndex]);
    }
};

          $("#goahead").click(function(){
               activeObject.goAhead();
           });
             $("#goback").click(function(){
               activeObject.goBack();
           });
             $("#flush").click(function(){
               activeObject.flush();
           });

var test={

loadDiv:function(name,url,data,async){

         $("#divid").load("test.html",function(){

                   if(activeObject.operate){
                       var activeStr ='test.loadDiv(\''+name+'\',\''+url+'\',\''+data+'\','+async+');';
                       activeObject.addActive(activeStr);
                   }
                   activeObject.operate = true;
               });

}
}

如果参数data为json对象可先转化为字符串用时再转为对象使用