I would like to make the script on the page-loader-component.html page that I put in the pageInit
$(document).ready(function () {
//HIDRO
$('#selectHidrologicos').hide();
$('#classificationHidrologicos').click(function () {
$('#selectHidrologicos').slideToggle();
if ($('#arrowHidro').attr("src") === "images/down.png")
$('#arrowHidro').attr("src", "images/up.png");
else
$('#arrowHidro').attr("src", "images/down.png");
});
});
console.log('pageInit', page);
},
function on this page where it is. But I can not make it work.
index.html
<!DOCTYPE html>
[...]
<ul>
<li>
<a href="/page-loader-component/vladimir/123/about-me/1/?start=0&end=30#top">Component Page</a>
</li>
</ul>
<!-- Cordova -->
<!--
<script src="cordova.js"></script>
-->
<!-- Framework7 library -->
<script src="bower_components/framework7/dist/js/framework7.js"></script>
<!-- App routes -->
<script src="js/routes.js"></script>
<!-- Path to your custom app scripts -->
<script src="js/app.js"></script>
routes.js
routes = [
{
path: '/',
url: './index.html',
},
{
path: '/about/',
url: './pages/about.html',
},
// Page Loaders & Router
{
path: '/page-loader-component/:user/:userId/:posts/:postId/',
componentUrl: './pages/page-loader-component.html',
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
];
page-loader-component.html
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">Component Page</div>
</div>
</div>
<div class="page-content">
<div class="block block-strong">
<!-- HIDRO -->
<div class="classification" id="classificationHidrologicos"><h2>HidrolĂłgicos</h2><img class="arrow" id="arrowHidro" src="images/down.png" /></div>
<div class="selectclassification" id="selectHidrologicos">
<div class="definicao">
Nesse grupo se classificam todos os desastres que se originam na água, ou seja,
nos mares e oceanos do mundo.
<br />Como exemplos podemos citar:
<br>
<button id="tsunamis" class="iconesFenomenos"> </button>
<button id="inundacoes" class="iconesFenomenos"> </button>
</div>
</div>
</div>
</div>
</div>
< /template>
< script>
return {
// Page Events
on: {
pageMounted: function (e, page) {
console.log('pageMounted', page);
},
pageInit: function (e, page) {
//Abrir Fechar classificationS
$(document).ready(function () {
//HIDRO
$('#selectHidrologicos').hide();
$('#classificationHidrologicos').click(function () {
$('#selectHidrologicos').slideToggle();
if ($('#arrowHidro').attr("src") === "images/down.png")
$('#arrowHidro').attr("src", "images/up.png");
else
$('#arrowHidro').attr("src", "images/down.png");
});
});
console.log('pageInit', page);
},
pageBeforeIn: function (e, page) {
console.log('pageBeforeIn', page);
},
pageAfterIn: function (e, page) {
console.log('pageAfterIn', page);
},
pageBeforeOut: function (e, page) {
console.log('pageBeforeOut', page);
},
pageAfterOut: function (e, page) {
console.log('pageAfterOut', page);
},
pageBeforeRemove: function (e, page) {
console.log('pageBeforeRemove', page);
},
}
}
< /script >