質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3419閲覧

drawer を実装できない

su_da221

総合スコア59

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/05/31 09:10

編集2019/05/31 09:13

drawerのプラグインを行いたいです

HTML

1<body class="drawer drawer--left"> 2 <div class="div"> 3 <header role="banner"> 4 <div class="header"> 5 <div class="headerleft"> 6 <img src="img/logo.png" alt="logo"> 7 </div> 8 <div class="headerright"> 9 <button type="button" class="drawer-toggle drawer-humburger"> 10 <span class="sr-only">toggle navigation</span> 11 <span class="drawer-humburger-icon"></span> 12 </button> 13 <nav class="drawer-nav" role="navigation"> 14 <ul class="drawer-menu"> 15 <li><a href="#" class="drawer-brand">brand</a></li> 16 <li><a href="#card" class="drawer-menu-item">Card</a></li> 17 <li><a href="#news" class="drawer-menu-item">News</a></li> 18 <li><a href="#price" class="drawer-menu-item">Price</a></li> 19 <li><a href="#access" class="drawer-menu-item">Access</a></li> 20 <li><a href="#contact" class="drawer-menu-item">Contact</a></li> 21 </ul> 22 </nav> 23 </div> 24 </div> 25 </header> 26 <main role="main"> 27

HTML

1 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 2 <script src="js/script.js"></script> 3 <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 4<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 5<script type="text/javascript" src="js/slick/slick.min.js"></script> 6<script type="text/javascript" src="js/drawer.js"></script>

ここまでは検証のコンソールにはエラーは出てません。

javascript

1$(function(){ 2 $('.read').css('color','red'); 3 $('.your-class').slick( { 4 }); 5 $('.drawer').drawer(); 6});

これを打つと

jquery-3.3.1.slim.min.js:2 jQuery.Deferred exception: IScroll is not defined ReferenceError: IScroll is not defined

at HTMLBodyElement.refresh (http://127.0.0.1:5500/js/drawer.js:80:26) at HTMLBodyElement.instantiateDrawer (http://127.0.0.1:5500/js/drawer.js:54:22) at Function.each (http://code.jquery.com/jquery-1.11.0.min.js:2:2969) at e.fn.init.each (http://code.jquery.com/jquery-1.11.0.min.js:2:845) at e.fn.init.init (http://127.0.0.1:5500/js/drawer.js:45:19) at e.fn.init.drawer (http://127.0.0.1:5500/js/drawer.js:167:22) at HTMLDocument.<anonymous> (http://127.0.0.1:5500/js/script.js:5:16) at l (https://code.jquery.com/jquery-3.3.1.slim.min.js:2:29567) at c (https://code.jquery.com/jquery-3.3.1.slim.min.js:2:29869) undefined

w.Deferred.exceptionHook @ jquery-3.3.1.slim.min.js:2
jquery-3.3.1.slim.min.js:2 Uncaught ReferenceError: IScroll is not defined
at HTMLBodyElement.refresh (drawer.js:80)
at HTMLBodyElement.instantiateDrawer (drawer.js:54)
at Function.each (jquery-1.11.0.min.js:2)
at e.fn.init.each (jquery-1.11.0.min.js:2)
at e.fn.init.init (drawer.js:45)
at e.fn.init.drawer (drawer.js:167)
at HTMLDocument.<anonymous> (script.js:5)
at l (jquery-3.3.1.slim.min.js:2)
at c (jquery-3.3.1.slim.min.js:2)

とエラーが出てきてしまいドロワーは実装されません。これが実際の画面です
エラー部分は何か確認すると js の$('.drawer').drawer();についてでした
ちなみに文字が赤いのはjsが実装されてるか確認するためのものです。
使い方ページを見てもなぜできないのかわかりませんので教えてください

プラグインファイルは
プロジェクトファイル>index.html

img
css
js>(スライダーのプラグイン).js
drawer.js

となっています。

エラーの理由と改善方法を知りたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

IScrollの定義がありません、というエラーが出ていますね。

公式ドキュメントによると、iScroll.jsも必要なようです。

Drawer - Flexible drawer menu using jQuery, iScroll and CSS.

これで解決されたでしょうか?

投稿2019/05/31 20:04

HAC

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問