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">

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Stylesheet switch and internal page links not working