html自定义垂直导航菜单
html自定义垂直导航菜单(目前只支持上级+下级两级菜单)
由于工作的需要,昨天花了三个多小时的事件整理了一份关于垂直导航二级菜单,可以通过js配置的方式初始化菜单box(测试环境:chrome 49、IE 10、IE edge)。
no pic u say a j8? 好吧,先上效果图(由于下面是gif,所以一帧一帧的感觉不流畅。讲道理,事实上,切换非常流畅,自行下载看Demo)。
js配置方式:
配置menuBox的方式:menuBox.init(config);
这里的config有三个属性:
menuBoxId(必需,你要配置的菜单根节点所在元素的Id)
multiple(可选,是否可以同时打开多个上级菜单,默认是false,也就是最多显示一个上级菜单的子菜单)
openIndex(可选,初始化要打开上级菜单的index数组,如果你要传值,按照格式应该是数字数组)
//配置第一个手风琴的基本参数
var config01 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox01",
//是否可以打开多个上级菜单的子菜单
multiple: false,
//初始化打开的
openIndex: [3, 4, 5]
}
menuBox.init(config01);
然后看下两个菜单Box的配置:
第一个菜单Box:可以同时打开多个上级菜单,初始化的时候打开第0、1个。
//配置第一个手风琴的基本参数
var config01 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox01",
//是否可以打开多个二级菜单
multiple: true,
//初始化打开的
openIndex: [0,1]
}
menuBox.init(config01); 第二个菜单Box:不可以打开多个上级菜单,初始化的时候打开第1个,如果传入数组有多个值,默认打开第一个有效的index上级菜单。
//配置第二个手风琴的基本参数
var config02 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox02",
//是否可以打开多个二级菜单
multiple: false,
//初始化打开的
openIndex: [-1, 1]
}
menuBox.init(config02);
用到的知识点:
1、flexbox(在ie9及以下布局不兼容,但是还是可以正常看到切换效果)。
2、css3 transform配合transition实现箭头的旋转切换。
3、打开菜单:$().slideDown()、关闭菜单:$().slideUp()、切换菜单:$().slideToggle()。有时间我会修改为css3动画实现切换,尽量不用jquery。
4、<i>标签引用图标font-awesome
下面是相关代码:
html:
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="css/menuBox.css" />
<script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="js/menuBox.js"></script>
<title>MenuBox</title>
</head>
<style>
.top {
background: lightblue;
min-height: 55px;
}
</style> <body>
<div id="top" class="top">
<span>
var config01 = {<br>
menuBoxId: "#menuBox01",<br>
multiple: true,<br>
openIndex: [0,1]<br>
}<br>
menuBox.init(config01);<br><br> var config02 = {<br>
menuBoxId: "#menuBox02",<br>
multiple: false,<br>
openIndex: [-1, 1]<br>
}<br>
menuBox.init(config02);<br>
</span>
</div>
<div id="leftNav" class="left-nav">
<!--
作者:15934179313@163.com
时间:2016-08-03
描述:第一个手风琴二级菜单
-->
<div id="menuBox01" class="menuBox">
<ul class="spMenuBox">
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
<li class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<ul class="subMenuBox">
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
<li><span class="subMenu">菜单1.1</span></li>
<li><span class="subMenu">菜单1.2</span></li>
<li><span class="subMenu">菜单1.3</span></li>
</ul>
</li>
</ul>
</div>
<!--
作者:15934179313@163.com
时间:2016-08-03
描述:第二个手风琴菜单
-->
<div id="menuBox02" class="menuBox">
<div class="spMenuBox">
<div class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<div class="subMenuBox">
<div><span class="subMenu">菜单1.1</span></div>
<div><span class="subMenu">菜单1.2</span></div>
<div><span class="subMenu">菜单1.3</span></div>
</div>
</div>
<div class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<div class="subMenuBox">
<div><span class="subMenu">菜单1.1</span></div>
<div><span class="subMenu">菜单1.2</span></div>
<div><span class="subMenu">菜单1.3</span></div>
</div>
</div>
<div class="spMenuItem">
<div class="spMenu">
<i class="fa fa-chrome"></i>
<span>菜单1</span>
<i class="fa fa-2x fa-angle-down"></i>
</div>
<div class="subMenuBox">
<div><span class="subMenu">菜单1.1</span></div>
<div><span class="subMenu">菜单1.2</span></div>
<div><span class="subMenu">菜单1.3</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$().ready(function() {
initLeftNavHeight();
initMenu();
}) /**初始化左侧导航栏高度**/
function initLeftNavHeight() {
initHeight(); function initHeight() {
var total = document.documentElement.clientHeight;
var topHeight = $("#top").height();
$("#leftNav").height(total - topHeight);
} document.body.onresize = function() {
initHeight();
}
} /**初始化菜单选项**/
function initMenu() {
//配置第一个手风琴的基本参数
var config01 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox01",
//是否可以打开多个上级菜单
multiple: true,
//初始化打开的
openIndex: [0,2]
}
menuBox.init(config01); //配置第二个手风琴的基本参数
var config02 = {
//配置菜单的MenuBoxId
menuBoxId: "#menuBox02",
//是否可以打开多个上级菜单
multiple: false,
//初始化打开的上级菜单的index数组
openIndex: [-1, 1]
}
menuBox.init(config02);
}
</script> </html>
menuBox.css:
body {
margin: 0;
} ul {
list-style: none;
padding: 0;
margin: 0;
} .left-nav {
background: lightgray;
height: 100%;
overflow-y: overlay;
position: absolute; /**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
} /**菜单box**/
.menuBox {
width: 300px;
margin: 5px;
} /**默认不显示二级菜单**/
.menuBox .subMenuBox {
display: none;
} /**一级菜单样式**/
.spMenuBox>*>.spMenu {
align-items: center;
background: darkslateblue;
border-bottom: 1px solid lightgray;
cursor: pointer;
color: white; /**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/**flexbox兼容**/
-webkit-justify-content: space-around;
-webkit-box-pack: space-around;
-moz-box-pack: space-around;
-ms-flex-pack: space-around;
justify-content: space-around;
/**user-select兼容**/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
} /**最后一个一级菜单样式**/
.spMenuBox>*:last-child>.spMenu {
align-items: center;
background: darkslateblue;
border-bottom: 0px;
color: white;
cursor: pointer; /**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/**flexbox兼容**/
webkit-justify-content: space-around;
-webkit-box-pack: space-around;
-moz-box-pack: space-around;
-ms-flex-pack: space-around;
justify-content: space-around;
/**user-select兼容**/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
} /**箭头切换用动画实现**/
.fa-angle-down {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
} .spMenuItem.active>.spMenu>.fa-angle-down {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
} /**二级菜单样式*/
.subMenuBox>*>.subMenu {
align-items: center;
background: #ccc;
border-bottom: 1px solid lightyellow;
cursor: pointer;
padding: 5px 10px; /**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/**user-select兼容**/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none; } /**最后一个二级菜单样式**/
.subMenuBox>*:last-child>.subMenu {
align-items: center;
background: #ccc;
border-bottom: 0px;
cursor: pointer;
padding: 5px 10px; /**flexbox兼容**/
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
/**flexbox兼容**/
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
/**user-select兼容**/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
menuBox.js:
/**
* 配置菜单
* 示例:
* 配置基本参数
* var config = {
* //配置菜单的MenuBoxId
* menuBoxId: "#menuBox01",
* //是否可以打开多个上级菜单
* multiple: true,
* //初始化打开的菜单数组
* openIndex: [1, 3, 5]
* }
* menuBox.init(config);
*
* @author DarkRanger
* http: //www.cnblogs.com/wrcold520/
*/ ! function($) {
if($ == undefined) {
throw new Error("please put your jquery.js top of menuBox.js!")
}
var menuBox = function() {};
//要配置的menuBox的菜单id
menuBox.menuBoxId = undefined;
//是否可以显示多个上级菜单的子菜单
menuBox.multiple = false;
//默认关闭所有一级菜单
menuBox.openIndex = []; //menuBox初始化方法
menuBox.init = function(config) { var cntMenuBox = new menuBox(); //定义上级菜单spMenu数组
var spMenus; if(config.menuBoxId == undefined) {
throw new Error("your config has not 'menuBoxId', please make sure your menuBox is existed!");
} else {
cntMenuBox.menuBoxId = $(config.menuBoxId) ? config.menuBoxId : undefined;
} if(config.multiple == undefined) {
console.warn("your config has not 'multiple', default value is false which means you can open only one spMenu at the same time!");
} else {
cntMenuBox.multiple = config.multiple;
} if(config.openIndex == undefined) {
console.warn("your config has not 'openIndex', default value is a Array which's length is 0!");
} else if(!config.openIndex instanceof Array) {
throw new Error("your config 'openIndex' should be a number Array");
} else {
cntMenuBox.openIndex = unique(config.openIndex, false);
} //确定对应的menuBox
cntMenuBox.menuBoxId = config.menuBoxId;
//是否打开其他某一个的时候关闭其他选项
var closeOthers = !cntMenuBox.multiple;
//初始化点击事件
initClickEvent(cntMenuBox, closeOthers);
//确定上级菜单数组
spMenus = $(cntMenuBox.menuBoxId + " .spMenu");
//打开传入的数组
for(var i in cntMenuBox.openIndex) {
var index = cntMenuBox.openIndex[i];
var spMenu = spMenus[index];
if(spMenu) {
openSpMenu(cntMenuBox.menuBoxId, index);
if(!cntMenuBox.multiple) {
break;
}
}
}
} function unique(arr) {
var result = [],
hash = {};
for(var i = 0, elem;
(elem = arr[i]) != null; i++) {
if(!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
} //初始化点击事件
function initClickEvent(menuBox, closeOthers) {
$(menuBox.menuBoxId + " .spMenu").on("click", function() {
var cntSpMenu$ = $(this);
//要切换的元素
cntSpMenu$.next().slideToggle();
cntSpMenu$.parent().toggleClass("active") var cntSpMenu = cntSpMenu$['context'];
if(closeOthers == true) {
var spMenus = $(menuBox.menuBoxId + " .spMenu");
$.each(spMenus, function(index, spMenu) {
if(cntSpMenu != spMenu) {
closeSpMenu(menuBox.menuBoxId, index);
}
});
}
});
} //打开某一个item
function openSpMenu(menuBoxId, index) {
//要切换的元素
var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
spItem.next().slideDown();
spItem.parent().addClass("active")
}
//关闭某一个item
function closeSpMenu(menuBoxId, index) {
//要切换的元素
var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
spItem.next().slideUp();
spItem.parent().removeClass("active")
}
//切换某一个item
function toggleSpMenu(menuBoxId, index) {
//要切换的元素
var spItem = $(menuBoxId + " .spMenu:eq(" + index + ")");
spItem.next().slideToggle();
spItem.parent().toggleClass("active")
} window.menuBox = menuBox;
}($);
附上源码:
html自定义垂直导航菜单的更多相关文章
- html自定义垂直导航菜单(多级导航菜单,去掉font-awesome图标,添加自己的箭头图标)
这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...
- html自定义垂直导航菜单(加强版--自定义传入menu参数,支持JSONArray、JSArray、JSONObject、JSObject)
在上一篇中我简单写了个html自定义垂直导航菜单,缺点很明显,里面的数据是固定死的,不能动态更改数据. 这里我重写了一个修改版的垂直二级导航菜单,将原先的menuBox.init(config);修改 ...
- jQuery漂亮图标的垂直导航菜单
效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...
- Android开发之自定义局部导航菜单
如今,要实现导航功能方案有很多.比如: 1.用3.0+自带的Toolbar + Fragment导航. 2.用Tabhost实现导航.小弟学浅,就只用过这两种方案实现导航. 但是这两种方案都有一个很明 ...
- h5+css 垂直导航菜单
http://blog.csdn.net/baidu_32731497/article/details/51814427
- 为SharePoint网站创建自定义导航菜单
转:http://kaneboy.blog.51cto.com/1308893/397779 相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoi ...
- 使用CSS创建有图标的网站导航菜单
在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...
- ABP之展现层(导航菜单)
基本的增删改查已经粗糙的结束了,接下来就是要方便的展示了,也就是导航菜单.在Abp中已经对导航栏的设置进行了相应的封装(Abp.Application.Navigation),可以方便我们快速的将自己 ...
- WEB入门.九 导航菜单
学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...
随机推荐
- C#使用var定义变量时的四个特点
使用var定义变量时有以下四个特点: 1. 必须在定义时初始化.也就是必须是var s = “abcd”形式: 2. 一但初始化完成,就不能再给变量赋与初始化值类型不同的值了. 3. var要求是 ...
- easyui 列表 条件检索
onclick="search()" 不要使用search命名检索方法,冲突,无法调用. 通用检索function function searchData() { var objs ...
- Python - selenium_WebDriver 鼠标键盘事件
from selenium import webdriver #引入ActionChains类 提供了鼠标的操作方法 from selenium.webdriver.common.action_cha ...
- Web标准及网站的可用性、可访问性
学习前端的过程中到处充斥着Web标准.可用性.可访问性这些词,那么到底它们指的是什么呢? 一.什么是Web标准 简单的说,Web标准就是我们在学习前端中接触最多的HTML.CSS.JavaScript ...
- indexDB的使用和异步图片blob文件保存
//调整webkit兼容性 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || w ...
- 6w5:第六周程序填空题2
描述 下面程序的输出结果是: destructor B destructor A 请完整写出 class A. 限制条件:不得为 class A 编写构造函数. #include <iostre ...
- percona 5.7二进制安装
1.建立用户和组 sudo groupadd mysql sudo useradd -g mysql -s /sbin/nologin mysql 2.下载二进制包Percona-Server-5.7 ...
- [SinGuLaRiTy] 2017 百度之星程序设计大赛 复赛
[SinGuLaRiTy-1038] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. Arithmetic of Bomb Problem D ...
- 并不能来一发50AC
本来想来一发50AC嗨一下 然后发现只有40+ 算了放弃了..
- Django 项目重命名
在日常学习工作过程中,我们难免需要复用以前的项目,这里讲下复用 Django 项目并重命名的过程. 1.修改项目名称,使用 pycharm -> refactor 重命名整个项目. 2.修改 m ...