最近在新公司的一些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 ...
随机推荐
- sql 如何将拼的sql语句结果赋值给变量
SET @SQLS='select @AllUser=count(1) from (select PhoneId from '+@TABLE+' where SiteId='+convert(VARC ...
- Web网站的几个并发量级
评价一个网站的“大小”,处于视角的不同,有很多种衡量的方法,类似文章数,页面数之类的数据非常明显,也没有什么可以争议的.但对于并发来说,争议非常之多,这里就从一个技术的角度开始,谈谈几个Web网站的数 ...
- CrashMonkey4IOS App测试
下载地址:https://github.com/vigossjjj/CrashMonkey4IOS 根据下载地址里面的说明安装一下,以下进行配置 1.进入CrashMonkey4IOS-master/ ...
- Linux学习日记之磁盘与档案系统
主要定义 磁盘的物理组成磁盘主要由圆形磁盘(多张).机械手臂.磁头等组成.每张磁盘都有不同的磁道,半径相同的磁道组成了磁柱,沿着中心划线可将磁盘分成若干扇区,每个扇区的大小是512Bytes. 磁盘分 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- Tensorflow 变量的共享
https://github.com/chenghuige/tensorflow-exp/blob/master/examples/sparse-tensor-classification/ tens ...
- OpenCV 人脸识别 C++实例代码
#include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include & ...
- 通过配置web.config使WCF向外提供HTTPS的Restful Service
如何通过WCF向外提供Restful的Service请看如下链接 http://www.cnblogs.com/mingmingruyuedlut/p/4223116.html 那么如何通过对web. ...
- find命令与cat命令区别
在当前目录下查找 MEMBERINTERFACE 这个字符串的文件find . -name '*'|xargs grep "MEMBERINTERFACE"find / -name ...
- TP5.0源生Excel导出
PHPExcel类在TP5里边并不能很好的兼容,使用起来很麻烦. 不像是tp3.2那样直接import()加进来就能new,因为它里边的命名空间找不到.总是说undefined class. 如果是使 ...