html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架 - zl1990

简单好用的html框架，预览图见最后； 源码；

1.页面布局使用table；

table 嵌套 +iframe 布局；

2.下拉菜单为jq+css3 动画;

css input 无边框，select下拉菜单美化

1 input{appearance:none;background-color:transparent;border: solid 0px #000;} /*input 无边框*/
2 input:disabled{background-color:#d2d2d2;border:0px;}
3 select {border: solid 1px #000; appearance:none;-moz-appearance:none; -webkit-appearance:none; padding-right: 14px;margin :0px;background: url("../images/arrow.png") no-repeat scroll right center transparent;}
4 select::-ms-expand { display: none; } 
5 select:disabled{background-color:#d2d2d2;} /*禁用时背景色*/

添加菜单，可以在js目录下的、js/cm_menu.js中添加；

1 var menus=new Array();
2 menus[0]=['菜单1', '',[['演示1','page/11_page.html'],['演示2','page/12_page.html']]];
3 menus[1]=['菜单2', '',[['演示1','page/21_page.html'],['演示2','page/22_page.html']]];

菜单css3

 1 ul.menu,
 2 ul.*{margin:0px;padding:0px;}
 3 ul.menu ul {padding:0;margin:0;list-style:none;position:relative;background:#ddd;font-family:arial, sans-serif;}
 4 ul.menu {z-index:100;padding:10px;border-radius:10px 10px 0 0;margin:0 auto;}
 5 ul.menu ul {
 6     z-index:50;border-radius:0 0 10px 10px;
 7     -webkit-transition: 0.5s;
 8     -moz-transition: 0.5s;
 9     -ms-transition: 0.5s;
10     -o-transition: 0.5s;
11     transition: 0.5s;
12 }
13 ul.menu li {line-height:30px;position:relative;text-indent:10px;list-style-type:none;}
14 ul.menu > li {margin-top:2px;font-size:12px;}
15 ul.menu > li a {font:normal 12px/30px arial, sans-serif;color:#fff;text-decoration:none;}
16 ul.menu label.open {display:block;background: #DEEEF1 url("/jscss/demoimg/201208/d-arrow.gif") no-repeat 170px 12px;line-height:30px;position:relative;z-index:100;font:normal 12px/30px arial, sans-serif;color:#000;font-weight:900;;border-radius:10px 10px 0 0;}
17 ul.menu label.open b {color:#DEEEF1;}
18 ul.menu span {display:block;background:#00c;line-height:30px;position:relative;z-index:100;border-radius:10px 10px 0 0;}
19 ul.menu label img {position:absolute;left:0;top:0;width:100%;height:30px;}
20 
21 ul.menu ul li {margin-top:-30px;
22     -webkit-transition: 0.5s;
23     -moz-transition: 0.5s;
24     -ms-transition: 0.5s;
25     -o-transition: 0.5s;
26     transition: 0.5s;
27 }
28 ul.menu ul li a {display:block;font:normal 11px/30px arial, sans-serif;color:#000;background:#ccc;}
29 ul.menu ul li a:hover {background:#ddd;}
30 ul.menu input {position:absolute;left:-9999px;}
31 
32 ul.menu li input:checked + label {background:#069;} 
33 ul.menu li input:checked ~ ul {background:#ccc;padding-bottom:10px;}
34 ul.menu li input:checked ~ ul li {margin-top:0;}  
35 
36 ul.menu label.close {display:block;height:30px;background:transparent url("/jscss/demoimg/201208/u-arrow.gif") no-repeat 170px 12px;line-height:30px;position:relative;left:0;z-index:90;margin-top:-30px} 
37 ul.menu input.tabs:checked ~ label.close {display:block;z-index:200;}
38 ul.menu input.close:checked + label.close {display:none;}
39 ul.menu input.close:checked ~ ul {background:#ddd;padding-bottom:0;}
40 ul.menu input.close:checked ~ ul li {margin-top:-30px;}

View Code

部分代码如下：

 1 ......
 2         "100%" style="background-image:url(images/menu_bgT.gif); background-repeat:no-repeat" valign="top">
 3         
class="menu">
 4         
 5         
 6 ......
 7 33 ......

3.table 分页显示 ，新增行，使用jq；

  1 var currentPage = 1; /*当前是第几页*/
  2 var showTableTr  = 10; /*每页显示多少行*/
  3 
  4 /*新增行*/
  5 function addTr()
  6 {
  7     sum++;
  8     /*显示隐藏的行*/
  9     $('tr[name="hidetr"]:last').find("th").eq(0).text($("#tableList tr").length -2);
 10     $('tr[name="hidetr"]:last').show();
 11     
 12     /*复制最后一行，添加到最后一行后面，然后隐藏*/
 13     $('tr[name="hidetr"]:last').after($('tr[name="hidetr"]:last').clone(true));
 14     $('tr[name="hidetr"]:last').hide();
 15     
 16     if("BGCgray" == $('tr[name="hidetr"]:last').attr('class'))
 17     {
 18             $('tr[name="hidetr"]:last').removeClass('BGCgray');
 19     }
 20     else 
 21     {
 22         $('tr[name="hidetr"]:last').addClass('BGCgray');    
 23     }
 24     
 25     if(currentPage != parseInt(getSumPage()))
 26     {    
 27         tabPaging(parseInt(getSumPage()));
 28     }
 29 }
 30 /*删除行*/
 31 function delTr(node) {   
 32     var tr1 = node.parentNode.parentNode;  
 33     var index = tr1.rowIndex;
 34         var tab = document.getElementById("tableList");
 35 
 36         tab.deleteRow(index);
 37 
 38         /*序号重排*/
 39         for(i = index; i )
 40         {
 41             tab.rows[i].cells[0].innerHTML = i.toString();    
 42         }
 43         
 44         tabPaging(currentPage);
 45 }  
 46 /*分页*/
 47 function tabPaging(page)
 48 {    
 49     currentPage = page;
 50     for(i = 1; i )
 51     {
 52         $("#tableList tr").eq(i).hide();    
 53     }
 54     
 55     var end = (page*showTableTr) > getTabTrLength("tableList")? getTabTrLength("tableList") : page*showTableTr;
 56     for(i = (page - 1)*showTableTr + 1; i )
 57     {
 58         $("#tableList tr").eq(i).show();    
 59     }
 60 }
 61 function getTabTrLength(tname)
 62 {
 63         return $("#" + tname + " tr").length - 3;
 64 }
 65 /*上一页*/
 66 function prePage()
 67 {
 68     if(1 == currentPage)
 69     {
 70         currentPage =parseInt(getSumPage());
 71     }
 72     else 
 73     {
 74         --currentPage;    
 75     }
 76     tabPaging(currentPage);
 77 }
 78 /*下一页*/
 79 function nextPage()
 80 {
 81     if(parseInt(getSumPage()) == currentPage)
 82     {
 83         currentPage = 1;
 84     }
 85     else 
 86     {
 87         ++currentPage;    
 88     }
 89     tabPaging(currentPage);
 90 }
 91 
 92 /*总共可以分几页*/
 93 function getSumPage() {
 94     sumtr = getTabTrLength("tableList");
 95     return (sumtr/showTableTr + (sumtr%showTableTr == 0 ? 0 : 1)); 
 96 }
 97 
 98 function setKey(_key,val)
 99 {
100     localStorage.setItem(_key,val);
101 }
102 function getKey (_key) {
103     return localStorage.getItem(_key);
104 }
105 
106 /*  提交*/
107 function submitChange()
108 {
109     /*保存当前页*/
110     setKey("currentPage",currentPage);
111 }
112 
113 /*初始化数据*/
114 function htmlload()
115 {
116     if(window.localStorage)
117     {
118         var a = null;
119         if(getKey("currentPage") == a)
120         {
121             currentPage = 1;    
122         }
123         else 
124         {
125             currentPage = getKey("currentPage");
126         }
127     }
128     else 
129     {
130         alert('该浏览器不支持html5,请使用Google,Firfox等浏览器');
131     }
132     $('tr[name="hidetr"]:last').hide();    
133     
134     tabPaging(currentPage);
135 }

预览图：

微信

分享