Как заставить Anchor Links работать в Jquery Mobile?

Question

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

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

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

спасибо

Answer 1

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

Связывание без Ajax

Ссылки, которые указывают на другие домены или имеют отношение= "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

Answer 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); });
});

Надеюсь, это поможет.Это то же решение, которое предлагает пользователь 700004, но в автоматическом режиме.

Answer 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

Answer 4

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

Answer 5

// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
        $('a[href*="#component"]').each(function () {
            // then set data-ajax to false, 
            $(this).attr("data-ajax", false);
            // at this point you can add the class to your target a tags. 
            // You can do it elsewhere but because for this example my 
            // 'a' tags are automatically generated so I just add the class here
            $(this).addClass('in-pagelink');
            // then target the class and bind to a click event 
            $('a.in-pagelink').bind('click', function (ev) {
                // here I redirect the page with window.location.assign
                // as opposed to window.location.href. I find that it works better
                window.location.assign(this.href);
                // then I close my navigation menu
                closeAll();
            });

        });

Answer 6

Сначала вы должны поместить этот код в файл 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' событие запускается сразу

Answer 7

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

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

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