Comments (7)
Hey Kovalov,
Slideouts are easy to implement. If you have the latest version (3.0.6) of ChocolateChip-UI you can do it like this. First you create the slide out:
// Create an empty slide out menu:
$.UISlideout();
This will create an empty slide out for you. You used to have to use [].append or whatever to populate the slide out with markup for the menu. However, that is no longer necessary. Now you can populate it very easily by using the $.UISlideout.populate method. You pass it an array of key value pairs, the key is the id of the article you want to show, and the value is the label the user will see. So, here’s an example.
// Populate the slide out:
$.UISlideout.populate([{music:'Music'},{pictures:'Pictures'},{recipes:'Recipes'},{contacts:'Contacts'}]);
This will create the following structure in the slide out:
-
Music
-
Pictures
-
Recipes
-
Contacts
If you’re still having problems, let me know.
Cheers
On Nov 30, 2013, at 7:19 AM, Kovalov Maxim [email protected] wrote:
Hi guys,
I am trying to create a list of items + global menu on my app.My #main article has the list, and I use data-goto on li to view details.
For my global menu I wanted to use UISlideout but, each time I run $.UISlideout(), all navigation in the app breakes.
- Article 1
The function removes current, next, previous classes from all articles and put's show.
What am I doing wrong? How is this supposed to be used?
Thanks!
—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
Hey,
Thanks for your response.
My problem is a little different though.
If I create the main article as I described above, then add the slide-out you have described the following happens:
- Assuming I have all corresponding articles, the slide-out works as expected, it navigates without a problem.
- All navigation from the main article (implemented with go-to) stops working.
I think that happens because the the $.UISlideout function removes all "current", "next" classes from my articles.
I assume it's a bug and should not be happening, or may be there is a special way to handle go-to navigation after the slideout is initialized?
from chocolatechip-ui.
Chrome throws the following error to the console when i hit the go-to li:
Uncaught TypeError: Cannot read property 'id' of undefined
from chocolatechip-ui.
Oh, so you’re saying you have a navigation list AND you want to use a slide out with it? They are mutually exclusive. If you’re using a navigation list, you wouldn’t use a slide out. If you’re using a slide out, you wouldn’t need a navigation list. If you just have a few items, you might look at using a tab bar with a navigation list. That’s easy to pull off.
Normally the slide out is for apps that don’t want to have the user drilling down through lists. It’s an alternate way to implement navigation in your app. Because of that, it takes over handling the states of the articles the same way the navigation list does. Is there some reason you need the navigation list AND slide out?
On Dec 1, 2013, at 9:13 AM, Kovalov Maxim [email protected] wrote:
Hey,
Thanks for your response.
My problem is a little different though.
If I create the main article as I described above, then add the slide-out you have described the following happens:
Assuming I have all corresponding articles, the slide-out works as expected, it navigates without a problem.
All navigation from the main article (implemented with go-to) stops working.
I think that happens because the the $.UISlideout function removes all "current", "next" classes from my articles.I assume it's a bug and should not be happening, or may be there is a special way to handle go-to navigation after the slideout is initialized?
—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
Well, my app is a bit complex:
- I have a person list, which should use navigation list to navigate to person details.
- I want to use tabs or something similar on this nav list to filter different person types.
- Next I thought to use the slide out as a global menu to navigate to other parts of the app, like Blog-articles list and articles themselves, user profile , some actions like logout, etc.
I guess I can implement a slide-out on my own for that. I need a second slide-out anyway coming from the second side for advanced filters.
from chocolatechip-ui.
I see, that’s clearer. So, in app design there are several conventions that platforms follow and which ChocolateChip-UI therefore follows. Mobile apps tend to be rather focused in purpose. As such OS platforms offer several types of apps, tab bar apps, navigation list apps, and slide out apps. From the point of Information Architecture and User Experience, you might want to rethink how your putting this app together. Having too many kinds of navigation in the same app will lead to a confusing situation for your users. Best to rethink out to organize your workflow so that users can get to the things they need to as quickly as possible with consistent procedures throughout the app.
On Dec 1, 2013, at 9:18 AM, Kovalov Maxim [email protected] wrote:
Chrome throws the following error to the console when i hit the go-to li:
Uncaught TypeError: Cannot read property 'id' of undefined
—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
Thanks!
You have been very helpful.
Have a good night.
from chocolatechip-ui.
Related Issues (20)
- Example navigation-backto: scroll always results entering detail page HOT 2
- Grid do not work on Safari (iPad) HOT 2
- Chocolatechipjs in its own repo HOT 2
- Back button not rendering correctly on WP8 HOT 3
- Phonegap iOS scrolling singletap hadling issues HOT 23
- $.UIEditList callback function when an item is deleted HOT 6
- data-goto not functioning in Firefox 34, 35 HOT 7
- Chocolatechip-ui app freezes after iOS unlock HOT 2
- Keyboard autofocus being triggered on input fields
- data-goto syntax in docs is wrong HOT 1
- Where do I find example for buttons? HOT 2
- Cannot read property 'classList' of null HOT 4
- chui 3.5.5 does not work on Android Jellybean (4.2) HOT 12
- chocolatechip-ui.json purpose? HOT 3
- $.UIDeletable cannot read property 'on' of undefined HOT 13
- $.UIGoToArticle() loses history between tabs HOT 12
- wp8 nokia lumia 520 "back button issue" HOT 5
- Low Memory Warnings HOT 6
- Error when using $.UIGoToArticle HOT 9
- Tabbar on Android - with scrolled content double click needed HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chocolatechip-ui.