Блог

Главная - Вопросы по программированию - Страница переключения полимера

Страница переключения полимера

#javascript #html #polymer

#javascript #HTML #полимер

Вопрос:

Я пытаюсь создать сайт для изучения polymer. Я использую панель основного ящика и панель основного заголовка. Теперь я хочу, чтобы содержимое менялось при нажатии на одну из ссылок в ящике. Мне было интересно, каков наилучший способ сделать это? Есть ли встроенная функция для переключения страниц? (без использования вкладок)

Пока это мой код:

 <body fullbleed vertical layout unresolved touch-action="auto">

<core-drawer-panel id="drawerPanel">

  <core-header-panel drawer id="drawer">
    <core-toolbar id="navheader">
    <span id="menutitle">Menu</span>
    </core-toolbar>
    <core-menu id='menu'>
      <paper-item class="menulink" id='homelink' label="Home"></paper-item>
      <paper-item class="menulink" id='gallerylink' label="Gallery"></paper-item>
      <paper-item class="menulink" id='calendarlink' label="Calendar"></paper-item>
      <paper-item class="menulink" id='contactlink' label="Contact"></paper-item>
    </core-menu>
  </core-header-panel>

  <core-header-panel main mode="seamed">
    <core-toolbar id="mainheader">
      <paper-icon-button 
      id="navicon" icon="menu"></paper-icon-button>
      <span flex id="title">My site</span>
    </core-toolbar>
    <div class="content">
      <div id="home" vertical layout centered>
        <big-picture flex></big-picture>
        <general-info flex></general-info>
        <footer-element flex></footer-element>
      </div>
      <div id='gallery' vertical layout centered>
      </div>
    </div>
  </core-header-panel>

</core-drawer-panel>

<script>
</script>
</body>

Ответ №1:

Страница документации polymer, на мой взгляд, плохо объяснена для новичков, поэтому отправлять просто ссылку довольно лениво.

вместо того, чтобы использовать идентификатор div для смены страниц, попробуйте вот так:

 <div class="content">
<core-animated-pages selected="0">
<section>
<div>Home page contents</div>
</section>
<section>
<div>Gallery contents</div>
</section>
</core-animated-pages>
</div>

добавьте немного javascript ниже, чтобы изменять страницы при нажатии

 function home(){
//find <core-animated-pages> 
var c = document.querySelector('core-animated-pages');
//set the selected value to 0 (first <section>)
c.selected = 0;
}

function gallery(){
//find <core-animated-pages> 
var c = document.querySelector('core-animated-pages');
//set the selected value to 1 (second <section>)
c.selected = 1;
}

теперь для каждой кнопки элемента бумаги добавьте onclick для вызова каждой функции для изменения страницы

 <paper-item onclick="gallery();">Gallery</paper-item>

Существуют более эффективные способы изменения страниц, но это должно дать вам представление о том, как это работает. Не забудьте импортировать свои элементы!