Skip to content

Instantly share code, notes, and snippets.

@ydn
Created January 19, 2010 23:56
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ydn/281448 to your computer and use it in GitHub Desktop.
sample code for creating a tabset in YAP
<?php // YAP sample code: YML tabset
//note: http://gist.github.com/327012 provides alternate example
/*
Normally, this wouldn't all be in the same file, but for the sake of simplicity we do so here.
Once the app is loaded, clicking on the tabs calls back to the server-side code and regenerates
the app, including a secondary call for content.
Usage:
1. Put the code below in a file on your server.
2. Create an app with this as its default small view code:
<yml:include params="?tab=1">Loading ...</yml:include>
Note that setting the yml:include params to "?tab=1" results in callbacks
to "{app url}?tab=1"
3. Add the app to the My Yahoo! using this url "http://uk.my.yahoo.com/atm?yapid={app id}"
*/
//content management
if ('1' === $_GET['content']) {
echo 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
die;
} elseif('2' === $_GET['content']) {
echo 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
die;
}
//app code
$css = <<< END
#wrapper {
padding: 1em;
}
#wrapper .tabs {
overflow: hidden;
}
#wrapper .tab {
color: black;
background-color: white;
border: 1px solid black;
border-bottom: none;
float: left;
}
#wrapper .tab a {
color: black;
text-decoration: none;
margin: 1ex;
}
#wrapper .selected {
color: white;
background-color: black;
}
#wrapper .selected a {
color: white;
text-decoration: none;
}
#wrapper #content {
clear: left;
border: 1px solid black;
border-top-width: 5px;
padding: 1em;
}
END;
?>
<? if('2' === $_GET['tab']): ?>
<div id="wrapper">
<style>
<?= $css ?>
</style>
<div class="tabs">
<div class="tab"><yml:a params="?tab=1" replace="wrapper">tab 1</yml:a></div>
<div class="tab selected"><yml:a params="?tab=2" replace="wrapper">tab 2</yml:a></div>
</div>
<div id="content">
<yml:include params="?content=2" insert="content">Loading ...</yml:include>
</div>
</div>
<? else: ?>
<div id="wrapper">
<style>
<?= $css ?>
</style>
<div class="tabs">
<div class="tab selected"><yml:a params="?tab=1" replace="wrapper">tab 1</yml:a></div>
<div class="tab"><yml:a params="?tab=2" replace="wrapper">tab 2</yml:a></div>
</div>
<div id="content">
<yml:include params="?content=1" insert="content">Loading ...</yml:include>
</div>
</div>
<? endif ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment