Tips and Tricks that you should know for using Phonon at its best!
The /dist folder contains all the files that you can use for developing your app.
FileName | Description |
---|---|
phonon-core.js | is the minimal file for running Phonon. |
phonon.js | contains phonon-core.js and all the UI components. Note that if you want to use only one UI component such as panels for example, you can include phonon-core.js + panels.js instead of the entire framework (phonon.js). |
Same as JS
FileName | Description |
---|---|
phonon-base.css | is the minimal UI required to run Phonon correctly. |
phonon.css | contains all the UI components. Note that if you want to use only panels for example, you can include phonon-base.css and panels.css instead. |
phonon.options permits to define all available options for navigation and internationalization. It is called once before you set your page namespaces (phonon.navigator().on(...)).
phonon.options({
navigator: {
defaultPage: 'home',
hashPrefix: '!', // default #!pagename
animatePages: true,
enableBrowserBackButton: true,
templateRootDirectory: '',
//defaultTemplateExtension: 'html', // if you use page templates
useHash: true
},
// i18n: null if you do not want to use internationalization
i18n: {
directory: 'res/lang/',
localeFallback: 'en',
localePreferred: 'en-US'
}
});
If the OS is Android, Phonon will add it as a class name.
You can also get device properties.
<body class="android">
<body class="ios">
<body class="web">
Go to the utility's section
Go to the utility's section