2012-02-25 11 views
20

Jquery Mobileはアンカーリンクを並べ替えのページリクエストとして扱うことに決めました。ただし、同じページ(つまりhref = "#specs")へのアンカーリンクを持つブログ投稿の負荷がある場合、これはうまくいかないでしょう。Jchery Mobileで動作するアンカーリンクを取得するには?

特定のページでjquery mobileのアンカーリンクの使用を無効にする方法はありますか?私はそれを使用しません。そのため、アンカーリンクを意図したとおりに使用してページの一部にドロップすることができます?

私は同じページのアンカーリンク(例:href = "#specs")の解決策のみが必要です。

おかげ

答えて

42

あなたはアンカータグにdata-ajax="false"を追加してみてください。アヤックスせずに他のドメインまたはその持っているのrel =「外部」を指す

リンクのリンク

、 データAJAX =「false」をまたはターゲットの属性は、Ajaxがロードされることはありません。 代わりに、これらのリンクはアニメーションのないフルページの更新を引き起こします 。別のサイトまたはドメインにリンクするときは、rel = "external" を使用する必要がありますが、 data- ajax = "false"は、 ドメイン内のページをAjax経由でロードすることを単に選択すると便利です。セキュリティの制限のため、 フレームワークは、常にAjax の動作から外部ドメインへのリンクを選択します。

リファレンス - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

+1

ありがとう!!!!!! – capdragon

+0

私はそれを(アンカータグとは対照的に)リンクタグに置くことを意味すると思いますか? –

+0

これは、同じjqueryモバイルアプリケーション内の外部ページ(リンクではない)にリンクするときにも便利です。つまり、 'index.html'から' create.html#creations'へのリンクがあります。時にはJQMコマンドとして動作しますが、時にはそうではありません。したがって、 'data-ajax =" false "属性は素晴らしい解決策です。 – Francisco

2

あなたのページの末尾に次のコードを追加することができます。

<script type="text/javascript"> 
    $('a.native-anchor').bind('click', function(ev) { 
     var target = $($(this).attr('href')).get(0).offsetTop; 
     $.mobile.silentScroll(target); 
     return false; 
    }); 
</script> 

そして、あなたのアンカーリンクにクラス「ネイティブ・アンカー」を追加します。

ブラウザの[戻る]ボタンを使用すると、リンクの位置ではなく前のページに移動しますが、リンクしていないリンクよりも優れているからです。

私はここで、このsollutionが見つかりました:あなたは私のような場合は、既存のサイトを変換し、あなたが今、すべてのページを通過する必要はありません、jQuery Mobile Anchor Linking

+0

ページが別のページ(通常はJQueryモバイルの場合)からajaxでロードされている場合は、data-role = "page"要素の最後にコードを追加してください。 –

0
$(document).bind("mobileinit", function() { 
    $.mobile.ajaxEnabled = false; 
}); 
4

を。ヘッダーに1行のコードを追加すると、すべての既存の内部アンカーリンクにdata-ajax = "false"タグが追加されます。

もちろん、これはあなたが自分のjavascriptファイルをすでにヘッダに入れていることを前提としています。あなたがいない場合は、とにかくすべてのページに触れる必要があります。しかし、私はすでに、すべてのページに含まれる単一のJavaScriptファイルを持っているので、私はこの行を追加...

$("a").each(function() { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); }); 

これはあなたの$(ドキュメント).ready()ブロックに行きます。あなたがまだそのブロックを持っていなければ、ブロック全体がここにあります。

$(document).ready(function() { 
    $("a").each(function() { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); }); 
}); 

希望します。これは、user700284が提供するソリューションと同じですが、自動化されています。

-1

はありがとう 私

<script> 
    $(document).ready(function() { 
    $("a").each(function() { 
     if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false); 
    }); 
    }); 
</script> 

私は私のドキュメントルートをあるindex.php#を置き換えるために、このソリューションが働いていました。 しかし、それはあなたが

$(document).bind('mobileinit', function() { 
    $.mobile.loader.prototype.options.disabled = true; 
    $.mobile.ajaxEnabled = false; 
    $.mobile.linkBindingEnabled = false; 
    $.mobile.loadingMessage = false; 
}); 

その後custom.jsファイルにこのコードを配置しjqueryの携帯JSがある前に、あなたのウェブページにこのファイルを追加する必要がフォームのボタンIE用input type="submit"

0

まず動作しません。ロードされる。すぐに'mobilinit'イベントがトリガーされるので

関連する問題