Monacaでフレームワークmobiscrollの使用でdata-iconが表示されない

前提・実現したいこと

開発環境：Monaca
Monacaを使用してMobiscrollを利用したいと考えております。
（Onsenuiより好みのUIのためmobiscrollを使用したいと考えております。）
mobiscroll

発生している問題・エラーメッセージ

動作はするのですが、Jqueryのdata-iconが表示されません。

MonacaではMobiscrollは使用できないのでしょうか？
ご存じの方おりましたら、教えてください。

該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <link rel="stylesheet" href="components/loader.css">
8    <link rel="stylesheet" href="css/style.css">
9    <link rel="stylesheet" href="css/mobiscroll/app.css">
10    <link rel="stylesheet" href="css/mobiscroll/mobiscroll.javascript.min.css">
11
12    <script src="components/loader.js"></script>
13    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
14    <script src="js/mobiscroll/app.js"></script>
15    <script src="js/mobiscroll/mobiscroll.javascript.min.js"></script>
16</head>
17<body>
18    <div class="app-page" mbsc-enhance style="display:none;">
19        <div id="tab-home" class="app-tab app-tab-active app-tab-home">
20            <div class="app-header">
21                <h1>Home</h1>
22            </div>
23        </div>
24
25        <ul id="tabs">
26            <li data-tab="home" data-icon="home" data-selected="true">Home</li>
27            <li data-tab="settings" data-icon="cogs">Settings</li>
28            <li data-tab="profile" data-icon="user4">Profile</li>
29        </ul>
30    </div>
31</body>
32</html>
33

taiyakix

2019/12/07 21:27

なんでonsen uiを嫌いになったんですか？

HML

2019/12/08 02:44

onsen uiを嫌いになったわけではなく、mobiscrollのuiが単純に好みであっただけです。別のアプリではonsenuiを使用しています。

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

回答1件

ベストアンサー

表示されないとは言いつつアイコンがスクショに写っているのはなぜかわかりませんが、要するに下に3つアイコンが並ばないということですよね。Monacaでmobiscrollは使えます。あなたが、iconをボタンとして使いたいだけだったら、onclick属性をつければいいと思います。そしてそもそも、class属性にhomeなどとボタンの種類を書かなきゃいけないらしいです。あと、material uiのアイコンの方でもいいかと思います

投稿2019/12/07 21:27

taiyakix

総合スコア427