onsenUIとjQueryを共存させる方法

現在クロスプラットフォームのmonacaを使ってあるアプリを作成しようとしているところなのですけど、onsenUIやAnglarJSなど未経験のフレームワークを使うことにしました。

しかし、onsenUIとjQueryを共存させることに長いこと手間取っていました。
本を読んでも、ネットで調べてみてもなかなか親切な解説に出会わなかったのですが、先程、たまたま上手く行ったのでメモしておきます。


あまり関係ないですけどテンプレートはOnsen UI V1 Sliding Menuを使いました。
まず、
・jQuery (Monaca Version) バージョン:2.0.3
・Onsen UI (Monaca Version) バージョン:1.3.17
の2つを設定>JS/CSSコンポーネントの追加と削除..
から追加しておきます。

まずindex.htmlここはあまり重要ではないです。

 

テンプレートからの変更点はもともとありました。

を消して「jikan.js」へのリンクを付けているとこのみ。

 

特筆すべき点はコンポーネントからjQueryなどを読み込んでいるので、わざわざ自分でjQueryを読み込むための1行を記述スルスル必要が無いということです。

 

そしてページ1でもページ2でも適当に変化をわかりやすくボックスを追加してみます。

 

css

 

そして、重要なのはここ。
jikan.jsに以下を記述。

これでさっきのボックスをクリックしたら黒から赤へ変わります。

上のjQueryの部分ですが

だと機能しないっぽいです。

それと、

をわざわざindex.htmlからjikan.jsに移した理由は、簡潔になるっていうのもあるんですけど、もしこの記述が一文字抜けてたり、そもそもなかったりするとonsenUIで書かれた部分が表示されないんだけど、これをjikan.jsに移すことでちゃんとjikan.jsが読み込まれているかどうかをたしかめることができます。

 

んで最後にこれに関しての説明。

これはOnsenUIコンポーネントの読み込みが完了し、Cordovaのdevicereagyのあとに発生するので、OnsenUIの準備が完了した後に実行されます。

コメントを残す