最近在新公司的一些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 ...
随机推荐
- runtime运行时
/** * Describes the instance variables declared by a class. * * @param cls The class to inspect. * @ ...
- 用gulp构建你的前端项目
前言 前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动 ...
- TextView属性android:ellipsize="marquee"不生效的解决办法
最近自己在写自己的第一个app,过程中遇到了这个问题,查了不少帖子,经过尝试发现,这种问题一般分为两类: 1. TextView的Text值赋值后不更改,很多帖子上说如下写法就可以生效: <Te ...
- C++ 系列：内存管理
1.内存分配方式 内存分配方式有三种: (1)从静态存储区域分配. 内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量,static变量. (2)在栈上创建. 在执行函 ...
- 重置VS设置
用VS开发项目的时候, 偶发智能提示消失.关键字.类名不变色的情况. 如果你也遇到过,那么这样做: 新建txt,打开并输入以下内容: start "" "C:\Progr ...
- fatal error LNK1169: 找到一个或多个多重定义的符号
申明全局变量,全局函数一定要在cpp中申明,其他类引用该全局变量就include该cpp的h文件,然后extern一下就好了.否则容易出现该重复定义错误. 这个"容易"是如何解释的 ...
- IMEI串号
IMEI串号就是国际移动设备身份码,是电子设备的唯一身份证,由于它的唯一性,它可以用来查询电子设备的保修期还有产地,可以说用处直逼人民的身份证啊! 在拨号键盘页面 输入[*#06#]五个字符
- Startcom SSL证书申请 IIS设置 配置 攻略
申请具体参考:http://www.cnblogs.com/yibinboy/p/6137426.html 制作要导入服务器IIS上的证书. 点击控制面板的左上角的TOOL BOX,然后点击Creat ...
- maven权威指南学习笔记（五）—— POM
1. 简介 Archetype插件通过 pom.xml 文件创建了一个项目.这就是项目对象模型 (POM),一个项目的声明性描述. 当Maven运行一个目标的时候,每个目标都会访问定 义在项目POM里 ...
- java中的泛型的使用与理解
什么是泛型? 泛型是程序设计语言的一种特性.允许程序员在强类型程序设计语言中编写 体验泛型代码时定义一些可变部份,那些部份在使用前必须作出指明.各种程序设计语言和其编译器.运行环境对泛型的支持均不一样 ...