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:
- 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?!
-
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?
-
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 importingonsen-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">