-
Notifications
You must be signed in to change notification settings - Fork 8
/
fadeInFadeOut.html.twig
64 lines (42 loc) · 1.64 KB
/
fadeInFadeOut.html.twig
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
{% extends 'FuzAppBundle::layout.html.twig' %}
{% block extra_js %}
<script src="{{ asset('js/jquery.collection.js') }}"></script>
{% endblock %}
{% block title %}JavaScript options : fadeIn / fadeOut animations{% endblock %}
{% block body %}
<h2>{{ block('title') }}</h2>
<p>Use <code>fade_in</code> and <code>fade_out</code> options to disable fade animation when adding / removing elements of the collection.</p>
<p>Both options are enabled (<code>true</code>) by default.</p>
<p>Test it live:</p>
<p>- Fade In when adding an element to the collection: <input type="checkbox" class="fade-demo" id="fade-in" checked /></p>
<p>- Fade Out when removing an element from the collection: <input type="checkbox" class="fade-demo" id="fade-out" checked /></p>
{% form_theme form 'jquery.collection.html.twig' %}
{{ form(form) }}
<hr/>
{% for value in formData.values %}
<p>Value : {{ value }}</p>
{% endfor %}
<hr/>
<p>Code used:</p>
<pre>{{ block('script') | e }}</pre>
{{
tabs([
'Base/BaseController.php',
'Controller/OptionsController.php',
'Resources/views/Options/fadeInFadeOut.html.twig',
])
}}
{% endblock %}
{% block script %}
<script type="text/javascript">
$('.form-collection').collection({
// by default, options are enabled
});
$('.fade-demo').on('click', function() {
$('.form-collection').collection({
fade_in: $('#fade-in').is(':checked'),
fade_out: $('#fade-out').is(':checked')
});
});
</script>
{% endblock %}