Как получить Anchor Links для работы в JQuery Mobile?

JQuery Mobile решил рассматривать привязку ссылок как сортировку страниц. Однако это не очень хорошо, если у вас есть загрузка сообщений в блоге, у которых есть привязывающие ссылки на одну и ту же страницу (например, href= "# specs" ).

Есть ли способ отключить использование ссылок на привязку мобильного jquery на определенной странице, которую я знаю, я не буду использовать ее, чтобы использовать якорные ссылки, как они были предназначены, чтобы перейти к части страницы?

Мне нужно только решение для привязки ссылок на одной странице (например: href= "# specs" ).

спасибо

Ответы

Ответ 1

Вы можете попробовать добавить data-ajax="false" в тег привязки.

Связь без Ajax

Ссылки, указывающие на другие домены или имеющие rel= "external" , data-ajax = "false" или целевые атрибуты не будут загружаться с помощью Ajax. Вместо этого эти ссылки вызовут полное обновление страницы без анимированных переход. Оба атрибута (rel= "external" и data-ajax = "false" ) имеют такой же эффект, но различный смысловой смысл: rel= "external" следует использовать при подключении к другому сайту или домену, в то время как data-ajax = "false" полезно для простого выбора страницы в вашем домена от загрузки через Ajax. Из-за ограничений безопасности, структура всегда выбирает ссылки на внешние домены из Ajax поведение.

Ссылка - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

Ответ 2

Если вы похожи на меня, конвертируйте существующий сайт, и вы не хотите проходить через каждую страницу прямо сейчас. Вы можете добавить одну строку кода в свой заголовок, а весь ваш заголовок, а все существующие внутренние ссылки привязки получат добавленный тег data-ajax = "false".

Конечно, это предполагает, что вы уже включили свой собственный файл javascript в заголовок. Если вы этого не сделаете, вам все равно придется прикоснуться к каждой странице. Но у меня есть один файл javascript, который уже включен в каждую страницу, поэтому я добавил эту строку...

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

Это относится к вашему блоку $(document).ready(). Если у вас еще нет этого блока, вот весь блок.

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

Надеюсь, это поможет. Это то же самое решение user700284, но автоматическим способом.

Ответ 3

Вы можете добавить следующий код в конец своей страницы:

 <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>

И добавьте класс "native-anchor" в ваши якорные ссылки.

Это не полное решение, потому что кнопка "Назад" вашего браузера перенесет вас на предыдущую страницу, а не на позицию ссылки, но лучше, чем ссылки, которые не работают вообще.

Я нашел это решение здесь: jQuery Mobile Anchor Linking

Ответ 4

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

Ответ 5

Сначала вы должны поместить этот код в файл custom.js

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

Затем добавьте этот файл на свою веб-страницу до загрузки jquery mobile js. потому что событие 'mobilinit' запускается немедленно

Ответ 6

Спасибо. это решение работало для меня

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

Я заменил # на index.php, который является моим корнем в документе. Но это не работает для кнопки формы i.e input type="submit"