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

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 ......
 2         <td height="100%" style="background-image:url(images/menu_bgT.gif); background-repeat:no-repeat" valign="top">
 3         <ul id=navmenu class="menu">
 4         </ul>
 5         </td>
 6 ......
 7 <script type="text/javascript">
 8     try {
 9              for (i=0; i < menus.length; i++)
10             {
11                 $("#navmenu").append(‘<li id=level‘ + i + ‘>‘);
12                 $(‘#level‘ + i ).append(‘<input type="radio" name="tab" id=tab‘ + i + ‘a class="tabs">‘);
13                 $(‘#level‘ + i ).append(‘<label for=tab‘ + i + ‘a class="open" accesskey="2">‘ + menus[i][0] + ‘</label>‘); /*添加第一级菜单*/
14                 $(‘#level‘ + i ).append(‘<input type="radio" name="tab" id="tab‘ + i + ‘ac" class="tabs close">‘);
15                 $(‘#level‘ + i ).append(‘<label for=tab‘ + i + ‘ac class="close" accesskey="3"></label>‘);
16                 $(‘#level‘ + i ).append(‘<ul id=second‘ + i + ‘>‘);
17                 var submenu=menus[i][2];
18                 for (j=0; j < submenu.length; j++)
19                 {/*添加二级菜单*/
20                     $(‘#second‘ + i).append(‘<li><a href=‘ + submenu[j][1] + ‘?‘+ Math.random() +‘ target=page>‘ + submenu[j][0] + ‘</a></li>‘);    
21                 }
22                 $(‘#level‘ + i ).append(‘</ul>‘);
23                 $("#navmenu").append(‘</li>‘);
24             }
25     } 
26     catch (e) 
27     {/*新的js中部分属性不支持，提示异常*/
28         alert(e.name  + e.message + "\n"  + "浏览器版本太低请尝试使用Firfox、谷歌浏览器、IE9+ 浏览器预览\n");
29     }
30 
31     $(‘#tab0a‘).attr("checked", true);  /*第一个菜单选中*/
32 </script>
33 ......

  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 }

author：1003278902@qq.com
download： http://files.cnblogs.com/files/zl1990/html.tar.gz