![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>响应式手机App样式隐藏侧边栏特效插件</title>
<link rel="stylesheet" href="demos/libs/bootstrap.min.css">
<link rel="stylesheet" href="demos/libs/slidebars.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="demos/libs/demos.css">
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div canvas="container" class="close-any main-content">
<!-- Main content -->
<header class="htmleaf-header">
<h1>响应式手机App样式隐藏侧边栏特效插件 <span> A jQuery framework for off-canvas menus and sidebars</span></h1>
</header>
<!-- <h1>Slidebars Examples <small>All Four Sides</small></h1> -->
<p>This example has four Slidebars one on each side with pre-defined classes for complete control.</p>
<div class="btn-group">
<div class="btn btn-default open-left">Open left</div>
<div class="btn btn-default toggle-left">Toggle left</div>
<div class="btn btn-default close-left">Close left</div>
</div>
<div class="btn-group">
<div class="btn btn-default open-right">Open right</div>
<div class="btn btn-default toggle-right">Toggle right</div>
<div class="btn btn-default close-right">Close right</div>
</div>
<div class="btn-group">
<div class="btn btn-default open-top">Open top</div>
<div class="btn btn-default toggle-top">Toggle top</div>
<div class="btn btn-default close-top">Close top</div>
</div>
<div class="btn-group">
<div class="btn btn-default open-bottom">Open bottom</div>
<div class="btn btn-default toggle-bottom">Toggle bottom</div>
<div class="btn btn-default close-bottom">Close bottom</div>
</div>
<div class="btn-group">
<div class="btn btn-default close-any">Close any</div>
</div>
</div>
<div off-canvas="sb-1 left reveal">
<!-- Left Slidebar content -->
</div>
<div off-canvas="sb-2 right push">
<!-- Right Slidebar content -->
</div>
<div off-canvas="sb-3 top overlay">
<!-- Top Slidebar content -->
</div>
<div off-canvas="sb-4 bottom reveal">
<!-- Bottom Slidebar content -->
</div>
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script src="demos/libs/slidebars.js"></script>
<script>
( function ( $ ) {
$( document ).ready( function () {
// Create a new instance of Slidebars
var controller = new slidebars();
// Initialize Slidebars
controller.init();
/**
* Control Classes
*/
// Open left
$( '.open-left' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Open Slidebar
controller.open( 'sb-1' );
} );
// Toggle left
$( '.toggle-left' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Toggle Slidebar
controller.toggle( 'sb-1' );
} );
// Close left
$( '.close-left' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Close Slidebar
controller.close( 'sb-1' );
} );
// Open right
$( '.open-right' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Open Slidebar
controller.open( 'sb-2' );
} );
// Toggle right
$( '.toggle-right' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Toggle Slidebar
controller.toggle( 'sb-2' );
} );
// Close right
$( '.close-right' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Close Slidebar
controller.close( 'sb-2' );
} );
// Open top
$( '.open-top' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Open Slidebar
controller.open( 'sb-3' );
} );
// Toggle top
$( '.toggle-top' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Toggle Slidebar
controller.toggle( 'sb-3' );
} );
// Close top
$( '.close-top' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Close Slidebar
controller.close( 'sb-3' );
} );
// Open bottom
$( '.open-bottom' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Open Slidebar
controller.open( 'sb-4' );
} );
// Toggle bottom
$( '.toggle-bottom' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Toggle Slidebar
controller.toggle( 'sb-4' );
} );
// Close bottom
$( '.close-bottom' ).on( 'click', function ( event ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Close Slidebar
controller.close( 'sb-4' );
} );
// Close any
$( '.close-any' ).on( 'click', function ( event ) {
// Check if a Slidebar is open
if ( controller.active( 'slidebar' ) ) {
// Stop default behaviour and propagation
event.preventDefault();
event.stopPropagation();
// Close any Slidebar
controller.close();
}
} );
} );
} ) ( jQuery );
</script>
</body>
</html>*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
