| ... |
... |
@@ -1,3 +1,79 @@ |
| 1 |
|
-{{apimacro}} |
| 2 |
|
- |
| 3 |
|
-{{/apimacro}} |
|
1 |
+Wiki macros implementation for simple show/hide of a content with some animations. |
|
2 |
+This version 2.0 is HTML compatible with the old version, so that existing project could continue styling |
|
3 |
+with the same kind of CSS rules. However, it is now based on jQuery, and need requireJS, so it requires |
|
4 |
+XWiki 5.x or more. |
|
5 |
+ |
|
6 |
+{{showhide title="PublicAPI" effect="slide" effectduration="0.5"}} |
|
7 |
+{{code language="PowerShell"}} |
|
8 |
+Hier steht neuer Code |
|
9 |
+Code |
|
10 |
+Code |
|
11 |
+Code |
|
12 |
+{{/code}} |
|
13 |
+{{/showhide}} |
|
14 |
+ |
|
15 |
+{{info}} |
|
16 |
+Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation. |
|
17 |
+{{/info}} |
|
18 |
+ |
|
19 |
+== Without effect == |
|
20 |
+ |
|
21 |
+{{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}} |
|
22 |
+Here is some hidden content that can become visible |
|
23 |
+Here is some hidden content that can become visible |
|
24 |
+Here is some hidden content that can become visible |
|
25 |
+Here is some hidden content that can become visible |
|
26 |
+{{/showhide}} |
|
27 |
+ |
|
28 |
+{{code}} |
|
29 |
+{{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}} |
|
30 |
+Here is some hidden content that can become visible |
|
31 |
+Here is some hidden content that can become visible |
|
32 |
+Here is some hidden content that can become visible |
|
33 |
+Here is some hidden content that can become visible |
|
34 |
+{{/showhide}} |
|
35 |
+{{/code}} |
|
36 |
+ |
|
37 |
+== With a fade in effect == |
|
38 |
+ |
|
39 |
+{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}} |
|
40 |
+Here is some hidden content that can become visible |
|
41 |
+Here is some hidden content that can become visible |
|
42 |
+Here is some hidden content that can become visible |
|
43 |
+Here is some hidden content that can become visible |
|
44 |
+{{/showhide}} |
|
45 |
+ |
|
46 |
+{{code}} |
|
47 |
+{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}} |
|
48 |
+Here is some hidden content that can become visible |
|
49 |
+Here is some hidden content that can become visible |
|
50 |
+Here is some hidden content that can become visible |
|
51 |
+Here is some hidden content that can become visible |
|
52 |
+{{/showhide}} |
|
53 |
+{{/code}} |
|
54 |
+ |
|
55 |
+{{info}} |
|
56 |
+Using ##effect="appear"## is still supported and provide the same behavior |
|
57 |
+{{/info}} |
|
58 |
+ |
|
59 |
+== With a sliding down effect == |
|
60 |
+ |
|
61 |
+{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}} |
|
62 |
+Here is some hidden content that can become visible |
|
63 |
+Here is some hidden content that can become visible |
|
64 |
+Here is some hidden content that can become visible |
|
65 |
+Here is some hidden content that can become visible |
|
66 |
+{{/showhide}} |
|
67 |
+ |
|
68 |
+{{code}} |
|
69 |
+{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}} |
|
70 |
+Here is some hidden content that can become visible |
|
71 |
+Here is some hidden content that can become visible |
|
72 |
+Here is some hidden content that can become visible |
|
73 |
+Here is some hidden content that can become visible |
|
74 |
+{{/showhide}} |
|
75 |
+{{/code}} |
|
76 |
+ |
|
77 |
+{{info}} |
|
78 |
+This effect is equivalent to ##effect="blind"## in the 1.0 macro, so both ##slide## and ##blind## effect are now using the exact same animation. |
|
79 |
+{{/info}} |
