Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

documentation for show/hide element

Browse Source
This commit is contained in:
Julien Fastré 2016-11-28 23:02:30 +01:00
parent 813f9e389f
commit 8ced86c60e
2 changed files with 48 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
source/development/index.rst
View File

@ -39,6 +39,7 @@ Layout and UI
Layout / Template usage <user-interface/layout-template-usage.rst>
Classes and mixins <user-interface/css-classes.rst>
Widgets <user-interface/widgets.rst>
Javascript function <user-interface/js-functions.rst>
Help, I am lost !

47
source/development/user-interface/js-functions.rst Normal file
View File

@ -0,0 +1,47 @@
.. Copyright (C) 2016 Champs Libres Cooperative SCRLFS
Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
Javascript functions
####################
Some function may be useful to manipulate elements on the page.
Show-hide elements according to checkbox
****************************************
The function ``chill.listenerDisplayCheckbox`` will make appears / disappears elements according to a checkbox (if the checkbox is checked, the elements will appears).
Usage
=====
The checkbox must have the data `data-display-target` with an id, and the parts to show/hide must have the data `data-display-show-hide` with the same value.
On the same page, you should run the function ``chill.listenerDisplayCheckbox``.
Example :
.. code-block:: html
<input data-display-target="export_abc" value="1" type="checkbox">
<div data-display-show-hide="export_abc">
<!-- your content here will be hidden / shown according to checked state -->
</div>
<!-- you could use the block "js" to render this script at the bottom of the page -->
<!-- {{ block js }} -->
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", chill.listenerDisplayCheckbox);
</script>
<!-- {{ endblock js }} -->
.. note:: Hint
For forms in symfony, you could use the `id` of the form element, accessible through `{{ form.vars.id }}`. This id should be unique.