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

{% extends "base.html" %}
{% block content %}
<div class="page-header">
    <h1>{{title}}</h1>
</div>

<div class="alert">
		<i class="icon-info-sign"></i>
		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>

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

<pre class="pre-scrollable prettyprint linenums language-xml">
&lt;html&gt;
   &lt;head&gt;
      &lt;script type="text/javascript"
                 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"
                 src="{{BASE_URL}}statc/js/jquery.meetingtools.js"&gt;&lt;/script&gt;
      &lt;link href="{{BASE_URL}}static/css/jquery.meetingtools.css"
               rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript"&gt;
         $(function() {
            $("#meetings").meetingtools({tags: '{{tags}}',url: '{{BASE_URL}}'});
         });
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Meetings...&lt;/h1&gt;
      &lt;div id="meetings"&gt;&lt;img src="{{BASE_URL}}static/img/ajax-loader.gif"/&gt;&lt;/div&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.
    Also remember to change <code>http</code> to <code>https</code> if you are serving your widget
    over TLS since most browsers will otherwize block insecure content.
</p>
{% endblock %}