前端面试笔试问答题
1.你熟悉哪种前端开发框架，描述一种即可。
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
2.假设在B/S架构模式下，Web端需要提供很多功能菜单，且菜单可以由每一个用户在Web端自定义，你将如何做？(使用bootstrap实现)
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--jquery 1.11.3-->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<style>
.tabs {
width: 800px;
margin: 150px auto;
}
.tab-header {
position: relative;
height: 40px;
line-height: 40px;
background: #fafafa;
border-bottom: solid 2px #39AEF5;
overflow: hidden;
}
.tab-left,
.tab-right {
position: absolute;
top: 0;
width: 40px;
height: 40px;
text-align: center;
color: #888;
background-color: #ffffff;
cursor: pointer;
z-index: 1000;
}
.tab-left {
left: 0;
border-right: solid 1px #eee;
}
.tab-right {
right: 0;
border-left: solid 1px #eee;
}
.tabs-wrap {
position: relative;
overflow: hidden;
margin: 0 40px;
}
.tabs-wrap ul {
list-style-type: none;
height: 40px;
margin: 0;
padding: 0;
font-size: 14px;
width: 5000px;
}
.tabs-wrap ul li {
float: left;
display: inline-block;
}
.tabs-wrap ul li a {
display: block;
border-right: solid 1px #eee;
padding: 0 15px;
color: #888;
}
.tabs-wrap ul li.active a {
background-color: #39AEF5;
color: #fff;
}
.tabs-wrap ul li a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<!--标签页导航条-->
<div class="tab-header">
<!--左边按钮-->
<a class="tab-left">
<i class="fa fa-backward"></i>
</a>
<!--右边按钮-->
<a class="tab-right">
<i class="fa fa-forward"></i>
</a>
<div class="tabs-wrap">
<!--标签页内容-->
<ul class="tabs-content">
<li class="active" data-id="0">
<a href="#">首页</a>
</li>
</ul>
</div>
</div>
<!--标签页内容-->
<div class="tab-panel" id="tab-panel">
</div>
</div>
<ul class="dropdown-menu Rightmenu">
<li class="tabUpdate">
<a>刷新</a>
</li>
<li class="divider"></li>
<li class="tabCloseAll">
<a>关闭全部选项卡</a>
</li>
<li class="divider"></li>
<li class="tabCloseOther">
<a>关闭其他选项卡</a>
</li>
<li class="divider"></li>
<li class="tabnextClose">
<a>关闭右边其他选项卡</a>
</li>
<li class="divider"></li>
<li class="tabprevClose">
<a>关闭左边其他选项卡</a>
</li>
</ul>
<a class="btn btn-primary btn-lg" data-id="1" style="margin-left: 100px">添加TABS1</a>
<a class="btn btn-primary btn-lg" data-id="2" style="">添加TABS2</a>
<a class="btn btn-primary btn-lg" data-id="3" style="">添加TABS3</a>
<a class="btn btn-primary btn-lg" data-id="4" style="">添加TABS4</a>
<a class="btn btn-primary btn-lg" data-id="5" style="">添加TABS5</a>
<a class="btn btn-primary btn-lg" data-id="6" style="">添加TABS6</a>
<a class="btn btn-primary btn-lg" data-id="7" style="">添加TABS7</a>
<a class="btn btn-primary btn-lg" data-id="8" style="">添加TABS8</a>
<a class="btn btn-primary btn-lg" data-id="9" style="">添加TABS9</a>
<script>
//获取全部的tab标签的宽度
function getContentWidth(c) {
var w = 0;
c.children().each(function() {
w += $(this).outerWidth(true);
});
return w;
}
// 判断tab是否已存在
function tabRepeat(id) {
var li = $(".tabs-content li");
var isRepeat = false;
$.each(li, function(i, n) {
if($(n).attr("data-id") == id) {
isRepeat = true;
return false;
}
});
return isRepeat;
}
//添加tab方法
function addTab(id, title, content) {
var ul = $(".tabs-content");
var panels = $(".tab-panel");
var tab;
// 如果tab标题已存在，就打开当前标签页并返回
if(tabRepeat(id)) {
tab = $(".tabs-content li[data-id=" + id + "]");
scrollSelected(tab);
} else {
//创建tab
tab = $(
'<li data-id = "' + id + '">' +
'<a href="javascript:void(0)">' +
title +
' <i class="fa fa-times-circle tab-close"></i></a>' +
'</li>'
);
//创建tab面板
var tabPanel = $(
'<div class="panel-content" data-id="' + id + '">' +
content +
'</div>'
);
//将tab和tab面板添加到页面
tab.appendTo(ul);
tabPanel.appendTo(panels);
//如果标签过多，就滚动标签容器使标签显示
var tabsWidth = getContentWidth(ul);
tabsWidth > $(".tabs-wrap").width() && ul.animate({
"margin-left": $(".tabs-wrap").width() - tabsWidth
});
}
//选中tab
selectTab(tab);
}
//选中标签页
function selectTab(self) {
//所有的tab取消选中
$(".tabs-content li").removeClass("active");
//隐藏所有的面板
$(".panel-content ").hide();
//选中时显示选中的标签页
self.addClass("active");
var id = self.attr("data-id");
$(".panel-content[data-id=" + id + "]").show();
return false;
}
//选中时移动Tab
function scrollSelected(self) {
var w = parseInt(self.css("width"));
var ul = $(".tabs-content");
var ulLeft = parseInt(ul.css("margin-left"));
var wapW = $(".tabs-wrap").width();
var tabsWidth = getContentWidth(ul);
var prveall = self.prevAll();
var nextall = self.nextAll();
var prveallwidth = 0;
var nextallwidth = 0;
var newleft;
$.each(prveall, function(i, n) {
prveallwidth += parseInt($(n).css("width"))
});
$.each(nextall, function(i, n) {
nextallwidth += parseInt($(n).css("width"))
});
if(prveallwidth + w < wapW) {
newleft = 0
} else if(nextallwidth < wapW) {
newleft = wapW - tabsWidth
} else {
newleft = -prveallwidth + wapW / 2
}
if(prveallwidth < -ulLeft || prveallwidth > wapW - w) {
ul.animate({
"margin-left": newleft
})
}
}
//删除标签页
function closeTab(self) {
var li = self.parents("li");
var id = li.attr("data-id");
var nextLI = li.next();
var prevLI = li.prev();
var w = li.width();
var ul = $(".tabs-content");
var tabConLeft = parseInt(ul.css("margin-left"));
//删除标签和面板
li.remove();
$(".panel-content[data-id=" + id + "]").remove();
//删除标签页时显示其他标签页
if(li.hasClass("active") && nextLI.size() == 0) {
prevLI.addClass("active");
$(".panel-content[data-id=" + prevLI.attr("data-id") + "]").show();
} else if(li.hasClass("active") && nextLI.size() != 0) {
nextLI.addClass("active");
$(".panel-content[data-id=" + nextLI.attr("data-id") + "]").show();
return false
}
//需要时滚动标签
tabConLeft < 0 && ul.animate({
"margin-left": tabConLeft + w > 0 ? 0 : tabConLeft + w
});
}
//绑定点击事件
function bindEvents(self) {
self.unbind().bind("click", function(e) {
var left = 200;
var ul = $(".tabs-content");
var ulLeft = parseInt(ul.css("margin-left"));
var tabsWidth = getContentWidth(ul);
if($(e.target).hasClass("tab-left") || $(e.target).parent().hasClass("tab-left")) {
ulLeft < 0 && scrollBy(left);
} else if($(e.target).hasClass("tab-right") || $(e.target).parent().hasClass("tab-right")) {
ulLeft > $(".tabs-wrap").width() - tabsWidth && scrollBy(-left)
} else if($(e.target).hasClass("tab-close")) {
closeTab($(e.target))
} else {
var li = $(e.target).closest('li');
if(li.length) {
selectTab(li);
}
return false
}
}).on('contextmenu', 'li', function(e) {
e.preventDefault();
selectTab($(this));
$(".Rightmenu").css({
display: 'block',
left: e.pageX,
top: e.pageY
});
});
tabRightmenuEven();
}
//设置标签滚动
function scrollBy(left) {
var ul = $(".tabs-content");
var ulLeft = parseInt(ul.css("margin-left"));
var tabsWidth = getContentWidth(ul);
var newLeft = ulLeft + left;
if(newLeft > 0) {
newLeft = 0
} else if(newLeft < $(".tabs-wrap").width() - tabsWidth) {
newLeft = $(".tabs-wrap").width() - tabsWidth
}
ul.animate({
"margin-left": newLeft
})
}
//绑定右键菜单事件
function tabRightmenuEven() {
//离开选项卡时，隐藏右键菜单
$(".Rightmenu").on('mouseleave', function() {
$(this).hide();
return false;
});
$(".sidebar, .main, .top-navbar").mouseover(function() {
$(".Rightmenu").hide();
});
//刷新
$('.tabUpdate').click(function() {
var tabs = $(".tabs-content li");
tabs.each(function(i, n) {
if($(n).hasClass("active")) {
var id = $(n).attr("data-id");
//用js调用强制刷新
$(".panel-content[data-id = '" + id + "'] iframe").attr('src', $(".panel-content[data-id = '" + id + "'] iframe").attr('src'));
}
});
$(".Rightmenu").hide();
return false;
});
//关闭全部
$(".tabCloseAll").click(function() {
var tabs = $(".tabs-content li");
$.each(tabs, functi
最低0.47元/天 解锁文章
1131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
