Framework 7. Страница темы, не затрагивающая всего приложения - PullRequest
Новая
       6

Framework 7. Страница темы, не затрагивающая всего приложения

0 голосов
/ 09 мая 2018

Я сделал этот код, используя Framework7 

<div class="page" data-name="theme">
    <div class="page-content">

        <div class="block-title">Elige el color del tema:</div>
        <div class="list">
            <ul>
            <li><label class="item-radio item-content">
                    <input name="color-radio" value="red" type="radio"><i class="icon icon-radio"></i>
                    <div class="item-inner"><div class="item-title">Red</div></div>
                </label></li>

            <li><label class="item-radio item-content">
                    <input name="color-radio" value="green" type="radio"><i class="icon-radio"></i>
                    <div class="item-inner"><div class="item-title">Green</div></div>
                </label></li>
            </ul>
        <!--And so on with other colors-->
        </div>

    </div>
</div>

Эта страница использует этот сценарий DOM: 

$$('input[name="color-radio"]').on('change', function () {
        if (this.checked) {
          $$('.view').removeClass('color-theme-pink color-theme-blue color-theme-red color-theme-black color-theme-gray color-theme-orange color-theme-yellow color-theme-green color-theme-white');
          $$('.view').addClass('color-theme-' + $$(this).val());
        }
      });

Проблема в том, что это не работает. Я открываю HTML-код на главном экране, но когда я нажимаю на каждое радио, тема не меняется.

Если я добавлю тему HTML в основной индексный файл, она будет работать.

Не могли бы вы мне помочь?

1 Ответ

0 голосов
/ 29 мая 2018

В Framework7 вам необходимо добавить любые скрипты либо на странице индекса, либо на странице app.js. 

$$('input[name="color-radio"]').on('change', function () {
        if (this.checked) {
          $$('.view').removeClass('color-theme-pink color-theme-blue color-theme-red color-theme-black color-theme-gray color-theme-orange color-theme-yellow color-theme-green color-theme-white');
          $$('.view').addClass('color-theme-' + $$(this).val());
        }
      });

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

...