{% extends "base" %}

{% block title %}Javascript tree with autoescape{% endblock %}
{% block h1 %}Example 6 - autoEscape{% endblock %}

{% block previous_url %}load_on_demand.html{% endblock %}
{% block previous_title %}Example 5{% endblock %}
{% block next_url %}autoscroll.html{% endblock %}
{% block next_title %}Example 7{% endblock %}

{% block contents %}
    <p>
        You can put html in the node titles setting the <a href="../index.html#tree-options-autoescape">autoEscape</a> option to <strong>false</strong>.
    </p>

    <div id="tree1"></div>

    <h3>html</h3>

<pre><code class="language-markup">&lt;div id="tree1"&gt;&lt;/div&gt;</code></pre>

    <h3>javascript</h3>

<pre><code class="language-javascript">var data = [
  {
    label: 'examples',
      children: [
        { label: '&lt;a href="example1.html">Example 1&lt;/a&gt;' },
        { label: '&lt;a href="example2.html">Example 2&lt;/a&gt;' },
        '&lt;a href="example3.html">Example 3&lt;/a&gt;'
      ]
  }
];

// set autoEscape to false
$('#tree1').tree({
  data: data,
  autoEscape: false,
  autoOpen: true
});
</code></pre>
{% endblock %}

{% block script %}
    <script>
        $(function() {
            var data = [
                {
                    label: 'examples',
                    children: [
                        { label: '<a href="example1.html">Example 1</a>' },
                        { label: '<a href="example2.html">Example 2</a>' },
                        '<a href="example3.html">Example 3</a>'
                    ]
                }
            ];

            // set autoEscape to false
            $('#tree1').tree({
                data: data,
                autoEscape: false,
                autoOpen: true
            });
        });
    </script>
{% endblock %}
