Framework7 v3 - Как вызвать вкладку шоу - PullRequest
Новая
       48

Framework7 v3 - Как вызвать вкладку шоу

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

Я использую F7 v3 и использую вкладки, но как я могу вызвать событие показа вкладок?

В документах это выглядит так: "tab: show" https://framework7.io/docs/tabs.html, и я пробую это, ноне работает 

  $$('#latest').on('tab:show', function() {
    app.alert('latest is visible');
  });

1 Ответ

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

Зависимость вашего кода, ошибка может возникать в app.alert, так что вам нужно изменить его на чистое оповещение или всплывающее окно F7, или, возможно, ошибка произошла, так как вы установили неправильный селектор для показа на вкладке триггера.пожалуйста, посмотрите на этот пример здесь:

http://jsfiddle.net/w89xktne/

Текст HTML: 

<body>
  <!-- App root -->
  <div id="app">
    <!-- Views/Tabs container -->
    <div class="views tabs">
      <!--
        Tabbar for switching views-tabs. Should be a first child in Views.
        Additional "toolbar-bottom-md" class is also required here for MD theme
      -->
      <div class="toolbar tabbar-labels toolbar-bottom-md">
        <div class="toolbar-inner">
          <a href="#view-home" class="tab-link tab-link-active">1
            <i class="icon icon-home"></i>
          </a>
          <a href="#view-catalog" class="tab-link">2
            <i class="icon icon-catalog"></i>
          </a>
          <a href="#view-settings" class="tab-link">3
            <i class="icon icon-settings"></i>
          </a>
        </div>
      </div>
      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        Tab 1
      </div>

      <!-- Catalog View -->
      <div id="view-catalog" class="view tab">
        Tab 2
      </div>

      <!-- Settings View -->
      <div id="view-settings" class="view tab">
        Tab 3
      </div>
    </div>
  </div>
  ...
</body>

app.js: 

var $$ = Dom7;
var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

$$('.tab').on('tab:show', function() {
   app.popup.create({
    content: '<div class="popup">'+
              '<div class="block">'+
                '<p>Its Show.</p>'+
                '<p><a href="#" class="link popup-close">Close me</a></p>'+
              '</div>'+
            '</div>',
  }).open();
});
...