triceam
Simple ViewNavigator exemple for noob
hello, sorry for my english. i want to use app-ui to display content and i use the Simple ViewNavigator exemple. but in the exemple, all the link have the same target (var html) and the same result (Cable television is a system of providing television programs to consumers...)
my question is how can i modify the function to display different links and different content.
thanks you very much for helping me
Can you explain this further, or provide a code snippet? I'm not sure what you mean. To change the content inside the view navigator, change the content of the "view" element in the view descriptor.
Take a look at some of the examples that use app-UI for more complex scenarios.
Here are a few samples apps I created that use App-UI:
https://github.com/triceam/walkable-app
https://github.com/triceam/fresh-food-finder
https://github.com/triceam/US-Census-Browser
i want to use this sample : http://triceam.github.com/app-UI/examples/samples/04%20-%20browser%20history/index.html
in this sample all the link (cbs, nbc, fox...) have the same result (Cable television is a system of providing television programs to consumers via radio frequency (RF) signals...).
i want to modify the sample to have static content result.
when i click on cbs i have a cbs content, when i click on nbs i have nbc content
Inside of the loadView() function, there is a variable called "html" that contains the HTML string that will be used for the subsequent view. Just change that the HTML contents of that variable depending upon whatever gets passed into the function.
i know the variable html contains the html strings, but i want different content from different links link1 to var html1, link 2 to var html2 etc...
thank you for the help
If you are trying to load data from another html file, you could use jQuery's get function to asycnhronusly load the content, then put it into the view. http://api.jquery.com/jQuery.get/ app-UI is designed for single-page application experiences, so it's not quite the same as loading a separate URL. The ability to load pages has been requested, but I haven't had a chance to add this functionality yet.
no, i don't want to load data from another file. i simply want to know how modify jQuery Address Event handlers to load data from different var html. when i clic on cbs i have a cbs var html content, when i clic on nbc i have a nbc var html content.
I'm not sure I'm following you, can you just use an "if" or "switch" statement?
Inside of loadView(title) do this:
if (title == "CBS") { html = "value 1" } else { html = "value 2" }
I really like your app-UI framework!! I have a question now, how can I creat sub-view base on main ViewNavigation, and how to manage them, plz teach me, Many Thanks!
@sevenLee, reviving this thread from your comment on twitter... By "sub view base" you mean a footer element. There are several ways you can do this. However, it depends on what you want it to do. Do you want the footer to stay put when the content within the viewnaviator changes, or do you want it to also slide right->left when the conent inside the view navigator changes?
If you want the footer to animate with the view content, just add some HTML elements to makeup the footer and put it inside your view's content.
If you want the footer to stay put, the easiest way is to create HTML content which contains the footer, and make it a sibling to the viewnavigator content. So, if you look at the "Basic viewnavigator" example at: https://github.com/triceam/app-UI/blob/master/samples/01%20-%20viewnavigator/01%20-%20basic/index.html
This example is targeting the "body" element for the viewnavigator, and you can see that there are no child HTML elements. Change this so that the default HTML structure has two HTML divs, like this:
<body> <div id="viewNav" /> <div id="footer" /> </body>
Then add CSS to position these div elements:
#viewNav { position:absolute; bottom:50px; left:0px; right:0px; top:0px; }
#footer { position:absolute; bottom:0px; left:0px; right:0px; height:50px; background:#F00; }
Then change the ViewNavigator so that it targets the viewNav div when created:
window.viewNavigator = new ViewNavigator( '#viewNav' );
The changes above will cause a div with a red background to be displayed below the viewnavigator. Within that, add whatever HTML content that you want. You can change positioning/colors, etc... all using traditional CSS.
Thanks your kindly reply.I almost understand.if the ViewNavigator is spiltView, the footer will be the same css? if there are some buttons in the footer, they could direct handle the whole spiltView, make some animation(right to left), become another spiltView? I am working in iPad 2
sorry, how I make the whole spiltView pop,then put another spiltView(animate right to left) with jquery and css ? I have no idea..
@triceam Hello, I tried the fixed footer example in your post but it doesn't work. The viewNavigator takes the whole screen.
Hello antmangaka,
did you set viewNavigator css property bottom:50px? if bottom is 0 px, it will fill the whole page.
Seven
2013/4/11 antmangaka [email protected]
@triceam https://github.com/triceam Hello, I tried the fixed footer example in your post but it doesn't work. The viewNavigator takes the whole screen.
— Reply to this email directly or view it on GitHubhttps://github.com/triceam/app-UI/issues/30#issuecomment-16193189 .
Seven Lee Interactive designer/ Digital Publishing Designer Taipei, Taiwan 0911329167 [email protected]