質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Q&A

解決済

1回答

1048閲覧

ons-nabigator内ons-tabbarの指定のタブを開いた状態にpushPageしたい

marion

総合スコア18

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Slim

SlimはPHPアプリケーションを開発するための軽量なマイクロフレームワークです。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

0グッド

0クリップ

投稿2019/02/21 12:46

編集2019/03/20 08:24

初心者です。何卒ご教示お願いします。

OnsenUIで、
tabbarのない画面から
ons-tabbarのactiveでないtabをactiveにした状態の画面に遷移させる方法が分からず詰まっております。

以下で状況記載します。

  • index
<ons-navigator id="navigator" page="tabbar"></ons-navigator>
  • tabbar
<ons-page id="tabbar"> <ons-tabbar> <ons-tab [page="page1" active]></ons-tab> <ons-tab page="page2"></ons-tab> // tabのある+activeの状態のpage2に遷移させたいのですが
  • 飛びたい元ページ
<ons-page id="wantToPushPage"> <a onclick="document.querySelector('#navigator').pushPage('page2')">toPAGE2</a> 〜〜〜 // これだとpage2だけでtabbarが表示されないので困ってます
  • page1&2
<ons-page id="page1または2"> 〜〜〜内容〜〜〜 </ons-page>

onclickの中身を

<a onclick="document.querySelector('#navigator').pushPage('tabbar')">

にして、page2をactiveにする指定を入れてあげればいけるか?
と思ったのですが、その書き方もよく分からず。。
tabbarのslim自体にactiveを書いてしまっているのでダメでしょうか・・

解決方法ご存知の方、ぜひ教えていただけると嬉しいです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

slim記載がよくわからずタブバーがないページからタブバーのページに移動した際の挙動でのことと思い試してみました。
resetToPageではできなかったけどpushPageではできたので完全ではないかもしれませんが、載せておきます。

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 5 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 6 <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> 7 <meta charset="UTF-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 10 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 11 <title>Document</title> 12</head> 13<body> 14 15<ons-navigator swipeable id="navigator" page="home.html"></ons-navigator> 16 17<template id="home.html"> 18 <ons-page> 19 <a href="#" onclick="aClick(0);">リンク(tab1をアクティブ)</a> 20 <br /> 21 <a href="#" onclick="aClick(1);">リンク(tab2をアクティブ)</a> 22 </ons-page> 23</template> 24 25<template id="tabbar.html"> 26 <ons-page> 27 <ons-toolbar> 28 <div class="center">Tab 1</div> 29 </ons-toolbar> 30 31 <ons-tabbar swipeable position="auto"> 32 <ons-tab page="page1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active> 33 </ons-tab> 34 <ons-tab page="page2.html" label="Tab 2" icon="md-settings" active-icon="md-face"> 35 </ons-tab> 36 </ons-tabbar> 37 </ons-page> 38</template> 39 40<template id="page1.html"> 41 <ons-page> 42 page1 43 </ons-page> 44</template> 45 46<template id="page2.html"> 47 <ons-page> 48 page2 49 </ons-page> 50</template> 51 52 53</body> 54<script> 55 function aClick(tabIndex) { 56 document.querySelector('#navigator') 57 .pushPage('tabbar.html') 58 .then(function() { 59 document.querySelector('ons-tabbar').setActiveTab(tabIndex); 60 }); 61 } 62 63 document.addEventListener('init', function(event) { 64 console.log(event); 65 var page = event.target; 66 }); 67</script> 68</html>

投稿2019/02/22 02:55

rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

marion

2019/02/25 07:11

setActiveTab勉強になりました、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問