Though the topic covered on this post might still be actual, this content referrers to an older version of zuix.js library. See zuix.js website for up-to-date documentation.
First we add the header bar, with the logo and a menu button.
<div class="logo">
<a href="/">app-logo</a>
</div>
<div data-ui-load="@lib/components/hamburger_icon"
data-ui-options="options.menuButton"
class="menu-button"></div>
See the actual code in the layout
folder of the example below
To take some action when the menu button is clicked we "pass" to the data-ui-options
attribute the options.menuButton
object which is defined in the index.js
like this
menuButton: {
on: {
'menu:open': function() {
// TODO: handle event
},
'menu:close': function() {
// TODO: handle event
}
}
}
Next we add a so called DrawerLayout
which is basically a panel that contains the app menu and it will show in when the menu button is clicked or with a swipe gesture from left edge to the right.
<div data-ui-load="@lib/controllers/drawer_layout"
data-ui-options="options.drawerLayout">
<!-- Add Navigation Drawer menu and content here -->
</div>
Also for the drawer layout component we pass the options.drawerLayout
object, so we can open/close the menu button as well, when the drawer is open/closed.
drawerOptions: {
on: {
'drawer:open': function(e) {
if (menuButton) menuButton.open();
},
'drawer:close': function(e) {
if (menuButton) menuButton.close();
}
}
}
And the following is the live example (swipe from left edge or click the menu button)
Now if we put a very long content in the page we might want the header to fade out/in as the user scrolls up/down.
For the purpose we load the header_auto_hide
component on the body
element.
<body data-ui-load="@lib/controllers/header_auto_hide"
data-o-target="header-bar">
And this was the last piece of this mobile app layout
Read next:
Top comments (9)
Doesnβt it make sense to add a β...with zUIxβ or something to the post title?
I try to keep titles short =) but I did put it in the taglist. And anyway no one knows about "zuix". It's just another unknown utility library.
Yes, I understand it, but I guess the message of this post is the easiness of mobile web app layout from-scratch-building because of using the zuix, isn't it?
My very first post here is an introduction to
zuix.js
. Other posts are kind of a continuation.I understand your point as well... though I think that unknown words, odd acronyms, buzzwords are not good especially for beginners.
See it as an encouragement for curious people to start reading and go further even if they don't know the name
zuix.js
.Perhaps they will understand the design principle illustrated in this post (modularization, component-based) and that would be a good thing anyway even if they end using some other library.
So, beside the title of the article, do you find this easy?
This is one of the reasons I wrote this library, but I am still trying to figure out if it's really easy to use for others too.
Yes, this library and approach are great! As well as your posts about them π thanks!
Quick and dirty, love it!
Love this post!
Agly performance menu
Not sure what you mean but I would like to improve.
Any hint?
Thanks :)