还是先把代码贴在这 后期再写感想
1 <!DOCTYPE html> 2 <head> 3 <meta http-equiv="x-ua-compatible" content="IE=9" > 4 <html lang="en"> 5 <meta charset="UTF-8"> 6 <title>客户端</title> 7 <LINK href="zhcss.css" type=text/css rel=stylesheet> 8 </head> 9 <body> 10 <div class="leftsidebar_box" id="content"> 11 <!-- 头像框 --> 12 <div class="tx_box"> 13 <div class="top_box"> 14 <div class="to1"> 15 <img class="to" alt="aaa" src="image/tx.png"> 16 <div style="margin-left:40px;margin-top:-10px;" > 17 <p style="font-family:'雅黑';font-size:10px;"><b>OneSimple</b></p> 18 <p style="font-family:'宋体';font-size:10px;">在线</p> 19 </div> 20 </div> 21 </div> 22 </div> 23 <!-- 搜索框 --> 24 <div class="outside_box"> 25 <div class="search_div"> 26 <form onsubmit="highlight(this.s.value);return false;"> 27 <input id="kw" onKeyup="getContent(this);" style=" 93%;border:none; padding-left: 6px;" type="text" value="请输入搜索内容"onfocus="this.value=''" onblur="if(this.value==''){this.value='请输入搜索内容'}" /> 28 <!-- <input type="" value=" " style="background-image: url(image/search.png); float:right;background-repeat: no-repeat; 20px;height: 20px;border:none ;font-family: color:#FFFFFF" ;> --> 29 <div id="append"></div> 30 </form> 31 </div> 32 </div> 33 <!-- 最近使用 --> 34 <div class="div_b"> 35 <div style=" 95%;text-align:center;font-size:15px;z-index: 0;"><b>最近使用</b></div> 36 <div class="zjsy_box"> 37 <DIV class="bottom"> 38 </DIV> 39 </div> 40 </div> 41 <!-- 菜单栏 --> 42 <div class="div_c"> 43 <div class="inside_box" id="inside_box"></div> 44 </div> 45 </div> 46 <script src="jquery.min.js"></script> 47 <script> 48 49 $('#queding').click(function(){ 50 var arr = [$('#select').val(),$('#value').val()]; 51 window.location="skp:ruby_queding"; 52 }); 53 var divId = new Array; //定义数组进行工具id的排列 54 var testArr2 = new Array; //工具的名称数组 55 var zjsyArr = new Array; //定义最近使用的 56 var zjsyArr2= new Array; 57 var ss=0; 58 var box = document.getElementsByClassName("inside_box")[0]; 59 box.clsssName="inside_box"; 60 //动态数组加载内容 只需加载 61 //大功能的名称--name 62 //工具名称--value 63 //功具指向地址--dizhi 64 //图标无需在数组中加载 但需要统一规格20x20px；并且存储格式必须为.png 65 var data = [ 66 { id:"1", 67 name:"测绘工具", 68 value:["简单","加载","删除","时候就","真刚性","花园"], 69 dizhi:["https://1www.baidu.com1/","https://1www.baidu.com2/","https://1www.baidu.com3/","https://1www.baidu.com4/","https://1www.baidu.com5/","https://1www.baidu.com6/"]}, 70 { id:"2", 71 name:"画图工具", 72 value:["简单1","加载1","删除1","时候就1","真刚性1","花园1"], 73 dizhi:["https://2www.baidu.com1/","https://2www.baidu.com2/","https://2www.baidu.com3/","https://2www.baidu.com4/","2https://www.baidu.com5/","https://2www.baidu.com6/"]}, 74 { id:"3", 75 name:"边角工具", 76 value:["简单2","加载2","删除2","时候就2","真刚性2","花园2"], 77 dizhi:["https://3www.baidu.com1/","https://3www.baidu.com2/","https://3www.baidu.com3/","https://3www.baidu.com4/","https://3www.baidu.com5/","https://3www.baidu.com6/"]}, 78 { id:"4", 79 name:"涂料红酒", 80 value:["简单3","加载3","删除3","时候就3","真刚性3","花园3"], 81 dizhi:["4F:/cj/jm/UI/zh.html1","4F:/cj/jm/UI/zh.html2","4F:/cj/jm/UI/zh.html3","4F:/cj/jm/UI/zh.html4","4F:/cj/jm/UI/zh.html5","4F:/cj/jm/UI/zh.html6"]}, 82 ]; 83 function contains(arr, obj) { 84 var i = arr.length; 85 while (i--) { 86 if (arr[i] == obj) { 87 return true; 88 } 89 } 90 return false; 91 } 92 data.forEach(function(e,i){ 93 var button = document.createElement("button"); 94 button.className="left_button"; 95 button.innerHTML = e.name; 96 button.id = e.id; //对功能块button进行id命名 97 var zjsy = document.getElementsByClassName("bottom")[0]; // 最近使用的生成部件 98 zjsy.clsssName="bottom"; 99 button.onclick = function(){ 100 for(var divIdIndex = 0;divIdIndex<divId.length;divIdIndex++) 101 { 102 var listId = document.getElementById(divId[divIdIndex]); 103 listId.style.display="none"; 104 } // $("list"+this.id).slideToggle(); 105 var listobj = document.getElementById("list"+this.id); //控制菜单栏的子目录显示与关闭 106 if(listobj.style.display == "block"){ 107 listobj.style.display = "none"; 108 }else if(listobj.style.display=="none"){ 109 listobj.style.display = "block"; 110 } 111 } 112 var div1 = document.createElement("div"); 113 div1.className="div_d"; 114 div1.id = "list"+ e.id; 115 divId.push(div1.id); 116 div1.style.display = "none"; 117 for(var j in e.value){ 118 var div2 = document.createElement("div"); 119 div2.setAttribute("id",div1.id+"gn"+j); 120 div2.className="picture"; 121 var pic = e.value[j]; //对图片名称进行赋值，让它进行名称匹配，更为精准。//alert(j); 122 for (var i in e.dizhi) { // alert(e.dizhi[i]); 123 // div2.innerHTML = "<a href= '"+e.dizhi[i]+"' target=_blank>"+"<img src="+"image/"+pic+".png>"+e.value[j]+"</a>"; //alert(pic);//alert(div2.innerHTML); 124 div2.innerHTML ="<img src="+"image/"+pic+".png>"+e.value[j]; 125 } 126 div2.onclick=function(){ 127 //alert(div2.id); 128 var div3 = document.createElement("div"); 129 div3.className="content"; 130 div3.setAttribute("name","zjsydiv"); 131 var jj; 132 var idIndex = this.id.split("gn"); 133 //alert(idIndex); 134 var idIndex1 = idIndex[idIndex.length-1]; //idIndex1为数组坐标 135 var pic = e.value[idIndex1]; 136 //alert(e.dizhi[idIndex1]); //对图片名称进行赋值，让它进行名称匹配，更为精准。 137 // testArr2.push("<a href= '"+e.dizhi[idIndex1]+"' target=_blank>"+"<img src="+"image/"+pic+".png>"+e.value[idIndex1]+"</a>");//alert(testArr2); 138 testArr2.push("<img src="+"image/"+pic+".png>"+e.value[idIndex1]); 139 var res =0; 140 var res1 =1; 141 var res2=2; 142 for (var i=0; i<testArr2.length; i++) { 143 var zjsy1=testArr2[i]; 144 jj = e.value[i]; 145 } 146 var zjsyshuzu=contains(zjsyArr, zjsy1); // alert(zjsyshuzu); 判断是否重复 true则不添加 false则添加数组 147 if (zjsyshuzu==false) { 148 zjsyArr.push(zjsy1); 149 div3.innerHTML =zjsy1; 150 zjsy.appendChild(div3); 151 } 152 for (var h in zjsyArr){ 153 div3.setAttribute("id",h); 154 div3.onclick=function(){ 155 var m = this.id; 156 jj = zjsyArr[m] 157 var jj1 = jj.replace(/[^1-9u4e00-u9fa5]/ig,""); //匹配中文字符与阿拉伯数字 158 window.location="skp:ruby_div3@"+jj1; 159 } 160 } 161 ss = e.value[idIndex1]; //弹出输出功能名 div2 中 162 window.location="skp:ruby_div2@"+ss; 163 } 164 div1.appendChild(div2); //div2工具生成栏 165 } 166 box.appendChild(button); //button为大功能生成栏 167 box.appendChild(div1); //div1为一个大的工具栏 其中包含工具和大功能名称 168 }); 169 $(document).ready(function() { 170 $(document).keydown(function(e) { 171 e = e || window.event; 172 var keycode = e.which ? e.which : e.keyCode; 173 if (keycode == 38) { //上移键 174 if (jQuery.trim($("#append").html()) == "") { //trim()此方法为去除所选定的字符串左右的空格 175 return ; 176 } 177 movePrev(); 178 } 179 else if (keycode == 40) { //下移键 180 if (jQuery.trim($("#append").html()) == "") { 181 return; 182 } 183 $("#kw").blur(); 184 if ($(".item").hasClass("addbg")) { 185 moveNext(); 186 } else { 187 $(".item").removeClass('addbg').eq(0).addClass('addbg'); 188 } 189 190 } else if (keycode == 13) { 191 dojob(); 192 } 193 }); 194 var movePrev = function() { 195 $("#kw").blur(); 196 var index = $(".addbg").prevAll().length; 197 if (index == 0) { 198 $(".item").removeClass('addbg').eq($(".item").length - 1).addClass('addbg'); 199 } else { 200 $(".item").removeClass('addbg').eq(index - 1).addClass('addbg'); 201 } 202 } 203 var moveNext = function() { //注释1 204 var index = $(".addbg").prevAll().length; 205 if (index == $(".item").length - 1) { 206 $(".item").removeClass('addbg').eq(0).addClass('addbg'); 207 } else { 208 $(".item").removeClass('addbg').eq(index + 1).addClass('addbg'); 209 } 210 } 211 var dojob = function() { 212 $("#kw").blur(); 213 var value = $(".addbg").text(); 214 $("#kw").val(value);(""); 215 $("#append").hide().html 216 } 217 }); 218 function getContent(obj) { //获取搜索框输入的值 219 var kw = jQuery.trim($(obj).val()); 220 if (kw == "") { 221 $("#append").hide().html(""); 222 return false; 223 } 224 var html1 = ""; 225 for(var j = 0;j<data.length;j++){ //进行页面的匹配 226 for (var i = 0; i < data[j].value.length; i++) { 227 if (data[j].value[i].indexOf(kw) >= 0) { 228 html1 = html1 + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" +data[j].value[i] + "</div>" //匹配成功下拉框显示内容 229 } 230 } 231 } 232 if (html1 != "") { 233 $("#append").show().html(html1); 234 } else { 235 $("#append").hide().html(""); 236 } 237 } 238 239 function getFocus(obj) { 240 $(".item").removeClass("addbg"); 241 $(obj).addClass("addbg"); 242 } 243 function getCon(obj) { //点击某个匹配值时 下拉框掩藏 244 var value = $(obj).text(); 245 $("#kw").val(value); 246 $("#append").hide().html(""); 247 window.location="skp:ruby_divsousuo@"+value; 248 } 249 </script> 250 </body> 251 </html>
css
1 html, body, div, span, applet, object, iframe, 2 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 a, abbr, acronym, address, big, cite, code, 4 del, dfn, em, img, ins, kbd, q, s, samp, 5 small, strike, strong, sub, sup, tt, var, 6 b, u, i, center, 7 dl, dt, dd, ol, ul, li, 8 fieldset, form, label, legend, 9 table, caption, tbody, tfoot, thead, tr, th, td, 10 article, aside, canvas, details, embed, 11 figure, figcaption, footer, header, hgroup, 12 menu, nav, output, ruby, section, summary, 13 time, mark, audio, video { 14 margin: 0; 15 padding: 0; 16 border: 0; 17 font-size: 100%; 18 font: inherit; 19 vertical-align: baseline; 20 } 21 /* HTML5 display-role reset for older browsers */ 22 article, aside, details, figcaption, figure, 23 footer, header, hgroup, menu, nav, section { 24 display: block; 25 } 26 body { 27 line-height: 1; 28 } 29 ol, ul { 30 list-style: none; 31 } 32 html{ 33 background-color: #FFEFD5; 34 } 35 blockquote, q { 36 quotes: none; 37 } 38 blockquote:before, blockquote:after, 39 q:before, q:after { 40 content: ''; 41 content: none; 42 } 43 table { 44 border-collapse: collapse; 45 border-spacing: 0; 46 } 47 48 49 /* 50 ::-webkit-scrollar{ 51 20px; 52 53 } 54 55 ::-webkit-scrollar-track-piece{ 56 background:#FFFFFF; 57 -webkit-border-radius:6px; 58 } 59 60 ::-webkit-scrollar-thumb:vertical{ 61 background-color: black; 62 -webkit-border-radius:6px; 63 }*/ 64 65 66 ul,ol,li{list-style:none;} 67 input,button{ 68 margin:0; 69 vertical-align:middle; 70 } 71 72 73 74 {font-family:'宋体';} 75 dl,dt,dd{display:block;margin:0;} 76 a{text-decoration:none;} 77 78 body{ 79 margin:0; 80 padding:0; 81 overflow-x:hidden; 82 font-family:Arial, Helvetica, sans-serif; 83 color:#000000; 84 margin:0 auto; 85 } 86 87 table{ 88 border-collapse:collapse; 89 border-spacing:0; 90 } 91 92 a{ 93 color:#333333 ; 94 outline:none 95 text-decoration:none; 96 } 97 98 a:hover{ 99 color:#00FFFF; 100 text-decoration:underline; 101 } 102 103 /*头像框*/ 104 .tx_box{ 105 /*padding: 8px;*/ 106 padding-top: 15px; 107 border-style: solid; 108 background-color: #FFEFD5; 109 border-color: #A9A9A9; 110 border- 1px; 111 } 112 113 .top_box{ 114 85px; 115 height: 50px; 116 padding: 2px; 117 } 118 119 .to{ 120 53px; 121 height: 50px; 122 border-radius: 50%; 123 position: absolute; 124 top: 50%; 125 left: 50%; 126 margin-left: -40px; 127 margin-top: -25px; 128 } 129 130 /*控制头像框的文字*/ 131 .to1 { 132 /* 20px; 133 height: 20px; */ 134 /*padding-left: 60px; */ 135 padding-top: 25px; 136 /* border-radius: 50%; */ 137 padding-left: 17px; 138 position: relative; 139 } 140 141 /* 左边框box*/ 142 .leftsidebar_box{ 143 position:fixed; 144 97.5%; 145 height:99%; 146 overflow: auto; 147 /*overflow:visible !important;*/ 148 /*position:fixed;*/ 149 /*border- 5px;*/ 150 padding: 2px; 151 border-style: solid; 152 border-color: #A9A9A9; 153 border- 3px; 154 /* float: right;*/ 155 156 } 157 158 /*搜索外边框*/ 159 .outside_box{ 160 /* padding: 1px; 161 top: 125px; 162 right:2px; 163 left:1px; 164 padding-right: 3px;*/ 165 margin-top:2px; 166 position:absolute; 167 padding: 1px; 168 right: 2px; 169 left: 2px; 170 border-style: solid; 171 background-color: #FFFFFF; 172 border-color: #A9A9A9; 173 border- 1px; 174 /* 96%;*/ 175 z-index: 3; 176 } 177 178 /*搜索成功的字体*/ 179 .highlight{ 180 background:green; 181 font-weight:bold; 182 color:white; 183 } 184 185 .search_box{ 186 background-image: url(image/search.png); 187 background-repeat: no-repeat ; 188 } 189 190 .search_div{ 191 192 } 193 194 .lanmu { 195 MARGIN: 0px auto; 196 auto; 197 height: 50px; 198 } 199 200 .lanmu span.fr{ 201 float:right; 202 margin-right:12px; 203 margin-top:25px; 204 /*display:inline; */ 205 } 206 207 /*上边框*/ 208 .mydpx .bottom { 209 PADDING-TOP: 3px; 210 HEIGHT: 30px; 211 } 212 213 .zjsy_box{ 214 height: 100%; 215 padding-bottom: 5px; 216 border-style: solid; 217 border-color: #A9A9A9; 218 border- 1px; 219 padding-top: 5px; 220 padding-left:10px; 221 padding-right: 8px; 222 overflow: auto; 223 background-color: #FFFFF4; 224 } 225 226 .content{ 227 90%; 228 height:25px; 229 float: left; 230 } 231 .content img{ 232 padding-top: 3px; 233 20px; 234 height:20px; 235 } 236 237 .leftsidebar_box dt{ 238 /*左边文字*/ 239 padding-left:0px; 240 padding-right:0px; 241 background-repeat:no-repeat; 242 background-position:10px center; 243 position:relative; 244 /*line-height:48px;*/ 245 cursor:pointer; 246 } 247 248 /*下拉框*/ 249 .leftsidebar_box dd{ 250 /*background-color:#FFFAFA;*/ 251 padding-left:1px; 252 } 253 254 /*下拉框文字*/ 255 .leftsidebar_box dd a{ 256 font-size: 15px; 257 font-weight:bold; 258 color:#696969; /*银白色*/ 259 line-height:20px; 260 } 261 262 .leftsidebar_box dl dd:last-child{ 263 padding-bottom:10px; 264 } 265 266 /*最近使用外框*/ 267 .div_b { 268 position:absolute; 269 padding: 1px; 270 top: 125px; 271 right:2px; 272 left:1px; 273 height:60px; 274 z-index: 1; 275 } 276 277 /*菜单栏的边框*/ 278 .div_c{ 279 /*margin: 1px;*/ 280 position:absolute; 281 padding-top: 5px; 282 padding: 2px; 283 top: 215px; 284 right:1px; 285 left:0px; 286 /*150px;*/ 287 288 } 289 290 .left_button{ 291 100%; 292 height: 31px; 293 margin: 1px; 294 /* border-radius: 15%;*/ 295 border-color:black; 296 background-color:#FFFFFF; 297 } 298 299 .inside_box{ 300 /*border:none;*/ 301 height: 100%; 302 padding-bottom: 5px; 303 border-style: solid; 304 border-color: #A9A9A9; 305 border- 1px; 306 padding-top: 5px; 307 padding-left:8px; 308 padding-right: 8px; 309 310 } 311 312 .div_d{ 313 /*border-radius: 10%;*/ 314 width :99%; 315 /* 100px;*/ 316 height: 100px; 317 border-style: solid; 318 border- 1px; 319 background-color:#FFFFF4; 320 padding: 1px; 321 margin-right: 10px; 322 overflow: auto; 323 } 324 325 .picture{ 326 /* 23px; 327 height:45px; 328 padding:1px; 329 float: left;*/ 330 /*cursor:pointer;*/ 331 padding: 2px; 332 margin: 1px; 333 color:#000000; 334 /*overflow:hidden;*/ 335 /*vertical-align:middle;*/ 336 /*font-weight:bold;*/ 337 font-size: 18px; 338 90%; 339 height:25px; 340 float: left; 341 } 342 343 .picture img{ 344 /*20px; 345 height:25px;*/ 346 347 padding-top: 3px; 348 20px; 349 height:20px; 350 } 351 352 .button1{ 353 margin-right:1px; 354 height: 31px; 355 background-color:#C6E2FF; 356 } 357 358 .item { 359 position:inherit; 360 padding: 3px 5px; 361 cursor: pointer; 362 background-color: white; 363 } 364 365 .addbg { 366 background: #99FFFF; 367 } 368 369 .first { 370 border: solid #87A900 2px; 371 300px; 372 } 373 374 #append { 375 border: solid #87A900 2px; 376 border-top: 0; 377 display: none; 378 }