您的位置：首页 > Web前端 > BootStrap

BootstrapOffCanves

2015-12-01 14:59 716 查看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<base href="<%=basePath%>">
<title>Test page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<link rel="stylesheet" href="Plugins/bootstrap/css/bootstrap.offcanvas.min.css"></link>
<style type="text/css">
</style>

</head>
<body>
<header class="clearfix">

<button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<!-- <button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas-2">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button> -->

<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch navbar-offcanvas-fade" role="navigation" id="js-bootstrap-offcanvas">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">Brand</a>

<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;">

<span class="sr-only">Toggle navigation</span>

<i class="glyphicon glyphicon-remove"></i>

</button>

</div>

<div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle">Another Link <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li><a href="#">Separated link</a></li>

<li class="divider"></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-left" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Link</a></li>

<li><a href="#">Another Link</a></li>

</ul>

</div>

</div>

</nav>

<!-- <nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-right navbar-offcanvas-touch navbar-offcanvas-fade" role="navigation" id="js-bootstrap-offcanvas-2">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">Brand 2</a>

</div>

<div>

<ul class="nav navbar-nav">

<li class="active"><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle">Another Link <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li><a href="#">Separated link</a></li>

<li class="divider"></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

<form class="navbar-form navbar-left" role="search">

<div class="form-group">

<input type="text" class="form-control" placeholder="Search">

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<ul class="nav navbar-nav navbar-right">

<li><a href="#">Link</a></li>

<li><a href="#">Another Link</a></li>

</ul>

</div>

</div>

</nav> -->

</header>

<div class="container">

<div class="row">

<div class="col-sm-12">

<h1>Page Title</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin feugiat hendrerit feugiat. In cursus nisl id arcu ullamcorper, eget euismod ante tincidunt. Cras placerat facilisis semper. Nam vel nisl sit amet justo interdum luctus. Mauris eu felis pretium velit mollis molestie. Nam aliquet a tellus ut pretium. Pellentesque fermentum nulla tempus mauris sagittis, eget imperdiet quam tristique. Pellentesque quis mauris mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales turpis fringilla ligula rutrum, eget mattis justo bibendum. Integer imperdiet mi non cursus bibendum. Nullam vitae cursus justo. Integer quis elit sit amet arcu pellentesque google sit amet a sapien. Aliquam tincidunt felis eget quam euismod cursus. Suspendisse lobortis ut elit vitae rhoncus. Ut tincidunt, ante eu egestas sodales, dui nulla aliquet mi, a eleifend lacus risus sit amet lacus.</p>

</div>

</div>

</div>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="Plugins/bootstrap/js/bootstrap.offcanvas.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<script type="text/javascript">

</script>

</body>
</html>

