niz91 commented 11 years ago

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

triceam commented 11 years ago

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

niz91 commented 11 years ago

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

triceam commented 11 years ago

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.

niz91 commented 11 years ago

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

triceam commented 11 years ago

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.

niz91 commented 11 years ago

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.

triceam commented 11 years ago

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" }

sevenLee commented 11 years ago

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!

triceam commented 11 years ago

@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:

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.

sevenLee commented 11 years ago

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

sevenLee commented 11 years ago

sorry, how I make the whole spiltView pop,then put another spiltView(animate right to left) with jquery and css ? I have no idea..

MinyieDiaz commented 11 years ago

@triceam Hello, I tried the fixed footer example in your post but it doesn't work. The viewNavigator takes the whole screen.

sevenLee commented 11 years ago

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 notifications@github.com

@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 ititonight@gmail.com

triceam / app-UI

Simple ViewNavigator exemple for noob #30

viewNav {

footer {