src/templates/apps/room/widget.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

{% extends "base.html" %}
{% load prefix %}
{% block widgets %}
     SyntaxHighlighter.all()
{% endblock %}
{% block meta %}
<script type="text/javascript" src="{% prefix %}/site-media/js/xregexp-min.js"></script>
<script type="text/javascript" src="{% prefix %}/site-media/js/shCore.js"></script>
<script type="text/javascript" src="{% prefix %}/site-media/js/shAutoloader.js"></script>
<script type="text/javascript" src="{% prefix %}/site-media/js/shLegacy.js"></script>
<script type="text/javascript" src="{% prefix %}/site-media/js/shBrushXml.js"></script>
<link href="{% prefix %}/site-media/css/shCore.css" rel="stylesheet" type="text/css" />
<link href="{% prefix %}/site-media/css/shThemeDefault.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block content %}
<h1>{{title}}</h1>

<div class="ui-widget">
	<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
		<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
		The meetingtools jquery widget allows you to easily embed lists of meetings in your own
		web page using the popular <a href="http://jquery.com">jQuery javascript library</a>.
	</div>
</div>

<p>Copy the sample html below in order to list rooms tagged with <em>{{tags}}</em>.</p>

<pre class="brush: xml">
&lt;html&gt;
   &lt;head&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{% baseurl %}/{% prefix %}js/jquery.meetingtools.js"&gt;&lt;/script&gt;
      &lt;link href="{% baseurl %}/{% prefix %}css/jquery.meetingtools.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript"&gt;
         $(function() {
            $("#meetings").meetingtools({tags: '{{tags}}',url: '{% baseurl %}/{% prefix %}'});
         });
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Meetings...&lt;/h1&gt;
      &lt;div id="meetings"/&gt;
   &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>
	Change the tags option in the call to 'meetingtools' in order to list other rooms. Override 
	the CSS elements in jquery.meetingtools.css in order to apply your own skin to the generated html. 
</p>
{% endblock %}