jQuery Mobile - ссылки и переключатели в Accordion не работают

У меня есть сайт здесь.

Когда вы туда доберетесь, нажмите Инструкции для учащихся, а затем нажмите кнопку Справка. Когда он пытается перейти к этому документу (PDF на сервере), страница появляется неопределенной... но URL-адрес документа правильный. Когда я обновляю страницу, я попадаю в документ.

Почему это происходит?

Вот фрагмент этой части страницы...

    <div data-role="collapsible-set" data-theme="c" data-content-theme="d">

        <div data-role="collapsible">
            <h3><img src="images/gear.png" style="vertical-align: middle; ">Student Instructions...</h3>
                    <ul>
                        <li>+ Create a GoArmyEd Account. <a href="docs/TA- GoArmyEd-LOI-Walkthrough-SUO-2-15-13.pdf"><span style="font-size:12px; font-family:Verdana, Geneva, sans-serif;">Need a walkthrough?</span><img src="images/walkthrough.png" style="vertical-align: middle;"></a></li><br>
                        <li>+ Print Statement of Understanding (South University) and have it signed by their Commander.</li><br>
                        <li>+ Receive Cost Verification worksheet (CVWS) and Degree Progress Audit (DPA).</li><br>
                        <li>+ Upload all documents into GoArmyEd.</li><br>
                        <li>+ Apply for Tuition Assistance.</li>

                    </ul>
        </div>

Кроме того, вы заметите, что когда вы вернетесь на исходную страницу, вы увидите, что нажаты несколько переключателей. Я использовал макет переключателя jQuery, потому что он мне нравится... Я просто не знаю, как сделать так, чтобы эти нажатия кнопок исчезли. Это выглядит ужасно.

Мысли?

Обновление. Я пытался добавить rel="external", data-ajax="false" по отдельности и вместе. Я могу открыть документ, когда щелкаю правой кнопкой мыши и «Открыть ссылку в новой вкладке» ... Однако по щелчку не открывается.

Обновление 2. Попытался добавить следующее, но это отключило всю мою таблицу стилей.

<script>
    $(document).bind("mobileinit", function(){
    $.mobile.ajaxLinksEnabled(false);
    }); 
</script>

javascript jquery-mobile jquery-mobile-collapsible
person Millhorn    schedule 23.08.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это просто с документом Google embed.

1) создайте ссылку на эту страницу, как обычно' 2) на целевой странице добавьте этот iframe

<iframe src="http://docs.google.com/viewer?url=http://yoursite.com/folderWhereYouHideYourPdfFile/yourPdfFile.pdf&embedded=true" width="100%" height="100%" frameborder="0">

это встроит документ. затем вы можете стилизовать его. если вы хотите, можно всплывать или загружать с помощью ajax.

============================ Другой метод может заключаться в использовании Php ============== Итак, вместо iframe на целевой странице у вас может быть что-то вроде этого

<?php
$filePdf = 'yourPdfFile.pdf';
$fileTitle = 'Become A Solider'; 

header('Content-type: application/pdf');
header('Content-Disposition: inline; filename="' . $fileTitle . '"');
header('Content-Transfer-Encoding: binary');
header('Content-Length: ' . filesize($filePdf));
header('Accept-Ranges: bytes');

@readfile($filePdf);
?>
person ShapCyber    schedule 23.08.2013
comment
Привет еще раз! Пожалуйста, взгляните на эту ссылку здесь, и вы увидите, где У меня работает iframe ... однако я пытаюсь изменить его размер, и это не работает в мою пользу. Любые идеи здесь? Кроме того, левое поле iframe составляет почти 50%. Я поиграл с кодом в Chrome, но, похоже, не получил желаемого результата. Мысли? - person Millhorn; 26.08.2013
comment
Не берите в голову. Я понял. Я добавил тег стиля в html. - person Millhorn; 27.08.2013