sample code for creating a tabset in YAP

gistfile1.htm

<?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 ?>