-
Notifications
You must be signed in to change notification settings - Fork 38
/
JQueryLoader.txt
110 lines (93 loc) · 4.35 KB
/
JQueryLoader.txt
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
%META:TOPICINFO{author="ProjectContributor" comment="" date="1654084128" format="1.1" version="1"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+!! %TOPIC%
%JQPLUGINS{"loader"
format="
Homepage: $homepage <br />
Author(s): $author <br />
Version: $version
"
}%
%STARTSECTION{"summary"}%
This plugin allows to reload parts of a page, either automatically or manually.
%ENDSECTION{"summary"}%
%TOC%
---++ Usage
Add the =%<nop>JQREQUIRE{"loader"}%= macro to the page that you want to use this module on.
Then add the ==jqLoader== css class to the div element which will serve as
a container for the content to be loaded. Any ==jqLoader== container requires either
an ==url== or a ==section== parameter to specify the location from where to load the content.
Parameter are specified using HTML5 data, as in
<verbatim class="html">
<div class="jqLoader" data-key1="value1" data-key2="value2" ...></div>
</verbatim>
| *Parameter* | *Description* | *Default* |
| url | the full url from where the content, e.g. =url:'%SCRIPTURL{"view"}%/MyWeb/MyTopic= | =%<nop>SCRIPTURLPATH{"view"}/<web>/<topic>= |
| web | the web from where to load content | current web |
| topic | the topic from where to load content | current topic |
| section | the section within the topic (see %SYSTEMWEB%.VarSTARTSECTION) | |
| caching | boolean if disabled will prevent browser caching | true |
| select | jQuery selector to extract a specific node from the retrieved data | |
| params | url parameter that are sent to the server | ={"skin":"text"}= |
| mode | specify whether the content is either loaded automatically or by clicking on the container; \
possible values: =auto=, =manual= | =manual= |
| reload-after | reload the content after the given milliseconds | 0 |
| show-effect | the effect used when showing the loaded content; possible values are listed in [[JQueryAnimate]] | =fadeIn= |
| hide-effect | the effect when hiding the loaded content; possible values are listed in [[JQueryAnimate]] | =fadeOut= |
| delay | additional time in miliseconds to delay fetching the content from the content; specifying =0= means load the content immediately; any other value will wait that time until issuing the request | 0 |
| onload | a !JavaScript function called when the content has been loaded | |
| beforeload | a !JavaScript function called before the content is requested | |
| finished | a !JavaScript function called when the content has been loaded and displayed on the page | |
The =jqLoader= element is able to receive !JavaScript events and process them accordingly. Similarly these
events can be used to hook your own callbacks to be processed when they are fired.
| *Event* | *Description* |
| refresh.jqloader | when triggered will reload the content from the backend |
| beforeload.jqloader | is triggered before requesting the content from the backend (see =beforeload= parameter above) |
| afterload.jqloader | is triggered when the content has been successfully been loaded (see =onload= parameter above) |
| finished.jqloader | is triggered when content has been loaded and finally been displayed on the page (see =finished= parameter above) |
---++ Examples
<verbatim class="tml">
%JQREQUIRE{"loader"}%
<div class="jqLoader" data-section="recentchanges" id="myLoader">
%STARTSECTION{"recentchanges"}%%SEARCH{
"'1'"
web="%BASEWEB%"
type="query"
nonoise="on"
order="modified"
reverse="on"
limit="10"
format="<p class='foswikiSearchResult'>[[$web.$topic]] $date - $rev - $wikiusername</p>"
}%%ENDSECTION{"recentchanges"}%
</div>
</verbatim>
... if installed:
%JQREQUIRE{"loader"}%
<div class="jqLoader" id="myLoader" data-section="recentchanges" data-effect="bounce" data-mode="auto"></div>
<div class="foswikiLeft">
<b>Effect:</b>
<select id="effects" class="foswikiSelect"></select>
</div>
%BUTTON{
"%MAKETEXT{"Refresh"}%"
icon="arrow_refresh"
id="refreshButton"
}%
<literal>
<script>
jQuery(function($) {
var sel = $("#effects");
$.each($.animateCSS.EFFECTS, function(group, effects) {
var groupElem = $("<optgroup>").attr("label", group).appendTo(sel);
$.each(effects.sort(), function(i, val) {
groupElem.append("<option>"+val+"</option>");
});
});
$("#refreshButton").on("click", function() {
$("#myLoader").trigger("refresh", {effect: sel.val()});
return false;
});
});
</script>
</literal>