Как включить другое представление в одну и ту же html-страницу с помощью framework7?

Я новичок в фреймворке 7. Я разрабатываю небольшое приложение и разбиваю html-код на разные файлы, потому что у меня много общих страниц с div. Моя проблема: у меня есть page.html, внутри моего page.html я хотел бы включить разные div в одни и те же окна из разных html файлов. например, в php мы можем сделать это с помощью

include("");

но в framework7 я могу включить только один с

<div class = "view view-main view-init" data-url = "/page/" data-name = "page"></div>

Я хотел бы добавить еще одно подобное представление

<div class = "view view-main view-init" data-url = "/page1/" data-name = "page1"></div>
<div class = "view view-main view-init" data-url = "/page2/" data-name = "page2"></div>

я поместил здесь изображение, чтобы лучше объяснить мне.

что я хотел бы сделать Спасибо за помощь.

pages.html

<div data-name = "pages" class = "page">    
<div class = "page-content pg-no-padding">

    <div class = "row justify-content-center">
        <div class = "col-100 tablet-100 desktop-80">
            <div class = "block">
            <form class = "list" id = "pages1">

                <div class = "row justify-content-center">
                    <div class = "block-title">
                        <h1> Pages</h1>
                    </div> <!--block-title-->
                </div><!--row-->

                <div class = "row">
                    <div class = "col">
                        <div class = "block-title">
                            <h2> Card 1</h2>
                        </div> 

                        <div class = "card">
                            <div class = "card-content card-content-padding"> 
                            <div class = "row">
                                <div class = "col-100 tablet-auto desktop-auto">
                                    <div class = "list no-hairlines-md">
                                    <ul>
                                        <li class = "item-content item-input">
                                            <div class = "item-inner">
                                                <div class = "item-title item-label">Input1</div>
                                                <div class = "item-input-wrap">
                                                    <input type = "number" placeholder = "" name = "">
                                                    <span class = "input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                        <li class = "item-content item-input">
                                            <div class = "item-inner">
                                                <div class = "item-title item-label">Input2</div>
                                                <div class = "item-input-wrap">
                                                    <input type = "number" placeholder = "" name = "">
                                                    <span class = "input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </div>
                                </div><!--col-->
                            </div><!--row-->
                            </div><!--card-content-->
                        </div><!--card-->                               
                    </div><!--col-->
                </div><!--row-->


                Here I'd like to include the code inside pages1.html

                Here I'd like to include the code inside pages2.html


            </form> 
            </div><!--block-->


            <div class = "block">
            <a class = "col button button-fill" href = "#">Salva</a>
            </div>

        </div><!--col-100-->        
    </div><!--row-->
</div> <!-- ./ page-content-->

pages1.html

<div class = "row">
                    <div class = "col">
                        <div class = "block-title">
                            <h2> Card2</h2>
                        </div> 

                        <div class = "card">
                            <div class = "card-content card-content-padding"> 
                            <div class = "row">
                                <div class = "col-100 tablet-auto desktop-auto">
                                    <div class = "list no-hairlines-md">
                                    <ul>
                                        <li class = "item-content item-input">
                                            <div class = "item-inner">
                                                <div class = "item-title item-label">Input1</div>
                                                <div class = "item-input-wrap">
                                                    <input type = "number" placeholder = "" name = "">
                                                    <span class = "input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>

                                        <li class = "item-content item-input">
                                            <div class = "item-inner">
                                                <div class = "item-title item-label">Input2</div>
                                                <div class = "item-input-wrap">
                                                    <input type = "number" placeholder = "" name = "">
                                                    <span class = "input-clear-button"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    </div>
                                </div><!--col-->
                            </div><!--row-->
                            </div><!--card-content-->
                        </div><!--card-->                               
                    </div><!--col-->
                </div><!--row-->
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
1 121
2

Ответы 2

Чтобы включить макет с несколькими представлениями, вам необходимо сделать следующее:

  1. Вам нужно создать оболочку с такими представлениями классов: <div class = "views tabs">
  2. Вам нужно создать представление div следующим образом: <div class = "view view-main tab tab-active" id = "view-1">.related page..</div><div class = "view tab" id = "view-2">.related page..</div>
  3. Вам нужно убедиться, что это только одна оболочка класса представлений.

В Js: вы можете управлять несколькими представлениями следующим образом:

var view1 = app.views.create('#view-1', {...}); 
var view2 = app.views.create('#view-2', {...}); 

Подробнее: F7 Просмотр

Для Embedded Multi view, отличного от вкладки: Пример Примечание: для каждого вида в F7 высота 100% ... вам нужно убедиться, что высота равна 100%, наконец

Привет, Anees, спасибо за помощь, но он создает вкладку. Я отредактировал свои вопросы, чтобы лучше объяснить меня.

Jean 29.10.2018 09:45

Ваш добро пожаловать, приятель ... Я обновил свой ответ, добавив теперь реальный пример для нескольких видов, таких как ваше изображение ...

Anees Hikmat Abu Hmiad 29.10.2018 15:53

Привет, спасибо за ответ. Я видел пример, но содержимое MainView в моем случае находится внутри page1.html, а домашнее представление содержимого - внутри page2.html

Jean 29.10.2018 17:35

Добро пожаловать, fgg, вам нужно установить маршруты для view1 и view2 ... это загружает необходимый контент, как вам нравится, например: routes: [// Первый {path: '/', url: './home.html'}, ] // Второй: routes: [{path: '/', url: './page2.html'},] Я думаю, это решит вашу проблему

Anees Hikmat Abu Hmiad 29.10.2018 17:39

Я включил путь в my-app.json, но как я могу включить pages1.html и pages2.html в pages.html? я загрузил свой вопрос. Спасибо

Jean 29.10.2018 17:53

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

<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class = "view view-init" data-url = "/your-page/" data-name = "home" data-push-state = "true">
  ...
</div>

И в ваших маршрутизаторах также необходимо будет определить ваш маршрут:

var app = new Framework7({
  root: '#app',

  // Create routes for all pages
  routes: [
    {
      path: '/',
      url: 'index.html',
    },{
      // Add your contents page route 
      path: '/your-page/',
      url: 'pages/your-page.html',
    },
    .....
});

Надеюсь на эту помощь.

Другие вопросы по теме