Cordova Framework7 шаблон страницы под javascript не работает - PullRequest
Новая
       42

Cordova Framework7 шаблон страницы под javascript не работает

0 голосов
/ 07 июня 2018

У меня есть страница index.html в шаблоне Framework7, которая действует как главная страница, и подстраницы, например, contact.html; 

<div class="pages">
  <div data-page="contact" class="page no-toolbar no-navbar">
    <div class="page-content">

    <div class="navbarpages navbarpagesbg">
                            <div class="navbar_left">
                                <div class="logo_text"><a href="index.html">BLIX</a></div>
                            </div>
                <div class="navbar_right navbar_right_menu">
                <a href="#" data-panel="left" class="open-panel"><img src="images/icons/white/menu.png" alt="" title="" /></a>
                </div>          
                <div class="navbar_right">
                <a href="#" data-panel="right" class="open-panel"><img src="images/icons/white/user.png" alt="" title="" /></a>
                </div>
                <div class="navbar_right">
                <a href="cart.html" data-view=".view-main"><img src="images/icons/white/cart.png" alt="" title="" /><span>3</span></a>
                </div>          
    </div>

     <div id="pages_maincontent">

      <h2 class="page_title">CONTACT</h2>

     <div class="page_single layout_fullwidth_padding">   

            <h2 id="Note"></h2>
            <div class="contactform">
            <form class="" id="ContactForm" method="post" action="">
            <label>Name:</label>
            <input type="text" name="ContactName" id="ContactName" value="" class="form_input required" />
            <label>Email:</label>
            <input type="text" name="ContactEmail" id="ContactEmail" value="" class="form_input required email" />
            <label>Message:</label>
            <textarea name="ContactComment" id="ContactComment" class="form_textarea textarea required" rows="" cols=""></textarea>
            <input type="submit" name="submit" class="form_submit" id="submit" value="Send" />
            <input class="" type="hidden" name="to"  value="youremail@yourwebsite.com" />
            <input class="" type="hidden" name="subject" value="Contacf form message" />
            <label id="loader" style="display:none;"><img src="images/loader.gif" alt="Loading..." id="LoadingGraphic" /></label>
            </form>
            </div>

      <h3>Our Location</h3>

      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193578.74109041138!2d-73.97968099999997!3d40.70331274999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York+NYC%2C+New+York%2C+Statele+Unite+ale+Americii!5e0!3m2!1sro!2s!4v1425027721891" width="100%" height="200" frameborder="0" style="border:0"></iframe> 

      <blockquote>
      Adress: New York 23066 / Pacific Street / Brooklyn <br />
      Email: email@yourwebsite.com <br />
      Mobile: +900 456 567 77
      </blockquote> 

      <a href="tel:+900 456 567 77" class="button_full btyellow external">Call Us Now!</a>   

      <div class="clear"></div>
      </div>

      </div>
    </div>
  </div>
</div>

Когда я добавляю нижнюю страницу, этот javascript; 

<script type="text/javascript">
    alert('Hello World!');
</script>

Не срабатывает и не выдает никакой ошибки.Когда я добавляю его в конец страницы index.html или в файл my-app.js, это работает.Но мне нужны определенные javascript-коды на подстраницахКак я могу достичь этого?Спасибо.

1 Ответ

0 голосов
/ 08 июня 2018

События страницы: https://framework7.io/docs/page.html#page-events

На вашей странице индекса включите файл whatevername.js и поместите в него логику, специфичную для конкретной страницы.(Альтернативные способы с маршрутизацией и компонентами)

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

Пример: на моей html-странице под названием home <div class="page" data-name="home"> с любым обычным html-кодом внутри страницы.

В моем js-файле я запустил бы js-файл с помощью этого 

$$(document).on('page:init', '.page[data-name="home"]', function (e) {
    //whatever code here
    alert('Hello World!');
})

Таким образом, на главной странице, на своем событии init, он запускает JavaScript, который имеет предупреждение hello world.

Запуск из шаблона облегчит видеть, как работают разные частив пределах F7.https://framework7.io/templates/ Одиночный вид является хорошей отправной точкой.

...