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

简单好用的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;} /*禁用时背景色*/

Copy after login

添加菜单，可以在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']]];

Copy after login

菜单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;}

Copy after login

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 ......

Copy after login

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 }