最近在新公司的一些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 ...
随机推荐
- jQuery中width、innerWidth、outerWidth的区别
原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...
- npm设计代理
概述: 在需要代理才能上网的环境下,需要给npm设置代理才能完成安装 npm install 代理设置: 直接使用npm install会报错,如下: npm ERR! node v6.7.0 np ...
- Windows平台手动卸载Oracle Server【完整+干净】
使用Oracle自带的Universal Installer卸载存在问题: 不干净,不完全,还有一些注册表残留,会影响到后来的安装. 所以,推荐使用手工卸载Oracle. 1.[win+R]-> ...
- 【python坑记录】
python的sort函数使用的时候有一个参数cmp.一定注意这里返回值要用1和-1.不能True和False!!!
- Xamarin教程索引页
持续更新中-- 近期学习处理Xamarin.Android动画内容 Xamarin指南 -- 官网教程翻译 Xamarin跨平台开发 Xamarin Workbooks Xamarin Workboo ...
- 安装DRools开发环境
1.下载相关安装包和开发插件 网站:http://www.jboss.org/drools/downloads.html 1.1 drools-distribution-6.3.0.Final.zip ...
- #pg学习#postgresql的安装
1.按照官网给的步骤编译安装(Mac安装是比较容易的,相比Liunx) cd /Users/renlipeng/Desktop/postgresql-9.5.1 ./configure --prefi ...
- Unity 依赖注入之二
1. 构造子注入 1.1 构造子注入初级代码 container.RegisterType<IMyWork, MyWork>(new InjectionConstructor(new Bo ...
- 【刷题笔记】--lintcode木头加工(java)
木头加工 题目描述 有一些原木,现在想把这些木头切割成一些长度相同的小段木头,需要得到的小段的数目至少为 k.当然,我们希望得到的小段越长越好,你需要计算能够得到的小段木头的最大长度. 注意事项 木头 ...
- iOS之转场动画
CodeApp地址CATransition_Demo:https://github.com/Wheat-Qin/CATransition_Demo iOS中比较全的翻转过渡动画(不只是苹果提供的).包 ...