最近在新公司的一些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 ...
随机推荐
- 表达式求值（noip2015等价表达式）
题目大意 给一个含字母a的表达式,求n个选项中表达式跟一开始那个等价的有哪些 做法 模拟一个多项式显然难以实现那么我们高兴的找一些素数代入表达式,再随便找一个素数做模表达式求值优先级表 - ( ) + ...
- SQL 检查 是否存在 表 临时表
1.检查临时表是否存在 已有临时表#temp2 if exists(select * from tempdb..sysobjects where id =object_id('tempdb..#tem ...
- js 字符串操作函数
concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf() – 返回字符串中一个子串第一处出现的索引.如果没有匹配项,返回 -1 . charAt() – 返回指定 ...
- UILabel 根据文本内容设置frame
CGRect senderFrame = cell.senderLabel.frame; CGRect creatAtFrame = cell.creatAtLabel.frame; CG ...
- kettle系列-4.kettle定制化开发工具类
要说的话这个工具类还是比较简单的,每个方法体都比较小,但用起来还是可以的,把开发中一些常用的步骤封装了下,不用去kettle源码中找相关操作的具体实现了. 算了废话不多了,直接上重点,代码如下: im ...
- url地址的图片路径
url地址的图片路径: (./images/1.jpg) 中的./指根路径,有或没有都可以: (../images/1.jpg) 中的../指相对路径: (../../images/1.jpg) 中的 ...
- ***IT程序员自我修养和情商提升文章
低情商的13个表现 --------------------------------------------------------------------- — THE END —
- 使用base.调用父类里面的属性
使用base.调用父类里面的属性public class parent { public string a; }public class child :parent { public string g ...
- 自定义RatingBar的一个问题（只显示显示一个星星）
问题一: 在自定义RatingBar时在设置了numStars属性后只显示一张图(一个星星) 解答: 注意准备的替换图片千万不要使用.9PNG格式的图片,要不之后显示一张图(一个星星)! 问题二: 设 ...
- Puppet自动化运维-资源介绍篇（4）
1.什么是资源? 资源是Puppet最基础的元素,每个资源的定义都具有标题,类型,以及一系列的属性. 资源定义有如下的特性: (1) Puppet使用title在编译时区分每个资源,使用命名变量在 ...