0

jQuery Mobile で Flip Switchのデモ コードをコピーしようとしています。

<form>
    <div data-role="fieldcontain">
        <label for="flip-7">Flip toggle switch:</label>
        <select name="flip-7" id="flip-7" data-role="slider" data-mini="true">
            <option value="off">Off</option>
            <option value="on">On</option>
        </select>
    </div>
</form>

次のようなものを目指します。 画面キャプチャ

しかし、私は次のようなものになります： ここに画像の説明を入力

JQuery Mobile スクリプトがロードされていることを知っているので、気が狂いそうになりますが、彼らが主張するのと同じ結果が得られないようです。これは基本的にほとんどのアイテムで発生し、特にフォームとポップアップを処理します。私は授業などを試みますが、無駄です。

これについての参照のヒントはありますか？

4

2 に答える 2

1

今、私はあなたの問題を抱えています。それはあなたの問題ではなく、基本的な問題です.jqueryは、ランタイムではなくdomにある要素にのみ適用されます。この問題も私に起こりました. 2つの解決策があるかもしれません

.trigger("create")新しいコンテンツで要素を呼び出してみてください。

jQuery Mobile のドキュメントによると、「create イベントは、1 つ以上のウィジェットを含む生のマークアップを強化するのに適しています。」

または jquery.mobile を再度ロードします。

于 2013-03-01T07:07:08.337 に答える
0

Here's the entire code(tested in google chrome): Make sure you have kept javascript enabled on your browser.

<!DOCTYPE HTML>
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js'></script>
</head>
<body>
<form>
<div data-role="fieldcontain">
    <label for="flip-7">Flip toggle switch:</label>
    <select name="flip-7" id="flip-7" data-role="slider" data-mini="true">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
</div>
</form>
</body>
</HTML>
于 2013-03-01T06:32:14.770 に答える