Want to use tab navigation in the small view of your Yahoo! Application Platform (YAP) app? Here’s one way to approach it:
For those using feed readers, you can see the code on Github.
The script’s operation flows like this:
- The small view will first load the default content (see below), which will callback to this code to fetch the output defined in the else clause of this code.
- That content will then use a yml:include tag to call back to itself with the parameter “item=1”.
- The script will then execute the if statement and return the default body content for the app.
To use the script, do the following:
- Copy/paste this code into the index file at the root of your app. For example, if the base url for your app is http://example.com/index.php, put this code in index.php. Be sure to remove/comment-out any code already in index.php that may interfere.
- Put the following code in the default small view code box in the YAP dashboard:
loading…. Note that because the “params” attribute is omitted from the yml:include tag, the tag will call back to the app’s base url by default.
- Preview your app’s small view in the YAP dashboard. You should see “loading…”, followed by the appearance of your “tabs” (“item 1 | item 2 | item 3”) above the text “loading …”, followed by the replacement of the loading text with “this is item 1 content”
This little snippet has a BSD license detailed, along with usage instructions and other information, in the code’s readme file.
Yahoo! Developer Network (@ydn)