最近流行りつつあるDrawer（ボタンを押すと横からニュンと出てくるあのメニュー）、遅ればせながら試してみました。
ライブラリ自体は、いろいろあるみたいですが、まずはそのものズバリな名前の「Drawer」を使いました。バージョンは現時点最新の3.2.2。うねうね動いて楽しい感じです。
ただ導入にあたって少々トラブルが生じましたのでそのお話を…
Drawerを動作させるためには以下のライブラリが必要となります。
- iScroll
- jQuery
- （たぶん）Bootstrap
… 公式には書いてありませんがデモでは使っていました、サブメニューを開いたりするのに使う？
そして今回は、このjQuery・Bootstrapのバージョンが問題でした。試した環境には、既にjQuery 3.2.1、Bootstrap 4-alpha.6を入れておりました。ところがどうも動かない。サブメニューが開かない。エラーを見るとSyntax error, unrecognized expression: #が、といったメッセージが表示されます。これは困りました。
そこで公式のドキュメントを見直しますとjQueryは1.11.3+、Bootstrapはデモによると3.3.7。なのでそちらにバージョンダウンしたところ見事に動きました！バージョン違いの問題だったんですね〜
せっかくなので、どれくらいまでならバージョンを挙げられるか試してみました。繰り返しですが、対象は、現時点最新のDrawer 3.2.2です。
- jQuery 1.* ： 1.12.4（現時点最新）
- jQuery 2.* ： 2.2.4（現時点最新）
- jQuery 3.* ： 利用不可（最古の3.0.0、最新の3.2.1、どちらも同じエラーでダメでした）
- Bootstrap 3.* ： 3.3.7
- Bootstrap 4.* ： 4.0.0-alpha.5（現時点最新の4.0.0-alpha.6はNG）
注意としては、「jQueryの3系」「Bootstrap 4.*の最新」が使えないところでしょうか。jQueryはともかくBootstrap4が意外でした。同じalphaでもひとつ違うだけで随分違うみたいですね。便利なDrawerですが、依存ライブラリのバージョンにはご注意ください！