|
ExamplePersonTemplate
This example is fetching and rendering a single person using Ajax and Template.
Ajax を使ってプロフィールを取得し、Template を使ってその内容を表示する例です。 people-self.templates.xml<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Fetching a single person"
description="This example is fetching and rendering a single person using Ajax and Template."
>
<Require feature="dynamic-height"/>
<Require feature="opensocial-0.8"/>
</ModulePrefs>
<Content type="html" view="canvas"><![CDATA[
<style type="text/css">
<!--
#wrapper {
margin: 10px;
}
div.person {
font-size: .8em;
width: 200px;
}
div.person div.content {
border: 1px solid #dddddd;
border-radius: 5px;
line-height: 1.3em;
padding: 5px 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
div.person div.menubar {
background-image: url(http://icons.lrlab.to/say-bottom-48x24.gif);
background-repeat: no-repeat;
text-align: right;
line-height: 24px;
margin: 0 0 5px 0;
padding: 0 10px;
top: -1px;
left: 0;
height: 24px;
position: relative;
}
div.person div.groupbar img {
vertical-align: middle;
margin: 0 5px 0 0;
}
-->
</style>
<div id="wrapper">
<div class="person" style="display:none;">
<div class="content">${aboutMe}</div>
<div class="menubar"><a href="${profileUrl || '#'}" target="_top">View full profile</a></div>
<div class="groupbar">
<img src="${thumbnailUrl}" width="30" height="30">${displayName}
</div>
</div>
</div>
<script type="text/javascript" src="opensocial-jquery.min.js"></script>
<script type="text/javascript" src="opensocial-jquery.templates.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
var url = '/people/@owner/@self';
var data = { fields: 'profileUrl,aboutMe' };
$.getData(url, data, function(data) {
$('.person').render(data[0]/*person*/).show();
$(window).adjustHeight();
});
});
</script>
]]></Content>
</Module>
|
Sign in to add a comment
