1

jqueryモバイルページにリンクボタンを追加しようとしています:

http://jsfiddle.net/8JXTT/1/

ボタンが正しく生成されていません。リンクは生成されていますが、ボタン自体は生成されていません。css クラスがありませんか?

コード :

<div data-role="page" id="firstpage">

        <div data-role="header">
                <h1>First Page</h1>
        </div>

<div data-role="content" id="links">
        <a href="#secondpage" data-role="button">Link button</a>
</div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>

</div>

<div data-role="page" id="secondpage">

        <div data-role="header">
                <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
        </div>

        <div data-role="content">
                <p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
                <p><a href="#thirdpage">Go to third page</a></p>
        </div>

        <div data-role="footer">
                <h4>Page Footer</h4>
        </div>
</div>
​$(document).ready(function() {

$('#links').append('<a href="#secondpage" data-role="button" data-theme="c">Link Button</a>');

    });

</p>

4

2 に答える 2

4

ajQuery mobileはスタイリングの目的で構造を変更するため、タグを追加するだけでは問題は解決しません。したがって.clone()、既存のタグを変更して、そのタグを変更する必要がありtextます。

$(document).ready(function() {
    var linkButton = $('#links a').clone(true);
    linkButton.find('span.ui-btn-text').text('Link Button2');
    $('#links').append(linkButton);
});

しかし、1つのメモ

上記のコードは既存のaタグのクローンを作成しているので、a持っているid場合はid複製が発生します。したがって、idをclass（存在する場合）に変更します。

デモ

素晴らしいコメントをありがとう@omar

于 2012-07-18T15:52:05.760 に答える
1

インスタンス化する必要があります。ページが読み込まれた後、他のボタンがインスタンス化されます。次に、他のリンクを追加しています。

リンクを追加したら、そのリンクで関数を呼び出す必要があります。 

$("a").button();

既に設定されているものと区別するために呼び出す ID またはクラスを指定すると、より簡単になります。

編集：インスタンス化されたというのはおそらく間違った用語です。関数を呼び出して、その新しいリンクにスタイルを適用するだけです。

$(document).ready(function() {
    $('#links').append('<a href="#secondpage" data-role="button" data-theme="a">Link Button</a>');
    $('a[data-role=button]').button();
});​
于 2012-07-18T15:53:48.220 に答える