Materializeのinitializationのやり方

Materializeでセレクトボックスが反映されません。
調べてみるとinitializationを書かなければならないようなのですが、JavaScriptを使ったことがなくどのように描けば良いかわかりません。

公式ホームページ
https://materializecss.com/select.html

language-javascript

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('select').formSelect();
  });

自分でlanguage-javascript.jsを作らなければならないのでしょうか。
詳しい人がいれば教えてくださると光栄です

行動規範の内容に同意します

回答1件

ベストアンサー

自分でlanguage-javascript.jsを作らなければならないのでしょうか。

ちょっとこれだけだと意味が分かりませんが、おそらく「ちょっと解釈が違う」ですね。

Materializeでは入力コンポーネントは大体何かの要素に置き換えられています。

ブラウザ開発ツールで見てみるとわかりますが、

上記のように、selectタグで準備したものがinput text＋ULに置き換えられています。
selectタグにはtabindex=-1がつけられていますね。
これは、Materializeが提供する様々な動きに対応するため、と、ブラウザによる挙動の違いを吸収するためにそのようになっている（と思います）

ですので、これを反映するためにMaterializeの本体CSSだけではなく、
本体JSファイルを読み込んだうえで「この要素にこのMaterializeの機能を使うよ」という宣言をする必要があるわけです。

Initializationは「初期設定」なので、上記の宣言をすることで初期設定がされて、Materializeのコンポーネントができあがって画面に表示される、というわけですね。
これは他のコンポーネントでも概念は同じです。

今回のセレクトボックスだけを対応するミニマムコードは以下のような感じです（CDNで対応しました）

html
1<html lang="ja">
2  <head>
3    <title>Select</title>
4    <meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no">
5    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
6  </head>
7  <body>
8    <div class="input-field col s12">
9      <select>
10        <option value="" selected>Choose your option</option>
11        <option value="1">Option 1</option>
12        <option value="2">Option 2</option>
13        <option value="3">Option 3</option>
14      </select>
15      <label>Materialize Select</label>
16    </div>
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
18    <script>
19  document.addEventListener('DOMContentLoaded', function() {
20    var elems = document.querySelectorAll('select');
21    var instances = M.FormSelect.init(elems,[]);
22  }); 
23</script>
24  </body>
25</html>

オプションとかはありますが今回何もオプションつけずにデフォルトのみで対応しています。（init()の[]のところ）

画面表示

つまり、「Initializationにある初期設定記述を本体JSの読み込み記述の後に記述する」だけです。

// Or with jQueryはjQueryというJavaScriptのライブラリがあるのですが、そのライブラリを使った記述の仕方、ということですね。
orなのでどちらかで対応すると良いです。

language-javascript.jsというのがどこから出てきたものか分からないですが（少なくとも公式ドキュメント内には見受けられませんでした）
もしInitializationを外部JSファイルにするというのでしたらその部分を切り出してそのJSファイルを今回Initialization書いた位置と同じ位置で読み込ませる必要があります。

投稿2019/05/22 00:20

m.ts10806

総合スコア80875

morimi714

2019/05/22 00:31

すごくわかりやすい説明で、わざわざ画像もつけていただきありがとうございました！無事に動きました！

m.ts10806

2019/05/22 00:35

私も最初はCSSフレームワーク導入時に苦労したところでもあります。理解につながったようで何よりです。 MaterializeはガッツリJavaScriptを使っているCSSフレームワークなのでオプションの設定の仕方でまた悩むところはあるかもしれませんが、マニュアルは結構丁寧に書いてあると思うので、読みつつ色々やってみてください。

行動規範の内容に同意します