Monaca Onsen UI Discord Chat Github Repo

Stylesheet switch and internal page links not working



  • 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:

    1. 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.

    1. 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?!



  • 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?


  • Onsen UI

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