2016-04-27 3 views
0

Я использую онсэн пользовательский интерфейс меню скользящий для моего приложения, и это код, я использую для скользящего меню:онсэн UI код JQuery не работает на главной странице, на вызывающей главной странице с помощью дополнений сдвижного меню

<ons-sliding-menu main-page="frontPage.html" menu-page="menu.html" max-slide-distance="260px" type="overlay" var="menu"> 
</ons-sliding-menu> 

, но в отличие от исходного шаблона, где все html были в теге <ons-template>, я сделал отдельный HTML-файл для главной страницы (frontpage.html) и переименовал страницу, содержащую только шаблон menu.html, как index.html.

На frontpage.html, я использую код jquery для отображения аккордеона и его работоспособности при открытии html-страницы в браузере, но когда я открываю файл index.html, все работает отлично, за исключением jQuery-аккордеона. Все вкладки в аккордеоне предварительно открыты, а аккордеон не работает. Я также не ошибаюсь в консоли.

Я использую jquery v2.2.3, размещенный локально. Оба файла html правильно включили jquery-скрипт (отмечен в браузере-источнике).

Я пробовал оба, включая код непосредственно в frontpage.html под тегом скрипта и включающий его в отдельный файл js. И время, когда он работает нормально, когда страница напрямую загружается в браузере, но не работает, когда страница загружается с помощью страницы скользящего меню.

ответ

0

Я не хочу быть грубым, но поскольку аккордеон - это то, что не работает, тогда этот код может быть полезен в качестве ссылки для вашего вопроса.

Есть несколько возможных причин, почему она не может работать:

  1. код просто не делать то, что вы хотите.
  2. Код не исполняется.
  3. Код выполняется в неправильное время.
  4. Как-то Onsen мешает исполнению или сбрасывает его потом.

Мы можем проверить 1, так как вы говорите, что это работает при других обстоятельствах. Для проверки на 2 вам просто нужен console.log, который, как я предполагаю, вы уже сделали.

Вы сказали, что попытались переместить сценарий, так что я предполагаю, что вы также подозреваете, что вариант 3. Является ли это в отдельном файле не очень важным. Однако, когда это выполняется, это важно. Скажем, например, что ваш frontpage.html - это страница с html, head, body и т. Д. Некоторое время назад люди клали скрипты в конец тела, чтобы они выполнялись после загрузки страницы. Когда jQuery стал основным, хотя это способ использовать либо $(function(){ ... }), либо $(document).ready(function(){ ... }). Я бы предположил, что вы используете один из них.

Однако они будут работать для обеспечения того, чтобы событие DOMContentLoaded уже было запущено. В вашем случае, хотя с тех пор, как вы уже загрузили страницу, содержащую sliding-menu, это означает, что в этот момент главная страница уже загружена. Вы сказали, что вы посмотрели на дерево DOM - если вы посмотрели, используя inspect element вместо show source, вы, вероятно, видели, что внутренние страницы не находятся внутри фреймов или фреймов. Поэтому они были просто помещены в страницу как случайный html-контент, а не как отдельные html-страницы. Поэтому в основном, когда $(readyFunction) будет выполнен в этой точке с точки зрения браузера, страница уже загружена. Если этот код до фактического аккордеона, значит, он может быть выполнен до этого. А об ошибках - jQuery и его плагины - не очень большой шрифт ошибок. Поскольку выбор Jquery имеет возможность соответствовать любому количеству элементов, которые включают в себя 0. Таким образом, даже если вы делаете что-то вроде

$('#accordion').activateAccordion(); 

, что это прекрасно, потому что даже если он находит 0 элементов он просто работает с этим набором 0 элементов и активируют каждый из них. : D

Если это то, что происходит, вы можете отлаживать его с помощью console.logging количества согласованных элементов. Вы можете исправить это, переместив свой скрипт в конец тела или даже включив его на главной странице. Способ работы Onsen заключается в том, что он не требует фактических html-страниц для его sliding-menu и аналогичных компонентов. Вы можете просто получить html, который вам нужен для контента. (Там же компонент ons-template, который помогает, если вы хотите добавить несколько подстраниц в одном файле.)

В любом случае, если вы решите пойти на одну страницу подхода, то вы можете использовать событие init, какие страницы пожара. В противном случае вы можете просто иметь свой скрипт после содержимого.

Честно я думаю, вариант 3 является наиболее вероятным.

Однако, если вы обнаружите, что ваш селектор jQuery находит ваш элемент аккордеона и выполняет то, что ему нужно, тогда вы должны еще раз проверить, что произойдет после этого с некоторыми console.log.

Надеюсь, я помог. Удачи с вашим приложением!