<pre name="code" class="javascript">(function() {
var Offcanvas, OffcanvasDropdown, OffcanvasTouch, transformCheck,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

OffcanvasDropdown = (function() {
function OffcanvasDropdown(element) {
this.element = element;
this._clickEvent = __bind(this._clickEvent, this);
this.element = $(this.element);
this.dropdown = this.element.parent().find(".dropdown-menu");
this.element.on('click', this._clickEvent);
}

OffcanvasDropdown.prototype._clickEvent = function(e) {
if (!this.dropdown.hasClass('shown')) {
e.preventDefault();
}
this.dropdown.toggleClass("shown");
return this.element.parent().toggleClass('active');
};

return OffcanvasDropdown;

})();

OffcanvasTouch = (function() {
function OffcanvasTouch(element, location, offcanvas) {
this.element = element;
this.location = location;
this.offcanvas = offcanvas;
this._clearCss = __bind(this._clearCss, this);
this._getFade = __bind(this._getFade, this);
this._getCss = __bind(this._getCss, this);
this._touchEnd = __bind(this._touchEnd, this);
this._touchMove = __bind(this._touchMove, this);
this._touchStart = __bind(this._touchStart, this);
this.endThreshold = 130;
this.startThreshold = this.element.hasClass('navbar-offcanvas-right') ? $("body").outerWidth() - 60 : 20;
this.maxStartThreshold = this.element.hasClass('navbar-offcanvas-right') ? $("body").outerWidth() - 20 : 60;
this.currentX = 0;
this.fade = this.element.hasClass('navbar-offcanvas-fade') ? true : false;
$(document).on("touchstart", this._touchStart);
$(document).on("touchmove", this._touchMove);
$(document).on("touchend", this._touchEnd);
}

OffcanvasTouch.prototype._touchStart = function(e) {
return this.startX = e.originalEvent.touches[0].pageX;
};

OffcanvasTouch.prototype._touchMove = function(e) {
var x;
if ($(e.target).parents('.navbar-offcanvas').length > 0) {
return true;
}
if (this.startX > this.startThreshold && this.startX < this.maxStartThreshold) {
e.preventDefault();
x = e.originalEvent.touches[0].pageX - this.startX;
x = this.element.hasClass('navbar-offcanvas-right') ? -x : x;
if (Math.abs(x) < this.element.outerWidth()) {
this.element.css(this._getCss(x));
return this.element.css(this._getFade(x));
}
} else if (this.element.hasClass('in')) {
e.preventDefault();
x = e.originalEvent.touches[0].pageX + (this.currentX - this.startX);
x = this.element.hasClass('navbar-offcanvas-right') ? -x : x;
if (Math.abs(x) < this.element.outerWidth()) {
this.element.css(this._getCss(x));
return this.element.css(this._getFade(x));
}
}
};

OffcanvasTouch.prototype._touchEnd = function(e) {
var end, x;
if ($(e.target).parents('.navbar-offcanvas').length > 0) {
return true;
}
x = e.originalEvent.changedTouches[0].pageX;
end = this.element.hasClass('navbar-offcanvas-right') ? Math.abs(x) > (this.endThreshold + 50) : x < (this.endThreshold + 50);
if (this.element.hasClass('in') && end) {
this.currentX = 0;
this.element.removeClass('in').css(this._clearCss());
} else if (Math.abs(x - this.startX) > this.endThreshold && this.startX > this.startThreshold && this.startX < this.maxStartThreshold) {
this.currentX = this.element.hasClass('navbar-offcanvas-right') ? -this.element.outerWidth() : this.element.outerWidth();
this.element.toggleClass('in').css(this._clearCss());
} else {
this.element.css(this._clearCss());
}
return this.offcanvas.bodyOverflow();
};

OffcanvasTouch.prototype._getCss = function(x) {
x = this.element.hasClass('navbar-offcanvas-right') ? -x : x;
return {
"-webkit-transform": "translate3d(" + x + "px, 0px, 0px)",
"-webkit-transition-duration": "0s",
"-moz-transform": "translate3d(" + x + "px, 0px, 0px)",
"-moz-transition": "0s",
"-o-transform": "translate3d(" + x + "px, 0px, 0px)",
"-o-transition": "0s",
"transform": "translate3d(" + x + "px, 0px, 0px)",
"transition": "0s"
};
};

OffcanvasTouch.prototype._getFade = function(x) {
if (this.fade) {
return {
"opacity": x / this.element.outerWidth()
};
} else {
return {};
}
};

OffcanvasTouch.prototype._clearCss = function() {
return {
"-webkit-transform": "",
"-webkit-transition-duration": "",
"-moz-transform": "",
"-moz-transition": "",
"-o-transform": "",
"-o-transition": "",
"transform": "",
"transition": "",
"opacity": ""
};
};

return OffcanvasTouch;

})();

Offcanvas = (function() {
function Offcanvas(element) {
var t, target;
this.element = element;
this.bodyOverflow = __bind(this.bodyOverflow, this);
this._sendEventsAfter = __bind(this._sendEventsAfter, this);
this._sendEventsBefore = __bind(this._sendEventsBefore, this);
this._documentClicked = __bind(this._documentClicked, this);
this._clicked = __bind(this._clicked, this);
target = this.element.attr('data-target') ? this.element.attr('data-target') : false;
if (target) {
this.target = $(target);
if (this.target.length && !this.target.hasClass('js-offcanas-done')) {
this.element.addClass('js-offcanvas-has-events');
this.location = this.target.hasClass("navbar-offcanvas-right") ? "right" : "left";
this.target.addClass(transform ? "offcanvas-transform js-offcanas-done" : "offcanvas-position js-offcanas-done");
this.target.data('offcanvas', this);
this.element.on("click", this._clicked);
$(document).on("click", this._documentClicked);
if (this.target.hasClass('navbar-offcanvas-touch')) {
t = new OffcanvasTouch(this.target, this.location, this);
}
this.target.find(".dropdown-toggle").each(function() {
var d;
return d = new OffcanvasDropdown(this);
});
}
} else {
console.warn('Offcanvas: `data-target` attribute must be present.');
}
}

Offcanvas.prototype._clicked = function(e) {
e.preventDefault();
this._sendEventsBefore();
$(".navbar-offcanvas").removeClass('in');
this.target.toggleClass('in');
return this.bodyOverflow();
};

Offcanvas.prototype._documentClicked = function(e) {
var clickedEl;
clickedEl = $(e.target);
if (!clickedEl.hasClass('offcanvas-toggle') && clickedEl.parents('.offcanvas-toggle').length === 0 && clickedEl.parents('.navbar-offcanvas').length === 0 && !clickedEl.hasClass('navbar-offcanvas')) {
if (this.target.hasClass('in')) {
e.preventDefault();
this._sendEventsBefore();
this.target.removeClass('in');
return this.bodyOverflow();
}
}
};

Offcanvas.prototype._sendEventsBefore = function() {
if (this.target.hasClass('in')) {
return this.target.trigger('show.bs.offcanvas');
} else {
return this.target.trigger('hide.bs.offcanvas');
}
};

Offcanvas.prototype._sendEventsAfter = function() {
if (this.target.hasClass('in')) {
return this.target.trigger('shown.bs.offcanvas');
} else {
return this.target.trigger('hidden.bs.offcanvas');
}
};

Offcanvas.prototype.bodyOverflow = function() {
this._sendEventsAfter();
return $("body").css({
overflow: this.target.hasClass('in') ? 'hidden' : '',
position: this.target.hasClass('in') ? 'fixed' : ''
});
};

return Offcanvas;

})();

transformCheck = (function(_this) {
return function() {
var asSupport, el, regex, translate3D;
el = document.createElement('div');
translate3D = "translate3d(0px, 0px, 0px)";
regex = /translate3d\(0px, 0px, 0px\)/g;
el.style.cssText = "-webkit-transform: " + translate3D + "; -moz-transform: " + translate3D + "; -o-transform: " + translate3D + "; transform: " + translate3D;
asSupport = el.style.cssText.match(regex);
return _this.transform = asSupport.length != null;
};
})(this);

$(function() {
transformCheck();
$('[data-toggle="offcanvas"]').each(function() {
var oc;
return oc = new Offcanvas($(this));
});
return $('.offcanvas-toggle').each(function() {
return $(this).on('click', function(e) {
var el, selector;
if (!$(this).hasClass('js-offcanvas-has-events')) {
selector = $(this).attr('data-target');
el = $(selector);
if (el) {
el.removeClass('in');
return $('body').css({
overflow: '',
position: ''
});
}
}
});
});
});

}).call(this);

