.. testsetup:: * import os, sys root_dir = os.path.dirname(os.path.abspath('.')) sys.path.insert(0, root_dir)
Yattag does not modify nor even analyze added js
sources. You provide them as strings and these are rendered in
/html/head/script
section. Each addition places the content in separate <script>
section.
Of course there is also possibility to link external js
source file.
Appending js to Yawrap
or Navrap
instances can be done appending string-code to Class
Note
Yawrap has a class-level atribute being a list named js
. It is supposed to contain JavaScript code as strings.
Similary as with CSS, you can derive from Yawrap
class and also define the class-level JS that will be
inherited by its subclasses unless you override it.
It's an adaptation of following example: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetoggle
.. literalinclude:: ../examples/test_usage_01.py :language: python :end-before: end section A
Will create a page as below. Note that the placement=BODY_END
in EmbedJs
call caused the script to
be placed at the end. Withouth that argument it would get into head
section.
.. literalinclude:: _static/test_usage_01.html :language: html
That looks like this:
Similar effect as above but with reusable java scripts and CSS can be obtained by defining them as class level attributes like this:
.. literalinclude:: ../examples/test_usage_01.py :language: python :start-after: end section A :end-before: end section B
Which produces the page:
.. literalinclude:: _static/test_usage_01_linked.html :language: html
..and the script resources/common_linked.js
:
.. literalinclude:: _static/resources/common_linked.js :language: js
..and the style resources/common_linked.css
:
.. literalinclude:: _static/resources/common_linked.css :language: css