最近在新公司的一些HTML学习
还是先把代码贴在这 后期再写感想
<!DOCTYPE html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=9" >
<html lang="en">
<meta charset="UTF-8">
<title>客户端</title>
<LINK href="zhcss.css" type=text/css rel=stylesheet>
</head>
<body>
<div class="leftsidebar_box" id="content">
<!-- 头像框 -->
<div class="tx_box">
<div class="top_box">
<div class="to1">
<img class="to" alt="aaa" src="data:image/tx.png">
<div style="margin-left:40px;margin-top:-10px;" >
<p style="font-family:'雅黑';font-size:10px;"><b>OneSimple</b></p>
<p style="font-family:'宋体';font-size:10px;">在线</p>
</div>
</div>
</div>
</div>
<!-- 搜索框 -->
<div class="outside_box">
<div class="search_div">
<form onsubmit="highlight(this.s.value);return false;">
<input id="kw" onKeyup="getContent(this);" style=" width: 93%;border:none; padding-left: 6px;" type="text" value="请输入搜索内容"onfocus="this.value=''" onblur="if(this.value==''){this.value='请输入搜索内容'}" />
<!-- <input type="" value=" " style="background-image: url(image/search.png); float:right;background-repeat: no-repeat; width:20px;height: 20px;border:none ;font-family: color:#FFFFFF" ;> -->
<div id="append"></div>
</form>
</div>
</div>
<!-- 最近使用 -->
<div class="div_b">
<div style=" width:95%;text-align:center;font-size:15px;z-index: 0;"><b>最近使用</b></div>
<div class="zjsy_box">
<DIV class="bottom">
</DIV>
</div>
</div>
<!-- 菜单栏 -->
<div class="div_c">
<div class="inside_box" id="inside_box"></div>
</div>
</div>
<script src="jquery.min.js"></script>
<script> $('#queding').click(function(){
var arr = [$('#select').val(),$('#value').val()];
window.location="skp:ruby_queding";
});
var divId = new Array; //定义数组进行工具id的排列
var testArr2 = new Array; //工具的名称数组
var zjsyArr = new Array; //定义最近使用的
var zjsyArr2= new Array;
var ss=0;
var box = document.getElementsByClassName("inside_box")[0];
box.clsssName="inside_box";
//动态数组加载内容 只需加载
//大功能的名称--name
//工具名称--value
//功具指向地址--dizhi
//图标无需在数组中加载 但需要统一规格20x20px；并且存储格式必须为.png
var data = [
{ id:"1",
name:"测绘工具",
value:["简单","加载","删除","时候就","真刚性","花园"],
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/"]},
{ id:"2",
name:"画图工具",
value:["简单1","加载1","删除1","时候就1","真刚性1","花园1"],
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/"]},
{ id:"3",
name:"边角工具",
value:["简单2","加载2","删除2","时候就2","真刚性2","花园2"],
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/"]},
{ id:"4",
name:"涂料红酒",
value:["简单3","加载3","删除3","时候就3","真刚性3","花园3"],
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"]},
];
function contains(arr, obj) {
var i = arr.length;
while (i--) {
if (arr[i] == obj) {
return true;
}
}
return false;
}
data.forEach(function(e,i){
var button = document.createElement("button");
button.className="left_button";
button.innerHTML = e.name;
button.id = e.id; //对功能块button进行id命名
var zjsy = document.getElementsByClassName("bottom")[0]; // 最近使用的生成部件
zjsy.clsssName="bottom";
button.onclick = function(){
for(var divIdIndex = 0;divIdIndex<divId.length;divIdIndex++)
{
var listId = document.getElementById(divId[divIdIndex]);
listId.style.display="none";
} // $("list"+this.id).slideToggle();
var listobj = document.getElementById("list"+this.id); //控制菜单栏的子目录显示与关闭
if(listobj.style.display == "block"){
listobj.style.display = "none";
}else if(listobj.style.display=="none"){
listobj.style.display = "block";
}
}
var div1 = document.createElement("div");
div1.className="div_d";
div1.id = "list"+ e.id;
divId.push(div1.id);
div1.style.display = "none";
for(var j in e.value){
var div2 = document.createElement("div");
div2.setAttribute("id",div1.id+"gn"+j);
div2.className="picture";
var pic = e.value[j]; //对图片名称进行赋值，让它进行名称匹配，更为精准。//alert(j);
for (var i in e.dizhi) { // alert(e.dizhi[i]);
// div2.innerHTML = "<a href= '"+e.dizhi[i]+"' target=_blank>"+"<img src="+"image/"+pic+".png>"+e.value[j]+"</a>"; //alert(pic);//alert(div2.innerHTML);
div2.innerHTML ="<img src="+"image/"+pic+".png>"+e.value[j];
}
div2.onclick=function(){
//alert(div2.id);
var div3 = document.createElement("div");
div3.className="content";
div3.setAttribute("name","zjsydiv");
var jj;
var idIndex = this.id.split("gn");
//alert(idIndex);
var idIndex1 = idIndex[idIndex.length-1]; //idIndex1为数组坐标
var pic = e.value[idIndex1];
//alert(e.dizhi[idIndex1]); //对图片名称进行赋值，让它进行名称匹配，更为精准。
// testArr2.push("<a href= '"+e.dizhi[idIndex1]+"' target=_blank>"+"<img src="+"image/"+pic+".png>"+e.value[idIndex1]+"</a>");//alert(testArr2);
testArr2.push("<img src="+"image/"+pic+".png>"+e.value[idIndex1]);
var res =0;
var res1 =1;
var res2=2;
for (var i=0; i<testArr2.length; i++) {
var zjsy1=testArr2[i];
jj = e.value[i];
}
var zjsyshuzu=contains(zjsyArr, zjsy1); // alert(zjsyshuzu); 判断是否重复 true则不添加 false则添加数组
if (zjsyshuzu==false) {
zjsyArr.push(zjsy1);
div3.innerHTML =zjsy1;
zjsy.appendChild(div3);
}
for (var h in zjsyArr){
div3.setAttribute("id",h);
div3.onclick=function(){
var m = this.id;
jj = zjsyArr[m]
var jj1 = jj.replace(/[^1-9\u4e00-\u9fa5]/ig,""); //匹配中文字符与阿拉伯数字
window.location="skp:ruby_div3@"+jj1;
}
}
ss = e.value[idIndex1]; //弹出输出功能名 div2 中
window.location="skp:ruby_div2@"+ss;
}
div1.appendChild(div2); //div2工具生成栏
}
box.appendChild(button); //button为大功能生成栏
box.appendChild(div1); //div1为一个大的工具栏 其中包含工具和大功能名称
});
$(document).ready(function() {
$(document).keydown(function(e) {
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if (keycode == 38) { //上移键
if (jQuery.trim($("#append").html()) == "") { //trim()此方法为去除所选定的字符串左右的空格
return ;
}
movePrev();
}
else if (keycode == 40) { //下移键
if (jQuery.trim($("#append").html()) == "") {
return;
}
$("#kw").blur();
if ($(".item").hasClass("addbg")) {
moveNext();
} else {
$(".item").removeClass('addbg').eq(0).addClass('addbg');
} } else if (keycode == 13) {
dojob();
}
});
var movePrev = function() {
$("#kw").blur();
var index = $(".addbg").prevAll().length;
if (index == 0) {
$(".item").removeClass('addbg').eq($(".item").length - 1).addClass('addbg');
} else {
$(".item").removeClass('addbg').eq(index - 1).addClass('addbg');
}
}
var moveNext = function() { //注释1
var index = $(".addbg").prevAll().length;
if (index == $(".item").length - 1) {
$(".item").removeClass('addbg').eq(0).addClass('addbg');
} else {
$(".item").removeClass('addbg').eq(index + 1).addClass('addbg');
}
}
var dojob = function() {
$("#kw").blur();
var value = $(".addbg").text();
$("#kw").val(value);("");
$("#append").hide().html
}
});
function getContent(obj) { //获取搜索框输入的值
var kw = jQuery.trim($(obj).val());
if (kw == "") {
$("#append").hide().html("");
return false;
}
var html1 = "";
for(var j = 0;j<data.length;j++){ //进行页面的匹配
for (var i = 0; i < data[j].value.length; i++) {
if (data[j].value[i].indexOf(kw) >= 0) {
html1 = html1 + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" +data[j].value[i] + "</div>" //匹配成功下拉框显示内容
}
}
}
if (html1 != "") {
$("#append").show().html(html1);
} else {
$("#append").hide().html("");
}
} function getFocus(obj) {
$(".item").removeClass("addbg");
$(obj).addClass("addbg");
}
function getCon(obj) { //点击某个匹配值时 下拉框掩藏
var value = $(obj).text();
$("#kw").val(value);
$("#append").hide().html("");
window.location="skp:ruby_divsousuo@"+value;
}
</script>
</body>
</html>
css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
html{
background-color: #FFEFD5;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} /*
::-webkit-scrollar{
width: 20px; } ::-webkit-scrollar-track-piece{
background:#FFFFFF;
-webkit-border-radius:6px;
} ::-webkit-scrollar-thumb:vertical{
background-color: black;
-webkit-border-radius:6px;
}*/ ul,ol,li{list-style:none;}
input,button{
margin:0;
vertical-align:middle;
} {font-family:'宋体';}
dl,dt,dd{display:block;margin:0;}
a{text-decoration:none;} body{
margin:0;
padding:0;
overflow-x:hidden;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
margin:0 auto;
} table{
border-collapse:collapse;
border-spacing:0;
} a{
color:#333333 ;
outline:none
text-decoration:none;
} a:hover{
color:#00FFFF;
text-decoration:underline;
} /*头像框*/
.tx_box{
/*padding: 8px;*/
padding-top: 15px;
border-style: solid;
background-color: #FFEFD5;
border-color: #A9A9A9;
border-width: 1px;
} .top_box{
width: 85px;
height: 50px;
padding: 2px;
} .to{
width: 53px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -25px;
} /*控制头像框的文字*/
.to1 {
/*width: 20px;
height: 20px; */
/*padding-left: 60px; */
padding-top: 25px;
/* border-radius: 50%; */
padding-left: 17px;
position: relative;
} /* 左边框box*/
.leftsidebar_box{
position:fixed;
width:97.5%;
height:99%;
overflow: auto;
/*overflow:visible !important;*/
/*position:fixed;*/
/*border-width: 5px;*/
padding: 2px;
border-style: solid;
border-color: #A9A9A9;
border-width: 3px;
/* float: right;*/ } /*搜索外边框*/
.outside_box{
/* padding: 1px;
top: 125px;
right:2px;
left:1px;
padding-right: 3px;*/
margin-top:2px;
position:absolute;
padding: 1px;
right: 2px;
left: 2px;
border-style: solid;
background-color: #FFFFFF;
border-color: #A9A9A9;
border-width: 1px;
/*width: 96%;*/
z-index: 3;
} /*搜索成功的字体*/
.highlight{
background:green;
font-weight:bold;
color:white;
} .search_box{
background-image: url(image/search.png);
background-repeat: no-repeat ;
} .search_div{ } .lanmu {
MARGIN: 0px auto;
width: auto;
height: 50px;
} .lanmu span.fr{
float:right;
margin-right:12px;
margin-top:25px;
/*display:inline; */
} /*上边框*/
.mydpx .bottom {
PADDING-TOP: 3px;
HEIGHT: 30px;
} .zjsy_box{
height: 100%;
padding-bottom: 5px;
border-style: solid;
border-color: #A9A9A9;
border-width: 1px;
padding-top: 5px;
padding-left:10px;
padding-right: 8px;
overflow: auto;
background-color: #FFFFF4;
} .content{
width:90%;
height:25px;
float: left;
}
.content img{
padding-top: 3px;
width:20px;
height:20px;
} .leftsidebar_box dt{
/*左边文字*/
padding-left:0px;
padding-right:0px;
background-repeat:no-repeat;
background-position:10px center;
position:relative;
/*line-height:48px;*/
cursor:pointer;
} /*下拉框*/
.leftsidebar_box dd{
/*background-color:#FFFAFA;*/
padding-left:1px;
} /*下拉框文字*/
.leftsidebar_box dd a{
font-size: 15px;
font-weight:bold;
color:#696969; /*银白色*/
line-height:20px;
} .leftsidebar_box dl dd:last-child{
padding-bottom:10px;
} /*最近使用外框*/
.div_b {
position:absolute;
padding: 1px;
top: 125px;
right:2px;
left:1px;
height:60px;
z-index: 1;
} /*菜单栏的边框*/
.div_c{
/*margin: 1px;*/
position:absolute;
padding-top: 5px;
padding: 2px;
top: 215px;
right:1px;
left:0px;
/*width:150px;*/ } .left_button{
width: 100%;
height: 31px;
margin: 1px;
/* border-radius: 15%;*/
border-color:black;
background-color:#FFFFFF;
} .inside_box{
/*border:none;*/
height: 100%;
padding-bottom: 5px;
border-style: solid;
border-color: #A9A9A9;
border-width: 1px;
padding-top: 5px;
padding-left:8px;
padding-right: 8px; } .div_d{
/*border-radius: 10%;*/
width :99%;
/*width: 100px;*/
height: 100px;
border-style: solid;
border-width: 1px;
background-color:#FFFFF4;
padding: 1px;
margin-right: 10px;
overflow: auto;
} .picture{
/* width:23px;
height:45px;
padding:1px;
float: left;*/
/*cursor:pointer;*/
padding: 2px;
margin: 1px;
color:#000000;
/*overflow:hidden;*/
/*vertical-align:middle;*/
/*font-weight:bold;*/
font-size: 18px;
width:90%;
height:25px;
float: left;
} .picture img{
/*width:20px;
height:25px;*/ padding-top: 3px;
width:20px;
height:20px;
} .button1{
margin-right:1px;
height: 31px;
background-color:#C6E2FF;
} .item {
position:inherit;
padding: 3px 5px;
cursor: pointer;
background-color: white;
} .addbg {
background: #99FFFF;
} .first {
border: solid #87A900 2px;
width: 300px;
} #append {
border: solid #87A900 2px;
border-top: 0;
display: none;
}
最近在新公司的一些HTML学习的更多相关文章
- 2018，学会python 在新公司扎根
五月份跳槽了,来新公司,是个跟我之前业务完全不同的行业,偏硬件,可是对硬件没有什么概念.而且自己都不知道从哪里下手的感觉.终于明白自己在上家公司已经将人待的生了锈,我们庆幸,也许还是不晚的. 执行学习 ...
- 袋鼠云旗下新公司云掣科技启航，深耕云MSP业务助推企业数字化转型
1983年3月15日,国际消费者联盟组织将3月15日确立为国际消费者权益日. 2019年3月15日,袋鼠云举办三周年年会. 一生二,二生三,三生万物.植树节后,万物生长. 年会现场,袋鼠云宣布成立新公 ...
- thinkphp学习，蛋疼啊~新公司要弄这个。。。
common/function.php 看里面函数大全,啥玩意都有 Tpl中的是模板文件,action中是控制类,Model中有action用到的一些东西,例: class IndexAction e ...
- 学习新框架laravel4 第一天(- -! 新公司版本使用的4，所以还要重新学习)
路由使用: //根目录 Route::get('/', function() { return View::make('hello'); }); 自定义模板: /app/views/home/inde ...
- Blog 入职新公司的一些吐槽！
入职公司已经两个星期了,说真的也很惭愧.我们这小批入职的一共六个人,五个人是实习生,我是唯一一个社招. 所以 我要吐槽 !! 吐槽1 人家都是90后(TAT) 其实真的不要觉得年龄是压力!看看路边KF ...
- 【公司要求】- RPC学习（一）
HADOOP-IPC(这里说的是1.0.4版本) 是轻量级RPC,在hadoop中主要用于2方面 1.TaskTracker和JobTracker 通讯. 2.NameNode和DataNode通讯. ...
- 【托业】【新托业TOEIC新题型真题】学习笔记12-题库八-P7
155.political figure 政治人物 prominent 160.association n.协会,社团; 联合,联系; 联想; rarely adv.很少地; 罕有地; 极精彩地; 珍 ...
- 纯小白入手 vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...
- JSOI2008 Blue Mary开公司 | 李超线段树学习笔记
题目链接:戳我 这相当于是一个李超线段树的模板qwqwq,题解就不多说了. 代码如下: #include<iostream> #include<cstdio> #include ...
随机推荐
- MFC 滑动条的重绘
MFC自带的滑动条的样子是这样的. 比较难看,所以需要重绘下,重绘后的样子是这样的. 代码如下: CustomSliderCtr.h #pragma once // CCustomSliderCtr ...
- Webbench性能测试
1.下载安装:立即下载 官网:http://home.tiscali.cz/~cz210552/webbench.html 2.解压缩:tar -zxvf webbench-1.5.tar.gz 3 ...
- mongodb防火墙配置
http://ruby-china.org/topics/20128 https://docs.mongodb.com/manual/tutorial/configure-linux-iptables ...
- 使用dd命令备份Linux分区
为了备份分区,开始使用的是Remastersys,但最终生成的iso文件仅有几十K,应该是软件bug,且此软件不再更新,后尝试使用Linux Respin,但github一直连接不上. 其实可以尝试使 ...
- Android 笔记 Intent and Bundle day7
学习了Intent与Bundle的使用,进行应用中的交互 package com.example.intent; import android.app.Activity; import android ...
- UVALive 2453 Wall （凸包）
题意:给你一个多边形的城堡(多个点),使用最短周长的城墙将这个城堡围起来并保证城墙的每个点到城堡上的每个点的距离都不小于l 题解:因为两点间的直线一定比折线短,所以这样做 先使用所有点求得一个凸包,接 ...
- HDU 3535 AreYouBusy （混合背包）
题意:给你n组物品和自己有的价值s,每组有l个物品和有一种类型: 0:此组中最少选择一个 1:此组中最多选择一个 2:此组随便选 每种物品有两个值:是需要价值ci,可获得乐趣gi 问在满足条件的情况下 ...
- JS(去掉前后空格或去掉所有空格)的用法
1. 去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 说明 ...
- ［转载］ 构造linux 系统下免密码ｓｓｈ登陆 ＿How to establish password-less login with SSH
In present (post production) IT infrastructure many different workstations, servers etc. have to be ...
- Ue4的UE_LOG
说明:本文为Wiki上的RAMA大神文章的大致翻译 游戏模式: 在游戏模式下,你需要在游戏的快捷方式后面加 -Log,才会在游戏中显示. 编辑器模式(Play In Editor): 你可以在Outp ...