@CHARSET "UTF-8";@media (max-width: 767px){.navbar-offcanvas{position:fixed;height:100%;width:250px;max-width:100%;left:-250px;top:0px;z-index:999;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-transition:all 0.15s ease-in;-moz-transition:all 0.15s ease-in;-o-transition:all 0.15s ease-in;transition:all 0.15s ease-in;}.navbar-offcanvas.in{box-shadow:0px 0px 20px black;box-shadow:0px 0px 20px rgba(0, 0, 0, 0.3);}.navbar-offcanvas.navbar-offcanvas-fade{opacity:0;}.navbar-offcanvas.navbar-offcanvas-fade.in{opacity:1;}.navbar-offcanvas.offcanvas-transform.in{-webkit-transform:translate3d(250px, 0px, 0px);-moz-transform:translate3d(250px, 0px, 0px);-o-transform:translate3d(250px, 0px, 0px);transform:translate3d(250px, 0px, 0px);}.navbar-offcanvas.offcanvas-position.in{left:0px;}.navbar-offcanvas.navbar-offcanvas-right{left:auto;right:-250px;}.navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in{-webkit-transform:translate3d(-250px, 0px, 0px);-moz-transform:translate3d(-250px, 0px, 0px);-o-transform:translate3d(-250px, 0px, 0px);transform:translate3d(-250px, 0px, 0px);}.navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in{left:auto;right:0px;}.navbar-offcanvas .dropdown.active .caret{border-top:0px;border-bottom:4px solid;}.navbar-offcanvas .dropdown-menu{position:relative;display:block;width:100%;background:inherit;border:inherit;box-shadow:none;padding:0px;overflow:hidden;-webkit-transition:all 0.15s ease-in;-moz-transition:all 0.15s ease-in;-o-transition:all 0.15s ease-in;transition:all 0.15s ease-in;height:0px;}.navbar-offcanvas .dropdown-menu.shown{height:auto;}.navbar-offcanvas .dropdown-menu>li>a{color:#777;padding:5px 15px 5px 30px;}}.offcanvas-toggle{background:#f8f8f8;}.offcanvas-toggle .icon-bar{background:#000;}.offcanvas-toggle.offcanvas-toggle-close{margin-right:0px;}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(1){-webkit-transform:rotate(45deg) translate(5px, 4px);-moz-transform:rotate(45deg) translate(5px, 4px);-o-transform:rotate(45deg) translate(5px, 4px);transform:rotate(45deg) translate(5px, 4px);}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(2){opacity:0 !important;}.offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(3){-webkit-transform:rotate(-45deg) translate(4px, -4px);-moz-transform:rotate(-45deg) translate(4px, -4px);-o-transform:rotate(-45deg) translate(4px, -4px);transform:rotate(-45deg) translate(4px, -4px);}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航