html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架 - zl1990
程序员文章站
2022-03-10 17:24:38
...
简单好用的html框架，预览图见最后； 源码；
View Code
分享
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;}
部分代码如下：
1 ...... 2"100%" style="background-image:url(images/menu_bgT.gif); background-repeat:no-repeat" valign="top"> 3 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 }
预览图：
微信
上一篇： XML基本语法介绍