0

jQuery Mobile を使用して、モバイル アプリでリンクされていないボタンを使用しようとしています。ボタンをタップ可能にしたいのですが、デフォルトの ajax 動作の代わりに独自の動作を使用したいと思います。

ただし、何かにリンクされていないボタンをタップしても、フィードバックはありません。つまり、CSS が押された状態に変化してから再び戻ることはありません。有効な href を持つリンクまたはフォーム内にあるリンクをタップすると、機能します。

奇妙なことに、私のデスクトップ ブラウザでリンクをクリックすると、ボタンをタップするのと同じではありませんが、変更が呼び出されます。デフォルトの CSS パッケージでは、ボタンをタップしてフォームを送信するか、次のページに進むと、ボタンが一時的に青色に変わります。デスクトップでそれらをクリックすると、灰色のホバー状態になるため、どのブラウザーでも実際には機能していないように見えます。

ボタンが実際にどこにもリンクしていなくても、タップに応答する簡単なボタンを取得する方法を知っている人はいますか?

編集: iOS と Android の両方でこれを試してみたところ、同じ結果が得られました。

<!DOCTYPE html>
<html>
    <head> 
        <title>My Page</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>
    </head>

    <body>

        <div data-role="page" id="startpage">
            <div data-role="header" data-theme="c">
                <h1>Button Test</h1>
            </div>
            <div data-role="content">
                <button id="test1">Test 1</button>
                <button data-role="button" id="test2">Test 2</button>
                <a data-role="button" id="test3">Test 3</a>
                <a data-role="button" href="" id="test4">No href</a>
                <a data-role="button" href="#" id="test5">href=#</a>
                <a data-role="button" href="#page2" id="test6">This works because it's linked</a>
                <form method="get" action="index2.html">
                    <input type="text" name="name" placeholder="Name"/>
                    <button type="submit" value="No tap change here either"></button>
                </form>
            </div><!-- /content -->
        </div><!-- /page -->

        <div data-role="page" id="page2">
            <div data-role="header" data-theme="c">
                <h1>Page 2</h1>
            </div>
            <div data-role="content">Linked buttons work</div>
        </div>

    </body>
</html>
4

1 に答える 1

1

OK jQuery Mobile issue tracker にバグを登録することになりましたが、これは既知の問題のようです。

https://github.com/jquery/jquery-mobile/issues/5009 https://github.com/jquery/jquery-mobile/issues/4469

回避策は、次のようなリンク ボタンを使用することです。

<a href="javascript:void(0)" data-role="button">Click me</a>

これにより、ボタンは実際にはどこにも行かず、何もしなくても、ユーザーにフィードバックを返します。

彼らは v1.3 でこれを修正することを検討しています。

于 2012-09-16T01:52:08.183 に答える