Stylesheet switch and internal page links not working

wmcig

Hi,

I am new in onsen ui and javascript. I am using the sample todolist for playing around with it: https://github.com/frandiox/OnsenUI-Todo-App

I need two things in the side-menu of the sample app:

Buttons to change the stylesheet. My code in the index.html is this:

<title>ToDoListe</title>

  <script src="lib/onsen/js/onsenui.js"></script>

  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  
  <link id="pagestyle" rel="stylesheet" type="text/css" href="lib/onsen/css/onsen-css-components.css" />
   <script type="text/javascript">
               function swapStyleSheet (sheet) {
  	              document.getElementById('pagestyle').setAttribute('href', sheet);
  }  
   </script>

  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" title="light" id="light">  
  <link rel="alternate stylesheet" title="dark" href="lib/onsen/css/dark-onsen-css-components.css" title="dark" id="dark">
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!-- First navigation component: Navigator. This will remain always on top of the app. -->
  <ons-navigator id="myNavigator" page="splitter.html">
  </ons-navigator>


  <!-- Second navigation component: Splitter. This will disappear if the first component changes its content. -->
  <template id="splitter.html">
    <ons-page>
      <ons-splitter id="mySplitter">
        <ons-splitter-side page="html/menu.html" swipeable width="250px" collapse swipe-target-width="50px">
        </ons-splitter-side>
        <ons-splitter-content page="tabbar.html">
        </ons-splitter-content>
      </ons-splitter>
    </ons-page>
  </template>

  <!-- Third navigation component: Tabbar. This will disappear if the first or second components change their content. -->
  <template id="tabbar.html">
    <ons-page id="tabbarPage">
      <ons-toolbar>
        <div class="left">
          <!-- Toolbar-button with different icons depending on the platform. -->
          <ons-toolbar-button component="button/menu">
            <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">ToDoListe</div>
        <div class="right">
          <!-- Toolbar-button  only visible for iOS/other. -->
          <ons-if platform="ios other">
            <ons-toolbar-button component="button/new-task">Neu</ons-toolbar-button>
          </ons-if>
        </div>
      </ons-toolbar>
      
      
      <template id="home.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Main
      </div>
    </ons-toolbar>
    <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
      Swipe right to open the menu!
    </p>
  </ons-page>
</template>

<template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
  </ons-page>
</template>

<template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
    </ons-toolbar>
  </ons-page>
</template>
      
      
      
      
      
      
      
     

      <!-- Floating Action Button only visible for Android. -->
      <ons-if platform="android">
        <ons-fab position="right bottom" component="button/new-task">
          <ons-icon icon="md-plus"></ons-icon>
        </ons-fab>
      </ons-if>

      <!-- Auto-positioned Tabbar: top on Android, bottom on iOS/other. -->
      <ons-tabbar id="myTabbar" position="auto">
        <ons-tab page="html/pending_tasks.html" label="Ausstehend" active>
        </ons-tab>
        <ons-tab page="html/completed_tasks.html" label="Beendet">
        </ons-tab>
      </ons-tabbar>
    </ons-page>
  </template>

</body>

</html>

You can see a new javascript “swapStyleSheet” which speaks to the two buttons in my menu.html:

<ons-page id="menuPage">

  <ons-list-title>Default</ons-list-title>
  <ons-list id="default-category-list">
    <ons-list-item tappable>
      <div class="left">
        <ons-radio name="categoryGroup" input-id="r-all" checked></ons-radio>
      </div>
      <label class="center" for="r-all">All</label>
    </ons-list-item>
    <ons-list-item tappable category-id="">
      <div class="left">
        <ons-radio name="categoryGroup" input-id="r-no"></ons-radio>
      </div>
      <label class="center" for="r-no">No category</label>
    </ons-list-item>
  </ons-list>
  
<ons-list>
        <ons-list-item onclick="fn.load('home.html')" tappable>
          Home
        </ons-list-item>
        <ons-list-item onclick="fn.load('settings.html')" tappable>
          Settings
        </ons-list-item>
        <ons-list-item onclick="fn.load('appinfo.html')" tappable>
          App-Info
        </ons-list-item>
      </ons-list>
      
  <ons-list>  
  <ons-button onclick="swapStyleSheet('lib/onsen/css/onsen-css-components.css')">light style</ons-button>
  <ons-button onclick="swapStyleSheet('lib/onsen/css/dark-onsen-css-components.css')">dark style</ons-button>
  </ons-list>

  <ons-list-title>Custom categories</ons-list-title>
  <ons-list id="custom-category-list">
  </ons-list>
</ons-page>

The only thing which is changing everytime I a m clicking on the buttons is the little title under the two buttons. The other stylesheet is not loading.

I need an “internal link” , like the ons-splitter example (https://onsen.io/v2/api/js/ons-splitter.html#main) shows. But I don’t know how to implement them into my tabbar of the samplecode.

Maybe someone can help me?!

wmcig

I tried the following:

In the side-menu template I put am list-item (tappable) with “window.location.href …” in it:

<ons-page id="menuPage">

  <ons-list-title>Default</ons-list-title>
  <ons-list id="default-category-list">
    <ons-list-item tappable>
      <div class="left">
        <ons-radio name="categoryGroup" input-id="r-all" checked></ons-radio>
      </div>
      <label class="center" for="r-all">Alle</label>
    </ons-list-item>
    <ons-list-item tappable category-id="">
      <div class="left">
        <ons-radio name="categoryGroup" input-id="r-no"></ons-radio>
      </div>
      <label class="center" for="r-no">Keine Kategorie</label>
    </ons-list-item>
  </ons-list>
    <ons-list-title>Eigene Kategorien</ons-list-title>
  <ons-list id="custom-category-list">
  </ons-list>
    <ons-list-header>Icons</ons-list-header>
    <ons-list-item tappable>
      <div class="left">
        <ons-icon icon="md-info" class="list-item__icon"></ons-icon>
      </div>
      <div class="center">
        App-Info
      </div>
    </ons-list-item>
    <ons-list-item onclick="window.location.href = 'html/appinfo.html';" tappable>
    Home
    </ons-list-item>



</ons-page>

If I click on the link, the appinfo.html-template opened, but I also can see the raw text, no stylesheet, no tabbar, no other components.

What is wrong?

asialgearoid

In your first example, you have:

<link id="pagestyle" rel="stylesheet" type="text/css" href="lib/onsen/css/onsen-css-components.css" />
   <script type="text/javascript">
               function swapStyleSheet (sheet) {
                  document.getElementById('pagestyle').setAttribute('href', sheet);
  }  
   </script>

  <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" title="light" id="light">

When you change the href of #pagestyle, it won’t make any difference, as you are importing onsen-css-components.css later (on the last line), which will override the one in #pagestyle, since it comes later.

Try removing these two lines, and see if it works then:

  <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css" title="light" id="light">  
  <link rel="alternate stylesheet" title="dark" href="lib/onsen/css/dark-onsen-css-components.css" title="dark" id="dark">