0

私のサイトにタップイベントを追加しようとして、私のボタンがデスクトップとタブレットで動作するように jquery mobile を追加しました。

ただし、既存のすべてのボタンの横に余分なテキストが表示されるようになりました。jquery mobile を追加する前に、「カメラを追加」というボタンがありました。jquery mobile を追加すると、同じボタンがありますが、その横にはボタンと同じ名前のテキスト「カメラを追加」があります。

シンプルなボタン:

<button class="addwebcam">Add camera</button>

bind イベントを追加したかっただけです。

jQuery('.addwebcam').bind('click tap', function() {
    jQuery('#cameraformwebcam').show();
    jQuery('.addwebcam').hide();
});

HTML ソースを見ると、余分なテキストは表示されず、エラーも表示されません。

追加したことに注意してください：

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

他には何もありません。アイデア？

4

3 に答える 3

1

jQuery モバイル用のスタイルシート (CSS ファイル) が見つからないようです。

JQM ボタンを使用すると、追加のマークアップが DOM に導入されるため、スタイルシートを使用していない場合は、追加のマークアップのスタイルも設定する必要があります。

通常の HTML ボタンを jQuery モバイル ボタンに変換すると、次のようになります。

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Button element</span>
  </span>
  <button class="ui-btn-hidden" aria-disabled="false">Button element</button>
</div>

Gajortres がコメントで言及しているように、ソースを表示する代わりに DOM を検査して、JavaScript で作成された更新された DOM 要素を確認する必要があります。

于 2012-12-19T19:07:14.783 に答える
1

AFAIK: jQuery.mobile を過度ではない jQuery.mobile-build-site に追加しないでください。それは多くの問題で終わります。jQuery.mobile は html コードを解釈し、特にモバイル サイト向けに特別な処理を行います。

これに対する私の解決策は、ボタンに必要なものだけを含む新しい HTML ファイルを作成し、iframe を使用して元のページに配置することです。他の JavaScript と衝突しないための最も安全な解決策だと思います。

解決策の例を次に示します。まず、jquery.mobile() を必要とするボタンのファイルを作成します。

mobile.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
        <link type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css" rel="stylesheet" />

        <script type="text/javascript">
            jQuery(document).ready(function() {
                if (inIframe()) {
                    var $links = jQuery('a[href]');

                    $links.unbind('click').click(function(event) {
                        event.preventDefault();

                        var $this = jQuery(this);
                        var href = $this.attr('href');

                        window.parent.location.href = href;
                    });
                }
            });

            var inIframe = function() {
                return (top != self);
            };
        </script>

        <style type="text/css">
            [data-role="page"] {
                background-image: none;
                background-color: white;
            }
            [data-role="button"] {
                margin-left: 3px;
                margin-right: 3px;              
            }
        </style>
    </head>
    <body>
        <a href="http://stackoverflow.com/a/13959531/655224" data-role="button">Tutorial</a>
    </body>
</html>

index.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <style type="text/css">
            iframe {
                border: 0 none;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <iframe src="mobile.html" width="150" height="50" scrolling="no" />
    </body>
</html>

デモも見る

于 2012-12-19T19:17:14.287 に答える
0

私はそれをしました：

$('#button').parent().find('.ui-btn-text').text('');

それは私が望んでいたものではありませんでしたが、うまくいきました！:)

于 2013-01-04T16:12:03.637 に答える