Html layout; css3 + jq drop-down menu; Dynamic addition of rows to table pages; html5 local storage; simple html framework, css3html5

Html layout; css3 + jq drop-down menu; Dynamic addition of rows to table pages; html5 local storage; simple html framework, css3html5

For a simple and easy-to-use html framework, see the final preview. source code;

1. Use table in the page layout;

Table nesting + iframe layout;

2. The drop-down menu is jq + css3 animation;

Css input with no borders, select drop-down menu beautification

1 input {appearance: none; background-color: transparent; border: solid 0px #000;}/* input no border */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;}/* Background color when disabled */

 

Add menu, which can be added in js/cm_menu.js under the js directory;

1 var menus = new Array (); 2 menus [0] = ['menu 1', '', [['demonstration 1', 'page/11_page.html '], ['demo 2', 'page/12_page.html ']; 3 menus [1] = ['menu 2', '', [['demo 1 ', 'page/21_page.html '], ['demonstration 2', 'page/22_page.html'];

Menu 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.5 s; 8-moz-transition: 0.5 s; 9-ms-transition: 0.5 s; 10-o-transition: 0.5 s; 11 tran Sition: 0.5 s; 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-tr Ansition: 0.5 s; 23-moz-transition: 0.5 s; 24-ms-transition: 0.5 s; 25-o-transition: 0.5 s; 26 transition: 0.5 s; 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

 

Some code is as follows:

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"> '); 1 3 $ ('# level' + I ). append ('<label for = tab' + I + 'a class = "open" accesskey = "2"> '+ menus [I] [0] +' </label> '); /* Add level 1 menu */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 f Or (j = 0; j <submenu. length; j ++) 19 {/* Add Level 2 menu */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 {/* some of the new js attributes are not supported, error prompted */28 alert (e. name + e. message + "\ n" + "the browser version is too low. Please try Firfox, Google browser, IE9 + browser preview \ n "); 29} 30 31 $ ('# tab0a '). attr ("checked", true);/* select */32 from the first menu </script> 33 ......

3. The table is displayed by page. New rows are added and jq is used;

1 var currentPage = 1;/* Current page number */2 var showTableTr = 10; /* How many rows are displayed per page */3 4/* Add row */5 function addTr () 6 {7 sum ++; 8/* display hidden rows */9 $ ('tr [name = "hidetr"]: la '). find ("th "). eq (0 ). text ($ ("# tableList tr "). length-2); 10 $ ('tr [name = "hidetr"]: la '). show (); 11 12/* copy the last row, add it to the end of the last row, and hide */13 $ ('tr [name = "hidetr"]: last '). after ($ ('tr [name = "hidetr"]: la '). clone (true); 14 $ ('tr [name = "hidetr"]: la '). hide (); 15 16 if ("BGCgray" ==$ ('tr [name = "hidetr"]: la '). attr ('class') 17 {18 $ ('tr [name = "hidetr"]: la '). removeClass ('bgcgray'); 19} 20 else 21 {22 $ ('tr [name = "hidetr"]: la '). addClass ('bgcgray'); 23} 24 25 if (currentPage! = ParseInt (getSumPage () 26 {27 tabPaging (parseInt (getSumPage (); 28} 29} 30/* Delete row */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/* sequence number shuffling */39 for (I = index; I <tab. rows. length-2; I ++) 40 {41 tab. rows [I]. cells [0]. innerHTML = I. toString (); 42} 43 44 tabPagi Ng (currentPage); 45} 46/* Paging */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/* Previous Page */66 function prePage () 67 {68 if (1 = currentPage) 69 {70 currentPage = parseInt (getSumPage ()); 71} 72 else 73 {74 -- currentPage; 75} 76 ta BPaging (currentPage); 77} 78/* Next page */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/* Total pages available */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/* submit */107 function submitChange () 108 {109/* Save the current page */110 setKey ("currentPage", currentPage ); 111} 112 113/* initialization data */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 ('this browser does not support html5, please use Google, firfox and other browsers '); 131} 132 $ ('tr [name = "hidetr"]: la '). hide (); 133 134 tabPaging (currentPage); 135}

 

Preview:

 

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