README

Slideout 小部件 是对 slideout.js 插件 的封装，

...为您的移动网页应用提供触摸式滑出导航菜单。

安装

通过 composer 安装此扩展是首选方式。

运行以下命令

php composer.phar require --prefer-dist raoul2000/yii2-slideout-widget "*"

或在您的 composer.json 文件的 require 部分添加

"raoul2000/yii2-slideout-widget": "*"

以下内容。

使用方法

使用 Slideout 小部件很简单：您需要一些标记和 CSS（以下代码片段来自 sideout.js 演示网站）

标记

<nav id="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

<main id="panel">
  <header>
    <h2>Panel</h2>
  </header>
</main>

CSS

html,
body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  display: none;
}

.slideout-panel {
  position:relative;
  z-index: 1;
}

.slideout-open,
.slideout-open body {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

然后是 Slideout 小部件，以及在页面中的某个位置放置一个打开/关闭菜单的按钮

<?php
 	echo raoul2000\widget\slideout\Slideout::widget([
	'pluginOptions' => [
		'panel' =>  new yii\web\JsExpression("document.getElementById('panel')"),
		'menu' => new yii\web\JsExpression("document.getElementById('menu')"),
		'padding' => 256,
		'tolerance' => 70
	]
]); 

?>
<!-- This button will open/close the side menu -->
<button onclick="yii2_raoul2000_slideout.toggle();">toggle menu</button>

由小部件创建的 JavaScript 变量 yii2_raoul2000_slideout 可以让您从页面中的任何位置访问滑出菜单实例。在上面的示例中，onclick 处理程序调用了 slideout API 的一部分 toggle()。

您还可以注意，选项 panel 和 menu 都期望是 JS 对象（而不是选择器）。

有关插件选项的更多信息，请参阅 slideout github 页面。

替代方案

• yii2-jpanelmenu-widget
• yii2-sidr-widget

许可证

yii2-slideout-widget 在 BSD 3-Clause 许可证下发布。有关详细信息，请参阅打包的 LICENSE.md 文件。