自定义宫格

很多时候,我需要把浏览器屏幕切割相类似九宫格,十六宫格……如果可以自动生成就好了.下面是我做的一个例子.根据传进的参数,可以把浏览器实现平均分割.

在web开发过程中,少不了使用幻灯片展示.我做的这个幻灯片要放到webbrowser控件里面展示.而我需要做四宫格,九宫格,十六宫格,可能还需要做一个十二宫格.每个宫格放一张图片,一个标题和价格.图片通过JS来读取.一屏一屏的切换.当然,切换可以自己设置切换样式,这些就是我的这个小动画需求.

正因为如此,我必须要考虑下面这两个问题:

第一个问题,就是我做页面可以在VS2005中的控件webbrowser中正常显示.

回答:通过查资料我知道了.

VS 2008 SP1 在Visual Studio中加了更丰富的JavaScript intellisense支持，对很大部分的JavaScript库加了代码完成支持。我使用的是vs2005里面没有JQuery库,也没JQuery 智能感知.我仅仅知道VS2010支持JQuery的版本是1.4.1.我不确定vs2005里面是不是支持1.4.1,这个我需要自己测试.结果,在 vs2005里面是支持JQuery1.4.1这个版本的,能使用JQuery瞬间就觉得项目简单多了.

在IE8中测试中也顺利通过了测试.在使用JQuery中,有的时候JQuery版本不同,相对应IE会报错.这个我还在研究.

第二个问题,这是vs2005所对应的浏览器版本,html版本和xhtml版本.微软的版本都是向上兼容的.可能会发生什么不兼容的现象.

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
 6     <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
 7     <script type="text/javascript"> 
 8      $(function(){
 9      pageAdditional("container", 2, "");
10      });
11      //追加生成
12      function pageAdditional(pageId, count, data)
13      {
14      var oBodyHeight = $(window).height();//获取浏览器的高度
15      var oBodyWwidth = $(window).width();//获取浏览器的宽度
16      var length = count;//长度决定宫格
17      var objDataSet = data;//用来接收自定义模板数据 
18      for (var i = 0; i < length; i++) {//生成的是行
19                 var lineHeight=oBodyHeight/length;//行高
20                 var topHeight = ($(window).height() / length) * i;//行距离顶部的高度(Top)
21                 $('#'+pageId+'').append(templateLine(i, '#00123' + i, lineHeight, topHeight));
22                 for (var j = 0; j < length; j++) {//生成的是列
23                     var columnWidth=oBodyWwidth/length;//列宽 
24                     var leftWidth = ($(window).width() / length) * j;//列距离左侧的长度(Left)
25                     $('#' + i + '').append(templateColumn('lie' + j, "blue", columnWidth, leftWidth));
26                 }
27             } 
28      }
29      
30      //定义行模版  
31      function templateLine(id,backgroundcolor,heightPx,topPx) {//top的变化-------代表行
32             var template = '<div id="' + id + '" style="background:' + backgroundcolor + ';100%;height:' + heightPx + 'px;top:' + topPx + 'px;" class="container"></div>'
33             return template;
34      }; 
35      //定义列模版
36      function templateColumn(id,backgroundcolor,widthPx,leftPx) {//left的变化-------代表列(列中的数据模板未定义)
37             var template = '<div id="' + id + '" style="background:' + backgroundcolor + ';' + widthPx + 'px;height:100%;left:' + leftPx + 'px;" class="container"></div>'
38             return template;
39         }  
40     </script>
41 </head>
42 <body>
43 <div id="container" class="container"></div>
44 </body>
45 </html>

效果是两行两列.