html布局；css3+jq下拉菜單；table分頁動態添加行；html5本地存儲；簡單易用的html框架-zl1990

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;} /*禁用時背景色*/

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']]];

 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 
 3 
 4 
 5 
 6 ......
 7 

 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 < tab.rows.length - 2; 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 < getTabTrLength("tableList") + 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 < (end + 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 }