Как включить другое представление в ту же HTML-страницу с framework7? - PullRequest
Новая
       7

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

0 голосов
/ 27 октября 2018

Я новичок в фреймворке 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>

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

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

страниц.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-->

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

РЕДАКТИРОВАТЬ: После долгого расследования я нашел из документации, что вы можете сделать это так: 

<!-- 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',
    },
    .....
});

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

0 голосов
/ 28 октября 2018

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

  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 View

Для вкладки «Встроенный мульти» не нравится вкладка: Пример * * тысяча двадцать-одна Примечание: для каждого вида в F7 получается 100% высоты ... вам нужно убедиться, что высота равна 100%, наконец

...