Я новичок в фреймворке 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-->
Чтобы включить макет с несколькими представлениями, вам необходимо сделать следующее:
<div class = "views tabs">
<div class = "view view-main tab tab-active" id = "view-1">.related page..</div><div class = "view tab" id = "view-2">.related page..</div>
В Js: вы можете управлять несколькими представлениями следующим образом:
var view1 = app.views.create('#view-1', {...});
var view2 = app.views.create('#view-2', {...});
Подробнее: F7 Просмотр
Для Embedded Multi view, отличного от вкладки: Пример Примечание: для каждого вида в F7 высота 100% ... вам нужно убедиться, что высота равна 100%, наконец
Ваш добро пожаловать, приятель ... Я обновил свой ответ, добавив теперь реальный пример для нескольких видов, таких как ваше изображение ...
Привет, спасибо за ответ. Я видел пример, но содержимое MainView в моем случае находится внутри page1.html, а домашнее представление содержимого - внутри page2.html
Добро пожаловать, fgg, вам нужно установить маршруты для view1 и view2 ... это загружает необходимый контент, как вам нравится, например: routes: [// Первый {path: '/', url: './home.html'}, ] // Второй: routes: [{path: '/', url: './page2.html'},] Я думаю, это решит вашу проблему
Я включил путь в my-app.json, но как я могу включить pages1.html и pages2.html в pages.html? я загрузил свой вопрос. Спасибо
Обновлено: после долгого расследования я обнаружил из документации, что вы можете сделать это следующим образом:
<!-- 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',
},
.....
});
Надеюсь на эту помощь.
Привет, Anees, спасибо за помощь, но он создает вкладку. Я отредактировал свои вопросы, чтобы лучше объяснить меня.