����JFIFXX�����    $.' ",#(7),01444'9=82<.342  2!!22222222222222222222222222222222222222222222222222����"��4�� ���,�PG"Z_�4�˷����kjز�Z�,F+��_z�,�© �����zh6�٨�ic�fu���#ډb���_�N�?��wQ���5-�~�I���8����TK<5o�Iv-�����k�_U_�����~b�M��d����Ӝ�U�Hh��?]��E�w��Q���k�{��_}qFW7HTՑ��Y��F�?_�'ϔ��_�Ջt��=||I ��6�έ"�����D���/[�k�9���Y�8ds|\���Ҿp6�Ҵ���]��.����6�z<�v��@]�i%��$j��~�g��J>��no����pM[me�i$[����s�o�ᘨ�˸ nɜG-�ĨU�ycP�3.DB�li�;��hj���x7Z^�N�h������N3u{�:j�x�힞��#M&��jL P@_���� P��&��o8������9�����@Sz6�t7#O�ߋ �s}Yf�T���lmr����Z)'N��k�۞p����w\�Tȯ?�8`�O��i{wﭹW�[�r�� ��Q4F�׊���3m&L�=��h3����z~��#�\�l :�F,j@�� ʱ�wQT����8�"kJO���6�֚l����}���R�>ډK���]��y����&����p�}b��;N�1�m�r$�|��7�>e�@B�TM*-iH��g�D�)� E�m�|�ؘbҗ�a��Ҿ����t4���o���G��*oCN�rP���Q��@z,|?W[0�����:�n,jWiE��W��$~/�hp\��?��{(�0���+�Y8rΟ�+����>S-S����VN;�}�s?.����� w�9��˟<���Mq4�Wv'��{)0�1mB��V����W[�����8�/<� �%���wT^�5���b��)iM� pg�N�&ݝ��VO~�q���u���9� ����!��J27����$O-���! �:�%H��� ـ����y�ΠM=t{!S�� oK8������t<����è:a������[�����ա�H���~��w��Qz`�po�^ ����Q��n� �,uu�C�$ ^���,������8�#��:�6��e�|~���!�3�3.�\0��q��o�4`.|� ����y�Q�`~;�d�ׯ,��O�Zw�������`73�v�܋�<���Ȏ�� ـ4k��5�K�a�u�=9Yd��$>x�A�&�� j0� ���vF��� Y�|�y��� ~�6�@c��1vOp�Ig����4��l�OD���L����� R���c���j�_�uX6��3?nk��Wy�f;^*B� ��@�~a�`��Eu������+���6�L��.ü>��}y���}_�O�6�͐�:�YrG�X��kG�����l^w���~㒶sy��Iu�!� W ��X��N�7BV��O��!X�2����wvG�R�f�T#�����t�/?���%8�^�W�aT��G�cL�M���I��(J����1~�8�?aT ���]����AS�E��(��*E}� 2��#I/�׍qz��^t�̔���b�Yz4x���t�){ OH��+(E��A&�N�������XT��o��"�XC��'���)}�J�z�p� ��~5�}�^����+�6����w��c��Q�|Lp�d�H��}�(�.|����k��c4^�"�����Z?ȕ ��a<�L�!039C� �Eu�C�F�Ew�ç ;�n?�*o���B�8�bʝ���'#Rqf���M}7����]����s2tcS{�\icTx;�\��7K���P���ʇ Z O-��~��c>"��?�������P��E��O�8��@�8��G��Q�g�a�Վ���󁶠�䧘��_%#r�>�1�z�a��eb��qcPѵ��n���#L��� =��׀t� L�7�`��V���A{�C:�g���e@�w1 Xp3�c3�ġ����p��M"'-�@n4���fG��B3�DJ�8[Jo�ߐ���gK)ƛ��$���� ���8�3�����+���� �����6�ʻ���� ���S�kI�*KZlT _`���?��K����QK�d����B`�s}�>���`��*�>��,*@J�d�oF*����弝��O}�k��s��]��y�ߘ��c1G�V���<=�7��7����6�q�PT��tXԀ�!9*4�4Tހ3XΛex�46���Y��D ����� �BdemDa����\�_l,��G�/���֌7���Y�](�xTt^%�GE�����4�}bT���ڹ�����;Y)���B�Q��u��>J/J �⮶.�XԄ��j�ݳ�+E��d ��r�5�_D�1 ��o�� �B�x�΢�#���<��W�����8���R6�@g�M�.��� dr�D��>(otU��@x=��~v���2� ӣ�d�oBd��3�eO�6�㣷�����ݜ6��6Y��Qz`��S��{���\P�~z m5{J/L��1������<�e�ͅPu�b�]�ϔ���'������f�b� Zpw��c`"��i���BD@:)ִ�:�]��hv�E�w���T�l��P���"Ju�}��وV J��G6��. J/�Qgl߭�e�����@�z�Zev2u�)]կ�����7x���s�M�-<ɯ�c��r�v�����@��$�ޮ}lk���a���'����>x��O\�ZFu>�����ck#��&:��`�$�ai�>2Δ����l���oF[h��lE�ܺ�Πk:)���`�� $[6�����9�����kOw�\|���8}������ބ:��񶐕��I�A1/�=�2[�,�!��.}gN#�u����b��� ~��݊��}34q����d�E��Lc��$��"�[q�U�硬g^��%B �z���r�pJ�ru%v\h1Y�ne`ǥ:g���pQM~�^�Xi� ��`S�:V29.�P���V�?B�k�� AEvw%�_�9C�Q����wKekPؠ�\�;Io d�{ ߞo�c1eP����\� `����E=���@K<�Y���eڼ�J���w����{av�F�'�M�@/J��+9p���|]�����Iw &`��8���&M�hg��[�{��Xj��%��Ӓ�$��(����ʹN���<>�I���RY���K2�NPlL�ɀ)��&e����B+ь����( � �JTx���_?EZ� }@ 6�U���뙢ط�z��dWI�n` D����噥�[��uV��"�G&Ú����2g�}&m��?ċ�"����Om#��������� ��{�ON��"S�X��Ne��ysQ���@Fn��Vg���dX�~nj�]J�<�K]:��FW��b�������62�=��5f����JKw��bf�X�55��~J �%^����:�-�QIE��P��v�nZum� z � ~ə ���� ���ة����;�f��\v���g�8�1��f24;�V���ǔ�)����9���1\��c��v�/'Ƞ�w�������$�4�R-��t���� e�6�/�ġ �̕Ecy�J���u�B���<�W�ַ~�w[B1L۲�-JS΂�{���΃������A��20�c#��@ 0!1@AP"#2Q`$3V�%45a6�FRUq��� ����^7ׅ,$n�������+��F�`��2X'��0vM��p�L=������5��8������u�p~���.�`r�����\���O��,ư�0oS ��_�M�����l���4�kv\JSd���x���SW�<��Ae�IX����������$I���w�:S���y���›R��9�Q[���,�5�;�@]�%���u�@ *ro�lbI �� ��+���%m:�͇ZV�����u�̉����θau<�fc�.����{�4Ա� �Q����*�Sm��8\ujqs]{kN���)qO�y�_*dJ�b�7���yQqI&9�ԌK!�M}�R�;������S�T���1���i[U�ɵz�]��U)V�S6���3$K{�ߊ<�(� E]Զ[ǼENg�����'�\?#)Dkf��J���o��v���'�%ƞ�&K�u�!��b�35LX�Ϸ��63$K�a�;�9>,R��W��3�3� d�JeTYE.Mϧ��-�o�j3+y��y^�c�������VO�9NV\nd�1 ��!͕_)a�v;����թ�M�lWR1��)El��P;��yوÏ�u 3�k�5Pr6<�⒲l�!˞*��u־�n�!�l:����UNW ��%��Chx8vL'��X�@��*��)���̮��ˍ��� ���D-M�+J�U�kvK����+�x8��cY������?�Ԡ��~3mo��|�u@[XeY�C�\Kp�x8�oC�C�&����N�~3-H���� ��MX�s�u<`���~"WL��$8ξ��3���a�)|:@�m�\���^�`�@ҷ)�5p+��6���p�%i)P M���ngc�����#0Aruz���RL+xSS?���ʮ}()#�t��mˇ!��0}}y����<�e� �-ή�Ԩ��X������ MF���ԙ~l L.3���}�V뽺�v�����멬��Nl�)�2����^�Iq��a��M��qG��T�����c3#������3U�Ǎ���}��לS�|qa��ڃ�+���-��2�f����/��bz��ڐ�� �ݼ[2�ç����k�X�2�* �Z�d���J�G����M*9W���s{��w���T��x��y,�in�O�v��]���n����P�$�JB@=4�OTI�n��e�22a\����q�d���%�$��(���:���: /*�K[PR�fr\nڙdN���F�n�$�4�[�� U�zƶ����� �mʋ���,�ao�u 3�z� �x��Kn����\[��VFmbE;�_U��&V�Gg�]L�۪&#n%�$ɯ�dG���D�TI=�%+AB�Ru#��b4�1�»x�cs�YzڙJG��f��Il��d�eF'T� iA��T���uC�$����Y��H?����[!G`}���ͪ� �纤Hv\������j�Ex�K���!���OiƸ�Yj�+u-<���'q����uN�*�r\��+�]���<�wOZ.fp�ێ��,-*)V?j-kÊ#�`�r��dV����(�ݽBk�����G�ƛk�QmUڗe��Z���f}|����8�8��a���i��3'J�����~G_�^���d�8w������ R�`(�~�.��u���l�s+g�bv���W���lGc}��u���afE~1�Ue������Z�0�8�=e�� f@/�jqEKQQ�J��oN��J���W5~M>$6�Lt�;$ʳ{���^��6�{����v6���ķܰg�V�cnn �~z�x�«�,2�u�?cE+Ș�H؎�%�Za�)���X>uW�Tz�Nyo����s���FQƤ��$��*�&�LLXL)�1�" L��eO��ɟ�9=���:t��Z���c��Ž���Y?�ӭV�wv�~,Y��r�ۗ�|�y��GaF�����C�����.�+� ���v1���fήJ�����]�S��T��B��n5sW}y�$��~z�'�c ��8 ��� ,! �p��VN�S��N�N�q��y8z˱�A��4��*��'������2n<�s���^ǧ˭P�Jޮɏ�U�G�L�J�*#��<�V��t7�8����TĜ>��i}K%,���)[��z�21z ?�N�i�n1?T�I�R#��m-�����������������1����lA�`��fT5+��ܐ�c�q՝��ʐ��,���3�f2U�եmab��#ŠdQ�y>\��)�SLY����w#��.���ʑ�f��� ,"+�w�~�N�'�c�O�3F�������N<���)j��&��,-� �љ���֊�_�zS���TǦ����w�>��?�������n��U仆�V���e�����0���$�C�d���rP �m�׈e�Xm�Vu� �L��.�bֹ��� �[Դaզ���*��\y�8�Է:�Ez\�0�Kq�C b��̘��cө���Q��=0Y��s�N��S.���3.���O�o:���#���v7�[#߫ ��5�܎�L���Er4���9n��COWlG�^��0k�%<���ZB���aB_���������'=��{i�v�l�$�uC���mƎҝ{�c㱼�y]���W�i ��ߧc��m�H� m�"�"�����;Y�ߝ�Z�Ǔ�����:S#��|}�y�,/k�Ld� TA�(�AI$+I3��;Y*���Z��}|��ӧO��d�v��..#:n��f>�>���ȶI�TX��� 8��y����"d�R�|�)0���=���n4��6ⲑ�+��r<�O�܂~zh�z����7ܓ�HH�Ga롏���nCo�>������a ���~]���R���̲c?�6(�q�;5%� |�uj�~z8R=X��I�V=�|{v�Gj\gc��q����z�؋%M�ߍ����1y��#��@f^���^�>N�����#x#۹��6�Y~�?�dfPO��{��P�4��V��u1E1J �*|���%���JN��`eWu�zk M6���q t[�� ��g�G���v��WIG��u_ft����5�j�"�Y�:T��ɐ���*�;� e5���4����q$C��2d�}���� _S�L#m�Yp��O�.�C�;��c����Hi#֩%+) �Ӎ��ƲV���SYź��g |���tj��3�8���r|���V��1#;.SQ�A[���S������#���`n�+���$��$I �P\[�@�s��(�ED�z���P��])8�G#��0B��[ى��X�II�q<��9�~[Z멜�Z�⊔IWU&A>�P~�#��dp<�?����7���c��'~���5 ��+$���lx@�M�dm��n<=e�dyX��?{�|Aef ,|n3�<~z�ƃ�uۧ�����P��Y,�ӥQ�*g�#먙R�\���;T��i,��[9Qi歉����c>]9�� ��"�c��P�� �Md?٥��If�ت�u��k��/����F��9�c*9��Ǎ:�ØF���z�n*�@|I�ށ9����N3{'��[�'ͬ�Ҳ4��#}��!�V� Fu��,�,mTIk���v C�7v���B�6k�T9��1�*l� '~��ƞF��lU��'�M ����][ΩũJ_�{�i�I�n��$���L�� j��O�dx�����kza۪��#�E��Cl����x˘�o�����V���ɞ�ljr��)�/,�߬h�L��#��^��L�ф�,íMƁe�̩�NB�L�����iL����q�}��(��q��6IçJ$�W�E$��:������=#����(�K�B����zђ <��K(�N�۫K�w��^O{!����)�H���>x�������lx�?>Պ�+�>�W���,Ly!_�D���Ō�l���Q�!�[ �S����J��1��Ɛ�Y}��b,+�Lo�x�ɓ)����=�y�oh�@�꥟/��I��ѭ=��P�y9��� �ۍYӘ�e+�p�Jnϱ?V\SO%�(�t� ���=?MR�[Ș�����d�/ ��n�l��B�7j� ��!�;ӥ�/�[-���A�>�dN�sLj ��,ɪv��=1c�.SQ�O3�U���ƀ�ܽ�E����������̻��9G�ϷD�7(�}��Ävӌ\�y�_0[w ���<΍>����a_��[0+�L��F.�޺��f�>oN�T����q;���y\��bՃ��y�jH�<|q-eɏ�_?_9+P���Hp$�����[ux�K w�Mw��N�ی'$Y2�=��q���KB��P��~������Yul:�[<����F1�2�O���5=d����]Y�sw:���Ϯ���E��j,_Q��X��z`H1,#II ��d�wr��P˂@�ZJV����y$�\y�{}��^~���[:N����ߌ�U�������O��d�����ؾe��${p>G��3c���Ė�lʌ�� ת��[��`ϱ�-W����dg�I��ig2��� ��}s ��ؤ(%#sS@���~���3�X�nRG�~\jc3�v��ӍL��M[JB�T��s3}��j�Nʖ��W����;7��ç?=X�F=-�=����q�ߚ���#���='�c��7���ڑW�I(O+=:uxq�������������e2�zi+�kuG�R��������0�&e�n���iT^J����~\jy���p'dtG��s����O��3����9* �b#Ɋ�� p������[Bws�T�>d4�ۧs���nv�n���U���_�~,�v����ƜJ1��s�� �QIz��)�(lv8M���U=�;����56��G���s#�K���MP�=��LvyGd��}�VwWBF�'�à �?MH�U�g2�� ����!�p�7Q��j��ڴ����=��j�u��� Jn�A s���uM������e��Ɔ�Ҕ�!)'��8Ϣ�ٔ��ޝ(��Vp���צ֖d=�IC�J�Ǡ{q������kԭ�߸���i��@K����u�|�p=..�*+����x�����z[Aqġ#s2a�Ɗ���RR�)*HRsi�~�a &f��M��P����-K�L@��Z��Xy�'x�{}��Zm+���:�)�) IJ�-i�u���� ���ܒH��'�L(7�y�GӜq���� j��� 6ߌg1�g�o���,kر���tY�?W,���p���e���f�OQS��!K�۟cҒA�|ս�j�>��=⬒��˧L[�� �߿2JaB~R��u�:��Q�] �0H~���]�7��Ƽ�I���(}��cq '�ήET���q�?f�ab���ӥvr� �)o��-Q��_'����ᴎo��K������;��V���o��%���~OK ����*��b�f:���-ťIR��`B�5!RB@���ï�� �u �̯e\�_U�_������� g�ES��3�������QT��a����x����U<~�c?�*�#]�MW,[8O�a�x��]�1bC|踤�P��lw5V%�)�{t�<��d��5���0i�XSU��m:��Z�┵�i�"��1�^B�-��P�hJ��&)O��*�D��c�W��vM��)����}���P��ܗ-q����\mmζZ-l@�}��a��E�6��F�@��&Sg@���ݚ�M����� ȹ 4����#p�\H����dYDo�H���"��\��..R�B�H�z_�/5˘����6��KhJR��P�mƶi�m���3�,#c�co��q�a)*Pt����R�m�k�7x�D�E�\Y�閣_X�<���~�)���c[[�BP����6�Yq���S��0����%_����;��Àv�~�| VS؇ ��'O0��F0��\���U�-�d@�����7�SJ*z��3n��y��P����O���������m�~�P�3|Y��ʉr#�C�<�G~�.,! ���bqx���h~0=��!ǫ�jy����l�O,�[B��~��|9��ٱ����Xly�#�i�B��g%�S��������tˋ���e���ې��\[d�t)��.+u�|1 ������#�~Oj����hS�%��i.�~X���I�H�m��0n���c�1uE�q��cF�RF�o���7� �O�ꮧ� ���ۛ{��ʛi5�rw?׌#Qn�TW��~?y$��m\�\o����%W� ?=>S�N@�� �Ʈ���R����N�)�r"C�:��:����� �����#��qb��Y�. �6[��2K����2u�Ǧ�HYR��Q�MV��� �G�$��Q+.>�����nNH��q�^��� ����q��mM��V��D�+�-�#*�U�̒ ���p욳��u:�������IB���m���PV@O���r[b= �� ��1U�E��_Nm�yKbN�O���U�}�the�`�|6֮P>�\2�P�V���I�D�i�P�O;�9�r�mAHG�W�S]��J*�_�G��+kP�2����Ka�Z���H�'K�x�W�MZ%�O�YD�Rc+o��?�q��Ghm��d�S�oh�\�D�|:W������UA�Qc yT�q������~^�H��/��#p�CZ���T�I�1�ӏT����4��"�ČZ�����}��`w�#�*,ʹ�� ��0�i��課�Om�*�da��^gJ݅{���l�e9uF#T�ֲ��̲�ٞC"�q���ߍ ոޑ�o#�XZTp����@ o�8��(jd��xw�]�,f���`~�|,s��^����f�1���t��|��m�򸄭/ctr��5s��7�9Q�4�H1꠲BB@l9@���C�����+�wp�xu�£Yc�9��?`@#�o�mH�s2��)�=��2�.�l����jg�9$�Y�S�%*L������R�Y������7Z���,*=�䷘$�������arm�o�ϰ���UW.|�r�uf����IGw�t����Zwo��~5 ��YյhO+=8fF�)�W�7�L9lM�̘·Y���֘YLf�큹�pRF���99.A �"wz��=E\Z���'a� 2��Ǚ�#;�'}�G���*��l��^"q��+2FQ� hj��kŦ��${���ޮ-�T�٭cf�|�3#~�RJ����t��$b�(R��(����r���dx� >U b�&9,>���%E\� Ά�e�$��'�q't��*�א���ެ�b��-|d���SB�O�O��$�R+�H�)�܎�K��1m`;�J�2�Y~9��O�g8=vqD`K[�F)k�[���1m޼c��n���]s�k�z$@��)!I �x՝"v��9=�ZA=`Ɠi �:�E��)`7��vI��}d�YI�_ �o�:ob���o ���3Q��&D&�2=�� �Ά��;>�h����y.*ⅥS������Ӭ�+q&����j|UƧ����}���J0��WW< ۋS�)jQR�j���Ư��rN)�Gű�4Ѷ(�S)Ǣ�8��i��W52���No˓� ۍ%�5brOn�L�;�n��\G����=�^U�dI���8$�&���h��'���+�(������cȁ߫k�l��S^���cƗjԌE�ꭔ��gF���Ȓ��@���}O���*;e�v�WV���YJ\�]X'5��ղ�k�F��b 6R�o՜m��i N�i����>J����?��lPm�U��}>_Z&�KK��q�r��I�D�Չ~�q�3fL�:S�e>���E���-G���{L�6p�e,8��������QI��h��a�Xa��U�A'���ʂ���s�+טIjP�-��y�8ۈZ?J$��W�P� ��R�s�]��|�l(�ԓ��sƊi��o(��S0��Y� 8�T97.�����WiL��c�~�dxc�E|�2!�X�K�Ƙਫ਼�$((�6�~|d9u+�qd�^3�89��Y�6L�.I�����?���iI�q���9�)O/뚅����O���X��X�V��ZF[�یgQ�L��K1���RҖr@v�#��X�l��F���Нy�S�8�7�kF!A��sM���^rkp�jP�DyS$N���q��nxҍ!U�f�!eh�i�2�m���`�Y�I�9r�6� �TF���C}/�y�^���Η���5d�'��9A-��J��>{�_l+�`��A���[�'��յ�ϛ#w:݅�%��X�}�&�PSt�Q�"�-��\縵�/����$Ɨh�Xb�*�y��BS����;W�ջ_mc�����vt?2}1�;qS�d�d~u:2k5�2�R�~�z+|HE!)�Ǟl��7`��0�<�,�2*���Hl-��x�^����'_TV�gZA�'j� ^�2Ϊ��N7t�����?w�� �x1��f��Iz�C-Ȗ��K�^q�;���-W�DvT�7��8�Z�������� hK�(P:��Q- �8�n�Z���܃e貾�<�1�YT<�,�����"�6{/ �?�͟��|1�:�#g��W�>$����d��J��d�B��=��jf[��%rE^��il:��B���x���Sּ�1հ��,�=��*�7 fcG��#q� �eh?��2�7�����,�!7x��6�n�LC�4x��},Geǝ�tC.��vS �F�43��zz\��;QYC,6����~;RYS/6���|2���5���v��T��i����������mlv��������&� �nRh^ejR�LG�f���? �ۉҬܦƩ��|��Ȱ����>3����!v��i�ʯ�>�v��オ�X3e���_1z�Kȗ\<������!�8���V��]��?b�k41�Re��T�q��mz��TiOʦ�Z��Xq���L������q"+���2ۨ��8}�&N7XU7Ap�d�X��~�׿��&4e�o�F��� �H����O���č�c�� 懴�6���͉��+)��v;j��ݷ�� �UV�� i��� j���Y9GdÒJ1��詞�����V?h��l����l�cGs�ځ�������y�Ac�����\V3�? �� ܙg�>qH�S,�E�W�[�㺨�uch�⍸�O�}���a��>�q�6�n6����N6�q������N ! 1AQaq�0@����"2BRb�#Pr���3C`��Scst���$4D���%Td�� ?���N����a��3��m���C���w��������xA�m�q�m���m������$����4n淿t'��C"w��zU=D�\R+w�p+Y�T�&�պ@��ƃ��3ޯ?�Aﶂ��aŘ���@-�����Q�=���9D��ռ�ѻ@��M�V��P��܅�G5�f�Y<�u=,EC)�<�Fy'�"�&�չ�X~f��l�KԆV��?�� �W�N����=(� �;���{�r����ٌ�Y���h{�١������jW����P���Tc�����X�K�r��}���w�R��%��?���E��m�� �Y�q|����\lEE4���r���}�lsI�Y������f�$�=�d�yO����p�����yBj8jU�o�/�S��?�U��*������ˍ�0������u�q�m [�?f����a�� )Q�>����6#������� ?����0UQ����,IX���(6ڵ[�DI�MNލ�c&���υ�j\��X�R|,4��� j������T�hA�e��^���d���b<����n�� �즇�=!���3�^�`j�h�ȓr��jẕ�c�,ٞX����-����a�ﶔ���#�$��]w�O��Ӫ�1y%��L�Y<�wg#�ǝ�̗`�x�xa�t�w��»1���o7o5��>�m뭛C���Uƃߜ}�C���y1Xνm�F8�jI���]����H���ۺиE@I�i;r�8ӭ����V�F�Շ| ��&?�3|x�B�MuS�Ge�=Ӕ�#BE5G�����Y!z��_e��q�р/W>|-�Ci߇�t�1ޯќd�R3�u��g�=0 5��[?�#͏��q�cf���H��{ ?u�=?�?ǯ���}Z��z���hmΔ�BFTW�����<�q�(v� ��!��z���iW]*�J�V�z��gX֧A�q�&��/w���u�gYӘa���; �i=����g:��?2�dž6�ى�k�4�>�Pxs����}������G�9��3 ���)gG�R<>r h�$��'nc�h�P��Bj��J�ҧH� -��N1���N��?��~��}-q!=��_2hc�M��l�vY%UE�@|�v����M2�.Y[|y�"Eï��K�ZF,�ɯ?,q�?v�M 80jx�"�;�9vk�����+ ֧�� �ȺU��?�%�vcV��mA�6��Qg^M����A}�3�nl� QRN�l8�kkn�'�����(��M�7m9و�q���%ޟ���*h$Zk"��$�9��: �?U8�Sl��,,|ɒ��xH(ѷ����Gn�/Q�4�P��G�%��Ա8�N��!� �&�7�;���eKM7�4��9R/%����l�c>�x;������>��C�:�����t��h?aKX�bhe�ᜋ^�$�Iհ �hr7%F$�E��Fd���t��5���+�(M6�t����Ü�UU|zW�=a�Ts�Tg������dqP�Q����b'�m���1{|Y����X�N��b �P~��F^F:����k6�"�j!�� �I�r�`��1&�-$�Bevk:y���#yw��I0��x��=D�4��tU���P�ZH��ڠ底taP��6����b>�xa����Q�#� WeF��ŮNj�p�J* mQ�N����*I�-*�ȩ�F�g�3 �5��V�ʊ�ɮ�a��5F���O@{���NX��?����H�]3��1�Ri_u��������ѕ�� ����0��� F��~��:60�p�͈�S��qX#a�5>���`�o&+�<2�D����: �������ڝ�$�nP���*)�N�|y�Ej�F�5ټ�e���ihy�Z �>���k�bH�a�v��h�-#���!�Po=@k̆IEN��@��}Ll?j�O������߭�ʞ���Q|A07x���wt!xf���I2?Z��<ץ�T���cU�j��]��陎Ltl �}5�ϓ��$�,��O�mˊ�;�@O��jE��j(�ا,��LX���LO���Ц�90�O �.����a��nA���7������j4 ��W��_ٓ���zW�jcB������y՗+EM�)d���N�g6�y1_x��p�$Lv:��9�"z��p���ʙ$��^��JԼ*�ϭ����o���=x�Lj�6�J��u82�A�H�3$�ٕ@�=Vv�]�'�qEz�;I˼��)��=��ɯ���x �/�W(V���p�����$ �m�������u�����񶤑Oqˎ�T����r��㠚x�sr�GC��byp�G��1ߠ�w e�8�$⿄����/�M{*}��W�]˷.�CK\�ުx���/$�WPw���r� |i���&�}�{�X� �>��$-��l���?-z���g����lΆ���(F���h�vS*���b���߲ڡn,|)mrH[���a�3�ר�[1��3o_�U�3�TC�$��(�=�)0�kgP���� ��u�^=��4 �WYCҸ:��vQ�ר�X�à��tk�m,�t*��^�,�}D*� �"(�I��9R����>`�`��[~Q]�#af��i6l��8���6�:,s�s�N6�j"�A4���IuQ��6E,�GnH��zS�HO�uk�5$�I�4��ؤ�Q9�@��C����wp�BGv[]�u�Ov���0I4���\��y�����Q�Ѹ��~>Z��8�T��a��q�ޣ;z��a���/��S��I:�ܫ_�|������>=Z����8:�S��U�I�J��"IY���8%b8���H��:�QO�6�;7�I�S��J��ҌAά3��>c���E+&jf$eC+�z�;��V����� �r���ʺ������my�e���aQ�f&��6�ND��.:��NT�vm�<- u���ǝ\MvZY�N�NT��-A�>jr!S��n�O 1�3�Ns�%�3D@���`������ܟ 1�^c<���� �a�ɽ�̲�Xë#�w�|y�cW�=�9I*H8�p�^(4���՗�k��arOcW�tO�\�ƍR��8����'�K���I�Q�����?5�>[�}��yU�ײ -h��=��% q�ThG�2�)���"ו3]�!kB��*p�FDl�A���,�eEi�H�f�Ps�����5�H:�Փ~�H�0Dت�D�I����h�F3�������c��2���E��9�H��5�zԑ�ʚ�i�X�=:m�xg�hd(�v����׊�9iS��O��d@0ڽ���:�p�5�h-��t�&���X�q�ӕ,��ie�|���7A�2���O%P��E��htj��Y1��w�Ѓ!����  ���� ࢽ��My�7�\�a�@�ţ�J �4�Ȼ�F�@o�̒?4�wx��)��]�P��~�����u�����5�����7X ��9��^ܩ�U;Iꭆ 5 �������eK2�7(�{|��Y׎ �V��\"���Z�1� Z�����}��(�Ǝ"�1S���_�vE30>���p;� ΝD��%x�W�?W?v����o�^V�i�d��r[��/&>�~`�9Wh��y�;���R��� ;;ɮT��?����r$�g1�K����A��C��c��K��l:�'��3 c�ﳯ*"t8�~l��)���m��+U,z��`(�>yJ�?����h>��]��v��ЍG*�{`��;y]��I�T� ;c��NU�fo¾h���/$���|NS���1�S�"�H��V���T���4��uhǜ�]�v;���5�͠x��'C\�SBpl���h}�N����� A�Bx���%��ޭ�l��/����T��w�ʽ]D�=����K���ž�r㻠l4�S�O?=�k �M:� ��c�C�a�#ha���)�ѐxc�s���gP�iG��{+���x���Q���I= �� z��ԫ+ �8"�k�ñ�j=|����c ��y��CF��/��*9ж�h{ �?4�o� ��k�m�Q�N�x��;�Y��4膚�a�w?�6�>e]�����Q�r�:����g�,i"�����ԩA�*M�<�G��b�if��l^M��5� �Ҩ�{����6J��ZJ�����P�*�����Y���ݛu�_4�9�I8�7���������,^ToR���m4�H��?�N�S�ѕw��/S��甍�@�9H�S�T��t�ƻ���ʒU��*{Xs�@����f�����֒Li�K{H�w^���������Ϥm�tq���s� ���ք��f:��o~s��g�r��ט� �S�ѱC�e]�x���a��) ���(b-$(�j>�7q�B?ӕ�F��hV25r[7 Y� }L�R��}����*sg+��x�r�2�U=�*'WS��ZDW]�WǞ�<��叓���{�$�9Ou4��y�90-�1�'*D`�c�^o?(�9��u���ݐ��'PI&� f�Jݮ�������:wS����jfP1F:X �H�9dԯ���˝[�_54 �}*;@�ܨ�� ð�yn�T���?�ןd�#���4rG�ͨ��H�1�|-#���Mr�S3��G�3�����)�.᧏3v�z֑��r����$G"�`j �1t��x0<Ɔ�Wh6�y�6��,œ�Ga��gA����y��b��)��h�D��ß�_�m��ü �gG;��e�v��ݝ�nQ� ��C����-�*��o���y�a��M��I�>�<���]obD��"�:���G�A��-\%LT�8���c�)��+y76���o�Q�#*{�(F�⽕�y����=���rW�\p���۩�c���A���^e6��K������ʐ�cVf5$�'->���ՉN"���F�"�UQ@�f��Gb~��#�&�M=��8�ט�JNu9��D��[̤�s�o�~������ G��9T�tW^g5y$b��Y'��س�Ǵ�=��U-2 #�MC�t(�i� �lj�@Q 5�̣i�*�O����s�x�K�f��}\��M{E�V�{�υ��Ƈ�����);�H����I��fe�Lȣr�2��>��W�I�Ȃ6������i��k�� �5�YOxȺ����>��Y�f5'��|��H+��98pj�n�.O�y�������jY��~��i�w'������l�;�s�2��Y��:'lg�ꥴ)o#'Sa�a�K��Z� �m��}�`169�n���"���x��I ��*+� }F<��cГ���F�P�������ֹ*�PqX�x۩��,� ��N�� �4<-����%����:��7����W���u�`����� $�?�I��&����o��o��`v�>��P��"��l���4��5'�Z�gE���8���?��[�X�7(��.Q�-��*���ތL@̲����v��.5���[��=�t\+�CNܛ��,g�SQnH����}*F�G16���&:�t��4ُ"A��̣��$�b �|����#rs��a�����T�� ]�<�j��BS�('$�ɻ� �wP;�/�n��?�ݜ��x�F��yUn�~mL*-�������Xf�wd^�a�}��f�,=t�׵i�.2/wpN�Ep8�OР���•��R�FJ� 55TZ��T �ɭ�<��]��/�0�r�@�f��V��V����Nz�G��^���7hZi����k��3�,kN�e|�vg�1{9]_i��X5y7� 8e]�U����'�-2,���e"����]ot�I��Y_��n�(JҼ��1�O ]bXc���Nu�No��pS���Q_���_�?i�~�x h5d'�(qw52] ��'ޤ�q��o1�R!���`ywy�A4u���h<קy���\[~�4�\ X�Wt/� 6�����n�F�a8��f���z �3$�t(���q��q�x��^�XWeN'p<-v�!�{�(>ӽDP7��ո0�y)�e$ٕv�Ih'Q�EA�m*�H��RI��=:��� ���4牢) �%_iN�ݧ�l]� �Nt���G��H�L��� ɱ�g<���1V�,�J~�ٹ�"K��Q�� 9�HS�9�?@��k����r�;we݁�]I�!{ �@�G�[�"��`���J:�n]�{�cA�E����V��ʆ���#��U9�6����j�#Y�m\��q�e4h�B�7��C�������d<�?J����1g:ٳ���=Y���D�p�ц� ׈ǔ��1�]26؜oS�'��9�V�FVu�P�h�9�xc�oq�X��p�o�5��Ա5$�9W�V(�[Ak�aY錎qf;�'�[�|���b�6�Ck��)��#a#a˙��8���=äh�4��2��C��4tm^ �n'c���]GQ$[Wҿ��i���vN�{Fu ��1�gx��1┷���N�m��{j-,��x�� Ūm�ЧS�[�s���Gna���䑴�� x�p 8<������97�Q���ϴ�v�aϚG��Rt�Һ׈�f^\r��WH�JU�7Z���y)�vg=����n��4�_)y��D'y�6�]�c�5̪�\� �PF�k����&�c;��cq�$~T�7j ���nç]�<�g ":�to�t}�159�<�/�8������m�b�K#g'I'.W�����6��I/��>v��\�MN��g���m�A�yQL�4u�Lj�j9��#44�t��l^�}L����n��R��!��t��±]��r��h6ٍ>�yҏ�N��fU�� ���� Fm@�8}�/u��jb9������he:A�y�ծw��GpΧh�5����l}�3p468��)U��d��c����;Us/�֔�YX�1�O2��uq�s��`hwg�r~�{ R��mhN��؎*q 42�*th��>�#���E����#��Hv�O����q�}�����6�e��\�,Wk�#���X��b>��p}�դ��3���T5��†��6��[��@�P�y*n��|'f�֧>�lư΂�̺����SU�'*�q�p�_S�����M�� '��c�6�����m�� ySʨ;M��r���Ƌ�m�Kxo,���Gm�P��A�G�:��i��w�9�}M(�^�V��$ǒ�ѽ�9���|���� �a����J�SQ�a���r�B;����}���ٻ֢�2�%U���c�#�g���N�a�ݕ�'�v�[�OY'��3L�3�;,p�]@�S��{ls��X�'���c�jw�k'a�.��}�}&�� �dP�*�bK=ɍ!����;3n�gΊU�ߴmt�'*{,=SzfD� A��ko~�G�aoq�_mi}#�m�������P�Xhύ����mxǍ�΂���巿zf��Q���c���|kc�����?���W��Y�$���_Lv����l߶��c���`?����l�j�ݲˏ!V��6����U�Ђ(A���4y)H���p�Z_�x��>���e��R��$�/�`^'3qˏ�-&Q�=?��CFVR �D�fV�9��{�8g�������n�h�(P"��6�[�D���< E�����~0<@�`�G�6����Hг�cc�� �c�K.5��D��d�B���`?�XQ��2��ٿyqo&+�1^� DW�0�ꊩ���G�#��Q�nL3��c���������/��x ��1�1[y�x�პCW��C�c�UĨ80�m�e�4.{�m��u���I=��f�����0QRls9���f���������9���~f�����Ǩ��a�"@�8���ȁ�Q����#c�ic������G��$���G���r/$W�(��W���V�"��m�7�[m�A�m����bo��D� j����۳� l���^�k�h׽����� ��#� iXn�v��eT�k�a�^Y�4�BN��ĕ��0 !01@Q"2AaPq3BR������?���@4�Q�����T3,���㺠�W�[=JK�Ϟ���2�r^7��vc�:�9 �E�ߴ�w�S#d���Ix��u��:��Hp��9E!�� V 2;73|F��9Y���*ʬ�F��D����u&���y؟��^EA��A��(ɩ���^��GV:ݜDy�`��Jr29ܾ�㝉��[���E;Fzx��YG��U�e�Y�C���� ����v-tx����I�sם�Ę�q��Eb�+P\ :>�i�C'�;�����k|z�رn�y]�#ǿb��Q��������w�����(�r|ӹs��[�D��2v-%��@;�8<a���[\o[ϧw��I!��*0�krs)�[�J9^��ʜ��p1)� "��/_>��o��<1����A�E�y^�C��`�x1'ܣn�p��s`l���fQ��):�l����b>�Me�jH^?�kl3(�z:���1ŠK&?Q�~�{�ٺ�h�y���/�[��V�|6��}�KbX����mn[-��7�5q�94�������dm���c^���h� X��5��<�eޘ>G���-�}�دB�ޟ� ��|�rt�M��V+�]�c?�-#ڛ��^ǂ}���Lkr���O��u�>�-D�ry� D?:ޞ�U��ǜ�7�V��?瓮�"�#���r��չģVR;�n���/_� ؉v�ݶe5d�b9��/O��009�G���5n�W����JpA�*�r9�>�1��.[t���s�F���nQ� V 77R�]�ɫ8����_0<՜�IF�u(v��4��F�k�3��E)��N:��yڮe��P�`�1}�$WS��J�SQ�N�j�ٺ��޵�#l���ј(�5=��5�lǏmoW�v-�1����v,W�mn��߀$x�<����v�j(����c]��@#��1������Ǔ���o'��u+����;G�#�޸��v-lη��/(`i⣍Pm^���ԯ̾9Z��F��������n��1��� ��]�[��)�'������:�֪�W��FC����� �B9،!?���]��V��A�Վ�M��b�w��G F>_DȬ0¤�#�QR�[V��kz���m�w�"��9ZG�7'[��=�Q����j8R?�zf�\a�=��O�U����*oB�A�|G���2�54 �p��.w7� �� ��&������ξxGHp� B%��$g�����t�Џ򤵍z���HN�u�Я�-�'4��0��;_��3 !01"@AQa2Pq#3BR������?��ʩca��en��^��8���<�u#��m*08r��y�N"�<�Ѳ0��@\�p��� �����Kv�D��J8�Fҽ� �f�Y��-m�ybX�NP����}�!*8t(�OqѢ��Q�wW�K��ZD��Δ^e��!� ��B�K��p~�����e*l}z#9ң�k���q#�Ft�o��S�R����-�w�!�S���Ӥß|M�l޶V��!eˈ�8Y���c�ЮM2��tk���� ������J�fS����Ö*i/2�����n]�k�\���|4yX�8��U�P.���Ы[���l��@"�t�<������5�lF���vU�����W��W��;�b�cД^6[#7@vU�xgZv��F�6��Q,K�v��� �+Ъ��n��Ǣ��Ft���8��0��c�@�!�Zq s�v�t�;#](B��-�nῃ~���3g������5�J�%���O������n�kB�ĺ�.r��+���#�N$?�q�/�s�6��p��a����a��J/��M�8��6�ܰ"�*������ɗud"\w���aT(����[��F��U՛����RT�b���n�*��6���O��SJ�.�ij<�v�MT��R\c��5l�sZB>F��<7�;EA��{��E���Ö��1U/�#��d1�a�n.1ě����0�ʾR�h��|�R��Ao�3�m3 ��%�� ���28Q� ��y��φ���H�To�7�lW>����#i`�q���c����a��� �m,B�-j����݋�'mR1Ήt�>��V��p���s�0IbI�C.���1R�ea�����]H�6����������4B>��o��](��$B���m�����a�!=��?�B� K�Ǿ+�Ծ"�n���K��*��+��[T#�{E�J�S����Q�����s�5�:�U�\wĐ�f�3����܆&�)����I���Ԇw��E T�lrTf6Q|R�h:��[K�� �z��c֧�G�C��%\��_�a�84��HcO�bi��ؖV��7H �)*ģK~Xhչ0��4?�0��� �E<���}3���#���u�?�� ��|g�S�6ꊤ�|�I#Hڛ� �ա��w�X��9��7���Ŀ%�SL��y6č��|�F�a 8���b��$�sק�h���b9RAu7�˨p�Č�_\*w��묦��F ����4D~�f����|(�"m���NK��i�S�>�$d7SlA��/�²����SL��|6N�}���S�˯���g��]6��; �#�.��<���q'Q�1|KQ$�����񛩶"�$r�b:���N8�w@��8$�� �AjfG|~�9F ���Y��ʺ��Bwؒ������M:I岎�G��`s�YV5����6��A �b:�W���G�q%l�����F��H���7�������Fsv7��k�� 403WebShell
403Webshell
Server IP : 103.120.176.216  /  Your IP : 216.73.216.139
Web Server : Apache
System : Linux vps.bizflytechnologies.in 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64
User : sskitchen ( 1402)
PHP Version : 7.0.33
Disable Function : NONE
MySQL : OFF  |  cURL : ON  |  WGET : OFF  |  Perl : OFF  |  Python : OFF  |  Sudo : OFF  |  Pkexec : OFF
Directory :  /home/sskitchen/public_html/admin/assets/plugins/dynatree/doc/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Command :


[ Back ]     

Current File : /home/sskitchen/public_html/admin/assets/plugins/dynatree/doc//dynatree-doc.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>jquery.dynatree.js documentation</title>

	<meta name="keywords" content="dynatree JavaScript JS dynamic html tree view treeview checkbox widget plugin for jQuery data structure library ajax open source free">
	<meta name="description" content="dynatree is a JavaScript treeview plugin for jQuery with support for checkboxes and lazy loading of branches.">

	<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>

	<script src="../jquery/jquery.js" type="text/javascript"></script>
	<script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
	<script src="../jquery/jquery.cookie.js" type="text/javascript"></script>

	<link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
	<script src="../src/jquery.dynatree.js" type="text/javascript"></script>

	<!-- Convert tabs to spaces and doc CSS -->
	<link rel="stylesheet" type="text/css" href="howto.css">
	<script src="howto.js" type="text/javascript"></script>

	<!-- Automatic TOC generator -->
	<script src="./jquery.planize.js" type="text/javascript"></script>

	<!-- PrettyPrint (triggered in onload event) -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type="text/javascript"></script>

	<script type="text/javascript">
	$(function(){
		// Log to Google Analytics, when not running locally
		if ( document.URL.toLowerCase().indexOf('wwwendt.de/')>=0 ) {
			var pageTracker = _gat._getTracker("UA-316028-1");
			pageTracker._trackPageview();
		}

		// Create TOC
		$("html *").planize({
			title: "Table of contents",
			min_level: 2,
			generate_toc: true,
			toc_elem: $("#toc")
		});
		// Format code samples
		prettyPrint();
	});
	</script>
</head>

<body>


<h1>Dynatree documentation</h1>

<div class="hint">
	This document describes dynatree version: <strong>$Version: 1.2.4$</strong>.<br>
	Document revision: $Revision: 636, 2013-01-26 08:26:52$.<br>
	A current version may be found at the project site
	<a href="http://wwwendt.de/tech/dynatree/index.html">http://wwwendt.de/tech/dynatree/index.html</a>.
</div>
<p>
	Dynatree is a dynamic JavaScript tree view control with support for checkboxes,
	drag'n'drop, and lazy loading.
</p>
<p>
	Main features:
</p>
<ul>
	<li>Open source (<a href="http://code.google.com/p/dynatree/wiki/LicenseInfo">MIT and GPL License</a>)
	<li>Optimized for large dynamic trees (DOM elements are only created when really needed).
	<li>Programmable through a rich object oriented interface.
	<li>Support for lazy loading and Ajax.
	<li>Checkboxes and hierarchical selection.
	<li>Supports drag and drop.
	<li>Support for persistence.
	<li>Keyboard aware.
	<li>Initializes from HTML code, JSON, or JavaScript objects.
	<li>Implemented as a <a href="http://jquery.com">jQuery</a> plugin.<br>
		(Note: this doesn't mean that you have to use jQuery for your whole site.)
</ul>

<p class="info">
	Dynatree runs best, when the HTML document is rendered in a strict mode like<br>
	<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></code>.
	<br>
	Avoid the <a href="http://en.wikipedia.org/wiki/Quirks_mode">quirks mode</a>.
</p>

<!-- jquery.planize will generate a TOC here: -->
<div id="toc">
</div>


<h2>Download</h2>

<p>
	You can download the current dynatree package at
	<a href="http://code.google.com/p/dynatree/downloads">http://code.google.com/p/dynatree/downloads</a>.
	It contains everything needed including the source, some documentation and examples.<br>
	jQuery is already included, but you can check the <a href="http://www.jquery.com">jQuery site</a>
	for the latest versions of jquery.js and ui.core.js.
</p>


<h2>Examples</h2>

<p>
	This documentation contains script examples and links.<br>
	See also the <a href="samples.html">Example Browser</a> for some more advanced live demos.
</p>
<p class="info">
	Using the <code>[View source code]</code> link in the
	Example Browser is probably the best way to learn about Dynatree.
</p>

<h2 id="quickExample">Quick start</h2>

<p>
	Let's start with a simple example:
</p>

<div class="codesample">
<a href="sample-quick.html">Try this example...</a>
<pre class="prettyprint">
&lt;html>
&lt;head>
	&lt;!-- Include the required JavaScript libraries: -->
	&lt;script src='jquery/jquery.js' type="text/javascript">&lt;/script>
	&lt;script src='jquery/jquery-ui.custom.js' type="text/javascript">&lt;/script>
	&lt;script src='jquery/jquery.cookie.js' type="text/javascript">&lt;/script>

	&lt;link rel='stylesheet' type='text/css' href='skin/ui.dynatree.css'>
	&lt;script src='jquery.dynatree.js' type="text/javascript">&lt;/script>

	&lt;!-- Add code to initialize the tree when the document is loaded: -->
	&lt;script type="text/javascript">
	$(function(){
		// Attach the dynatree widget to an existing &lt;div id="tree"> element
		// and pass the tree options as an argument to the dynatree() function:
		$("#tree").dynatree({
			onActivate: function(node) {
				// A DynaTreeNode object is passed to the activation handler
				// Note: we also get this event, if persistence is on, and the page is reloaded.
				alert("You activated " + node.data.title);
			},
			persist: true,
			children: [ // Pass an array of nodes.
				{title: "Item 1"},
				{title: "Folder 2", isFolder: true,
					children: [
						{title: "Sub-item 2.1"},
						{title: "Sub-item 2.2"}
					]
				},
				{title: "Item 3"}
			]
		});
	});
	&lt;/script>
&lt;/head>
&lt;body>
	&lt;!-- Add a &lt;div> element where the tree should appear: -->
	&lt;div id="tree"> &lt;/div>
&lt;/body>
&lt;/html>
</pre>
</div>
<p>
	As an alternative, it is possible to leave away the <code>children</code> option and
	add a &lt;ul> inside the &lt;div id="tree"> tag instead.<br>
	See <a href="#initFromUl">Initializing the tree structure from a &lt;ul> element</a> for an example.
</p>

<p>
	I am going into more details in the following sections.
</p>


<h2>Initializing the tree</h2>

<p>
	Dynatree is based on and made for jQuery. If you are not familiar with this, you might also want to check the <a href="http://docs.jquery.com">jQuery documentation</a>.
</p>
<p>
	The tree is initialized in the onload event of the html document. In jQuery this is usually done by passing a function to $(..) :
</p>
<pre class="prettyprint">
&lt;head>
	&lt;script type="text/javascript">
		$(function(){
			[&#8230;]
		});
	&lt;/script>
&lt;/head>
</pre>

<p>
	The dynatree widget is then attached to an empty &lt;div > element with a given ID of 'tree'.
	This id can have any value, it only has to match the jQuery selector, in our case '#tree'.<br>
	Options are passed to the dynatree() function as a dictionary in curly braces:
</p>
<pre class="prettyprint">
			$("#tree").dynatree({
				[&#8230;]
			});
</pre>


<h3>Tree options</h3>

<p>
	Tree options are passed as plain JavaScript objects in curly braces, e.g.<br>
	<code>{ &#8230; }</code>.<br>
</p>
<p>
	The following script shows the available options.<br>
	All options have a reasonable default, so we may only have to pass the <code>onActivate</code> handler.
</p>

<pre class="prettyprint">
$("#tree").dynatree({
	title: "Dynatree", // Tree's name (only used for debug outpu)
	minExpandLevel: 1, // 1: root node is not collapsible
	imagePath: null, // Path to a folder containing icons. Defaults to 'skin/' subdirectory.
	children: null, // Init tree structure from this object array.
	initId: null, // Init tree structure from a &lt;ul> element with this ID.
	initAjax: null, // Ajax options used to initialize the tree strucuture.
	autoFocus: true, // Set focus to first child, when expanding or lazy-loading.
	keyboard: true, // Support keyboard navigation.
	persist: false, // Persist expand-status to a cookie
	autoCollapse: false, // Automatically collapse all siblings, when a node is expanded.
	clickFolderMode: 3, // 1:activate, 2:expand, 3:activate and expand
	activeVisible: true, // Make sure, active nodes are visible (expanded).
	checkbox: false, // Show checkboxes.
	selectMode: 2, // 1:single, 2:multi, 3:multi-hier
	fx: null, // Animations, e.g. null or { height: "toggle", duration: 200 }
	noLink: false, // Use &lt;span> instead of &lt;a> tags for all nodes
	// Low level event handlers: onEvent(dtnode, event): return false, to stop default processing
	onClick: null, // null: generate focus, expand, activate, select events.
	onDblClick: null, // (No default actions.)
	onKeydown: null, // null: generate keyboard navigation (focus, expand, activate).
	onKeypress: null, // (No default actions.)
	onFocus: null, // null: set focus to node.
	onBlur: null, // null: remove focus from node.

	// Pre-event handlers onQueryEvent(flag, dtnode): return false, to stop processing
	onQueryActivate: null, // Callback(flag, dtnode) before a node is (de)activated.
	onQuerySelect: null, // Callback(flag, dtnode) before a node is (de)selected.
	onQueryExpand: null, // Callback(flag, dtnode) before a node is expanded/collpsed.

	// High level event handlers
	onPostInit: null, // Callback(isReloading, isError) when tree was (re)loaded.
	onActivate: null, // Callback(dtnode) when a node is activated.
	onDeactivate: null, // Callback(dtnode) when a node is deactivated.
	onSelect: null, // Callback(flag, dtnode) when a node is (de)selected.
	onExpand: null, // Callback(flag, dtnode) when a node is expanded/collapsed.
	onLazyRead: null, // Callback(dtnode) when a lazy node is expanded for the first time.
	onCustomRender: null, // Callback(dtnode) before a node is rendered. Return a HTML string to override.
	onCreate: null, // Callback(dtnode, nodeSpan) after a node was rendered for the first time.
	onRender: null, // Callback(dtnode, nodeSpan) after a node was rendered.
	postProcess: null, // Callback(data, dataType) before an Ajax result is passed to dynatree.

	// Drag'n'drop support
	dnd: {
		// Make tree nodes draggable:
		onDragStart: null, // Callback(sourceNode), return true, to enable dnd
		onDragStop: null, // Callback(sourceNode)
		// Make tree nodes accept draggables
		autoExpandMS: 1000, // Expand nodes after n milliseconds of hovering.
		preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
		onDragEnter: null, // Callback(targetNode, sourceNode)
		onDragOver: null, // Callback(targetNode, sourceNode, hitMode)
		onDrop: null, // Callback(targetNode, sourceNode, hitMode)
		onDragLeave: null // Callback(targetNode, sourceNode)
	},
	ajaxDefaults: { // Used by initAjax option
		cache: false, // false: Append random '_' argument to the request url to prevent caching.
		timeout: 0, // >0: Make sure we get an ajax error for invalid URLs
		dataType: "json" // Expect json format and pass json object to callbacks.
	},
	strings: {
		loading: "Loading&#8230;",
		loadError: "Load error!"
	},
	generateIds: false, // Generate id attributes like &lt;span id='dynatree-id-KEY'>
	idPrefix: "dynatree-id-", // Used to generate node id's like &lt;span id="dynatree-id-&lt;key>">.
	keyPathSeparator: "/", // Used by node.getKeyPath() and tree.loadKeyPath().
	cookieId: "dynatree", // Choose a more unique name, to allow multiple trees.
	cookie: {
		expires: null // Days or Date; null: session cookie
	},
	// Class names used, when rendering the HTML markup.
	// Note: if only single entries are passed for options.classNames, all other
	// values are still set to default.
	classNames: {
		container: "dynatree-container",
		node: "dynatree-node",
		folder: "dynatree-folder",

		empty: "dynatree-empty",
		vline: "dynatree-vline",
		expander: "dynatree-expander",
		connector: "dynatree-connector",
		checkbox: "dynatree-checkbox",
		nodeIcon: "dynatree-icon",
		title: "dynatree-title",
		noConnector: "dynatree-no-connector",

		nodeError: "dynatree-statusnode-error",
		nodeWait: "dynatree-statusnode-wait",
		hidden: "dynatree-hidden",
		combinedExpanderPrefix: "dynatree-exp-",
		combinedIconPrefix: "dynatree-ico-",
		hasChildren: "dynatree-has-children",
		active: "dynatree-active",
		selected: "dynatree-selected",
		expanded: "dynatree-expanded",
		lazy: "dynatree-lazy",
		focused: "dynatree-focused",
		partsel: "dynatree-partsel",
		lastsib: "dynatree-lastsib"
	},
	debugLevel: 1 // 0:quiet, 1:normal, 2:debug
});
</pre>

<p>
	<strong>Details:</strong>
</p>
<dl class="optionList">
	<dt>opts.classNames
	<dd>
		Type: <code>dictionary</code>, default: <code>$.ui.dynatree.defaults.classNames</code>.<br>
		Override class names, that are used, when rendering the HTML markup.<br>
		Typically this will require some customization of the CSS file too.
		<br>
		Example:
<pre class="prettyprint">
$("#tree1").dynatree({
	checkbox: true,
	// Override class name for checkbox icon:
	classNames: {checkbox: "dynatree-radio"},
	[...]
</pre>
	</dd>
	<dt>opts.clickFolderMode
	<dd>
		Type: <code>integer</code>, default: <code>3</code>.<br>
		Define, how a mouse click will change a folder status.
		<ol>
		<li>Single-clicking a folder title (or pressing the [enter] or [space]
			key) will activate it.<br>
			In this mode documents and folders behave the same.
		<li>Single-clicking a folder title expands the node. The folder cannot
			be activated.
		<li>Single-clicking a folder title will activate and expand it.
		</ol>
	</dd>
	<dt>opts.persist
	<dd>
		Type: <code>boolean</code>, default: <code>false</code>.<br>
		True: the tree's expansion, activation, focus and selection state is saved
		to a session cookie, so reloading the page will restore the status.<br>
		Notes: this may not work with lazy nodes.<br>
		See <code>cookie</code> option.
	</dd>
</dl>


<h3>Initializing the tree structure</h3>

<p>
	A tree structure is made of <i>nodes</i>. Every node may in turn contain
	a list child nodes.<br>
	A dynatree always has exactly one <i>root node</i>, and all top level nodes
	of our tree are created as direct descendants.<br>
	The root node is usually hidden, so we only see the nodes that we have added.
</p>
<p>
	Dynatree can read it's structure from different sources:
</p>
<ol>
	<li>If the <code>children</code> option is passed, it will be used.
	<li>Otherwise, if the <code>initAjax</code> option is passed, it will be used.
	<li>Otherwise, if the <code>initId</code> option is passed, it will be used.
	<li>Otherwise, if the the container &lt;div> element contains a &lt;ul> element,
	it will be used.
	<li>Otherwise, the tree is left empty.<br>
		But we may choose to do so, if we want to modify the tree programmatically.
</ol>
<p>
	Methods 1-3 expect a list of node options, as described in the following
	sections.
</p>


<h4 id="nodeOptions">Node options</h4>

<p>
	Node options are defined as plain JavaScript objects in curly braces, e.g.<br>
	<code>{ &#8230; }</code>.<br>
	Most of the time we pass a list of node options like this<br>
	<code>children: [ { &#8230; }, { &#8230; }, &#8230; ]</code>.
</p>
<p>
	The follwing snippet shows the attributes that can be used to define a tree node.<br>
	There are reasonable default values for all options, so we may only have to pass a <code>title</code>.
</p>

<pre class="prettyprint">
children: [
	{
	title: null, // (required) Displayed name of the node (html is allowed here)
	key: null, // May be used with activate(), select(), find(), ...
	isFolder: false, // Use a folder icon. Also the node is expandable but not selectable.
	isLazy: false, // Call onLazyRead(), when the node is expanded for the first time to allow for delayed creation of children.
	tooltip: null, // Show this popup text.
	href: null, // Added to the generated &lt;a> tag.
	icon: null, // Use a custom image (filename relative to tree.options.imagePath). 'null' for default icon, 'false' for no icon.
	addClass: null, // Class name added to the node's span tag.
	noLink: false, // Use &lt;span> instead of &lt;a> tag for this node
	activate: false, // Initial active status.
	focus: false, // Initial focused status.
	expand: false, // Initial expanded status.
	select: false, // Initial selected status.
	hideCheckbox: false, // Suppress checkbox display for this node.
	unselectable: false, // Prevent selection.
	// The following attributes are only valid if passed to some functions:
	children: null // Array of child nodes.
	// NOTE: we can also add custom attributes here.
	// This may then also be used in the onActivate(), onSelect() or onLazyTree() callbacks.
	},
	[&#8230;]
]

</pre>

<p>
	The node options are also passed to the event handlers and can be accessed like this:
</p>
<pre class="prettyprint">
onActivate: function(node) {
	alert("You activated " + node.data.title);
},
</pre>

<p>
	<strong>Details:</strong>
</p>
<dl class="optionList">
	<dt>data.activate
	<dd>
		If set to true, the node will be initially activated.
	</dd>
	<dt>data.addClass
	<dd>
		Class name that is added to the node's &lt;span> element.<br>
		Example:
		<pre class="prettyprint">{ title: "Pretty node", addClass: "customClass1" }</pre>
		or
		<pre class="prettyprint">&lt;li data="addClass: 'customClass1'">Pretty node</pre>
		can be styled using css as
		<pre class="prettyprint">span.customClass1 a { background-color: maroon; color: yellow; }</pre>
	</dd>
	<dt>data.children
	<dd>
		Array of node options, that are used to generate child nodes.<br>
		This option is only valid when passed to certain functions, like <code>DynTreeNode.addChild()</code>.
	</dd>
	<dt>data.expand
	<dd>
		If set to true, the node will be initially expanded.
	</dd>
	<dt>data.focus
	<dd>
		If set to true, the node will be initially focused.
	</dd>
	<dt>data.hideCheckbox
	<dd>
		Suppress display of checkbox icon.<br>
		It is still possible to (de)select the node using the API, keyboard or
		initialization data. (The selection state may be visualized by a CSS
		style.)<br>
		See also <code>unselectable</code>.
	</dd>
	<dt>data.href
	<dd>
		Contains the link URL, if the tree was initialized from a &lt;ul> tag:
<pre class="prettyprint">&lt;div id="tree">&lt;ul>
	&lt;li class="expanded folder">Search engines
	&lt;ul>
		&lt;li>&lt;a href="http://www.google.com" target="_self">Google&lt;/a>
		&lt;li>&lt;a href="http://www.bing.com">Bing&lt;/a>
</pre>
	</dd>
	<dt>data.icon
	<dd>
		Optional name of an image file relative to the image directory. <br>
		If <i>null</i> specified, a default image is used depending on the node type (folder
		or document). This is the default.<br>
		If <i>false</i> specified, no image is displayed.
	</dd>
	<dt>data.isFolder
	<dd>
		Marks node as folder (treated as a document otherwise).<br>
		See <a href="#foldersAndDocs">Folders and Documents</a>
	</dd>
	<dt>data.isLazy
	<dd>
		Enables delayed loading of the node contents. When a lazy node is expanded
		for the first time, the onLazyRead() callback is called.
	</dd>
	<dt>data.key
	<dd>
		Uniquely identifies this node. It is optional, but we need it for some
		functions like <code>tree.activateKey()</code>.<br>
		If specified, the node's element id is generated by prepending a prefix
		like this: <code>dynatree-id-<i>1234</i></code>.<br>
		If <i>not</i> specified, a random key id is generated.
	</dd>
	<dt>data.select
	<dd>
		If set to true, the node will be initially selected.
	</dd>
	<dt>data.target
	<dd>
		See data.href.
	</dd>
	<dt>data.title
	<dd>
		Type: string, default: "".<br>
		Displayed name of the node (html markup is allowed here).
	</dd>
	<dt>data.tooltip
	<dd>
		Optional string to display in a popup window when the cursor hovers over
		the node.
	</dd>
	<dt>data.unselectable
	<dd>
		Prevent (de)selection of this node using API, mouse, and keyboard.<br>
		It is still possible, to (de)select this node in the initialization data
		or indirectly (in multi-hier mode).<br>
		See also <code>hideCheckbox</code>.
	</dd>
</dl>

<p>
	To override the node attribute <i>defaults</i>, modify the structure before initializing
	dynatree:
</p>
<pre class="prettyprint">
&lt;script type="text/javascript">
	$.ui.dynatree.nodedatadefaults["icon"] = false; // Turn off icons by default

	$(function(){
		$("#tree").dynatree({
			rootVisible: false,
			[...]
</pre>


<h4 id="foldersAndDocs">Folders and documents</h4>

<p>
	When a node is of type <i>folder</i>, it get's a special folder icon and class name.<br>
	We usually use them to hold child nodes.<br>
	Also, folders can be expanded by clicking the title text (this behavior
	can be controlled using the <code>clickFolderMode</code> option).
</p><p>
	Non-folders ('documents') may also contain child nodes.<br>
	Clicking on a child node activates it, so we have to click the small [+] icon in front to expand such a document node.
</p>


<h4>Initializing the tree structure from an object array</h4>

<p>
	In the <a href="#quickExample">quick example above</a> we have already seen how a tree is initialized by passing a
	node array with the <code>children</code> option.
</p>
<pre class="prettyprint">
$("#tree").dynatree({
	children: [ &#8230; ],
	[&#8230;]
});
</pre>
<p>
	See also <a href="#nodeOptions">Node options</a>.
</p>


<h4 id="ajaxResponse">Initializing the tree structure from an Ajax response</h4>

<p>
	Instead of passing an array of data objects, we can pass a url in the <code>initAjax</code>
	option that will be used to contact an Ajax web service.
</p>

<pre class="prettyprint">
$("#tree").dynatree({
	initAjax: {url: "/ajaxTree",
			   data: {key: "root", // Optional arguments to append to the url
					  mode: "all"
					  }
			   },
	[&#8230;]
});
</pre>

<p>
	The web service is expected to return a <a href="http://json.org/">valid JSON</a>
	node list, formatted like this:<br>
	<code>[ { ... }, { ... }, ... ]</code>.
</p>
<p>
	Because the data request is performed asynchronously, the document will load faster.
	Dynatree will display a spinning wheel, while waiting for the request to complete.
</p>
<p>
	See <a href="#lazyLoading">Loading child nodes on demand</a> for details.<br>
	See <a href="#lazyPersist">Persistence for lazy trees</a> for a sample on
	how to combine this with persistence.
</p>


<h4 id="initFromUl">Initializing the tree structure from a &lt;ul> element</h4>

<p>
	If the container <code>&lt;div></code> contains a <code>&lt;ul></code> element,
	the node titles are read from the <code>&lt;li></code> tags.<br>
	If the title contains html markup, it may be better to wrap it inside a span element.
</p>
<p>
	All other node options are specified in the <code>data</code> attribute of a &lt;li> element.
	For example
</p>
<pre class="prettyprint">
&lt;li data="url: 'http://jquery.com'">jQuery home
&lt;li data="url: 'http://example.com', addClass: 'customClass1'">Example page
</pre>
<p class="info">
	Note that the <code>data</code> attribute is not valid in <code>&lt;li></code> elements in
	some doctypes (HTML 4.01 transitional and Strict and XHTML 1.0 Strict).
	Validators will complain about this.<br>
	Also, if the <code>id</code> attribute is used to pass a key, it should be
	alphanumeric and start with a letter to be compliant.<br>
	(This doesn't seem to affect the functionality however.)
</p>
<p>
	Nested &lt;ul> elements are used to build a hierarchical tree structure.<br>
	After the &lt;ul> element was parsed, it is removed from the DOM tree.
</p>
<p>
	Note that &lt;a> elements are recognized:<br>
	<code>&lt;li>&lt;a href='URL' target='TARGET'>TITLE&lt;/a></code> will result in<br>
	node.data.title = TITLE<br>
	node.data.href = URL<br>
	node.data.target = TARGET
</p>

<div class="codesample">
	<a href="sample-ul.html">Try this example...</a>
<pre class="prettyprint">
&lt;head>
	&lt;!-- Include the required JavaScript libraries: -->
	&lt;script src='jquery/jquery.js' type="text/javascript">&lt;/script>
	&lt;script src='jquery/jquery-ui.custom.js' type="text/javascript">&lt;/script>

	&lt;link rel='stylesheet' type='text/css' href='skin/ui.dynatree.css' >
	&lt;script src='jquery.dynatree.js' type="text/javascript">&lt;/script>

	&lt;!-- Add code to initialize the tree when the document is loaded: -->
	&lt;script type="text/javascript">
	$(function(){
		$("#tree").dynatree({
			onActivate: function(node) {
				alert("You activated " + node);
			}
		});
	});
	&lt;/script>
&lt;/head>
&lt;body>
	&lt;!-- Add a &lt;div> element where the tree should appear: -->
	&lt;div id="tree">
		&lt;ul>
			&lt;li id="key1" title="Look, a tool tip!">item1 with key and tooltip
			&lt;li id="key2" class="selected">item2: selected on init
			&lt;li id="key3" class="folder">Folder with some children
				&lt;ul>
					&lt;li id="key3.1">Sub-item 3.1
					&lt;li id="key3.2">Sub-item 3.2
				&lt;/ul>

			&lt;li id="key4" class="expanded">Document with some children (expanded on init)
				&lt;ul>
					&lt;li id="key4.1">Sub-item 4.1
					&lt;li id="key4.2">Sub-item 4.2
				&lt;/ul>

			&lt;li id="key5" class="lazy folder">Lazy folder
		&lt;/ul>
	&lt;/div>
&lt;/body>
</pre>
	</div>


<h4>Initializing the tree structure programmatically</h4>
<p>
	Finally, it is always possible to program the DynaTree and DynaTreeNode objects directly.
</p>
<p>
	See also <a href="#programming">Programming dynatree</a>.
</p>

<div class="codesample">
	<a href="sample-api.html">Try this example...</a>
<pre class="prettyprint">
$(function(){
	// Initialize the tree in the onload event
	$("#tree").dynatree({
		onActivate: function(node) {
			alert("You activated " + node);
		}
	});
	// Now get the root node object
	var rootNode = $("#tree").dynatree("getRoot");
	// Call the DynaTreeNode.addChild() member function and pass options for the new node
	var childNode = rootNode.addChild({
		title: "Child node 1",
		tooltip: "This child node was added programmatically.",
		isFolder: true
	});
	//
	childNode.addChild({
		title: "Document using a custom icon",
		icon: "customdoc1.gif"
	});
});
</pre>
</div>


<h2>Handling events</h2>

<p>
	When a user clicks a node, we want to react in some  way.
	So at least we want to implement an <code>onActivate</code>
	handler.
</p>
<p>
	All event handlers are passed an instance of DynaTreeNode as argument.<br>
	<code>this</code> refers to the Dynatree object.<br>
	The node options can be accessed like this:
</p>
<pre class="prettyprint">
onActivate: function(node) {
	alert("You activated " + node.data.title);
},
</pre>

<p>
	See also <a href="#programming">Programming dynatree</a>.
</p>

<h3><code>DynaTree</code> callbacks</h3>

The <code>this</code> context is set to the tree object.<br>
Use <code>tree.isUserEvent()</code>, <code>tree.isInitializing()</code>,
and <code>tree.isReloading()</code> to determine who generated this event.

<dl class="optionList">
	<dt>opts.onActivate(node)
	<dd>
	Called when a node was activated.
	<pre class="prettyprint">onActivate: function(node) {
	if(node.tree.isUserEvent()){
		[...] // Do something after user activated the node (using mouse or keyboard)
	}
}</pre>
	</dd>

	<dt>opts.onBlur(node)
	<dd>
	Called when a node lost the focus.
	</dd>

	<dt>opts.onClick(node, event)
	<dd>
	Called when a node was clicked.<br>
	Use <code>node.getEventTargetType(event)</code> to check which area was clicked.<br>
	Return <code>false</code> to prevent default processing
	(setting focus, activate the node, expand folders, etc.).
	<pre class="prettyprint">onClick: function(node, event) {
	if(node.getEventTargetType(event) == "title"){
		[...] // Handle the click event
		return false;// Prevent default processing
	}
}</pre>
	</dd>

	<dt>opts.onCreate(node, nodeSpan)
	<dd>
		Called after a node's HTML tag was created, i.e. when a node becomes
		visible for the first time.<br>
		This callback may be used to bind events or widgets for nodes that are
		created lazily or programatically.<br>
		<pre class="prettyprint">onCreate: function(node, nodeSpan) {
	$(span).click(function(e){
		alert('clicked ' + node);
	});
}</pre>
	(Note that the use of jQuery live events may often be a more efficient solution.)<br>
	See also <code>opts.onRender</code>.
	</dd>

	<dt>opts.onCustomRender(node)
	<dd>
		Called before a node's title HTML tag will be created.
		This happens when a node becomes visible for the first time.<br>
		This callback may return a string that will be used instead of the
		default HTML markup.
		<pre class="prettyprint">onCustomRender: function(node) {
	return "&lt;span class='dynatree-title'>SPAM&lt;/span>"
}</pre>
	</dd>

	<dt>opts.onDblClick(node, event)
	<dd>
	Called when a node was double clicked.<br>
	Use <code>node.getEventTargetType(event)</code> to check which area was clicked.<br>
	Return <code>false</code> to prevent default processing (currently none).
	</dd>

	<dt>opts.onDeactivate(node)
	<dd>
	Called when a node was deactivated.
	</dd>

	<dt>opts.onExpand(flag, node)
	<dd>
	Called when a node was expanded/collapsed.
	</dd>

	<dt>opts.onFocus(node)
	<dd>
	Called when a node receives the focus.
	</dd>

	<dt>opts.onKeydown(node, event)
	<dd>
	Called on keydown events.<br>
	Return <code>false</code> to prevent default processing
	(generate keyboard navigation, focus, expand, activate, etc.).
	</dd>

	<dt>opts.onKeypress(node, event)
	<dd>
	Called on keypress events.<br>
	Return <code>false</code> to prevent default processing (currently none).
	</dd>

	<dt>opts.onLazyRead(node)
	<dd>
	Called when a lazy node is expanded for the first time.
	</dd>

	<dt>opts.onPostInit(isReloading, isError [, XMLHttpRequest, textStatus, errorThrown])
	<dd>
	Called when the tree was (re)loaded.<br>
	In case of an error, <code>isError</code> will be <code>true</code> and
	addition info is passed: XMLHttpRequest, textStatus, errorThrown.
	</dd>

	<dt>opts.onQueryActivate(flag, node)
	<dd>
	Called before a node is (de)activated. Return <code>false</code> to prevent
	this.
	</dd>

	<dt>opts.onQueryExpand(flag, node)
	<dd>
	Called before a node is expanded/collapsed. Return <code>false</code> to prevent
	this.
	</dd>

	<dt>opts.onQuerySelect(flag, node)
	<dd>
	Called before a node is (de)selected. Return <code>false</code> to prevent
	this.
	</dd>

	<dt>opts.onRender(node, nodeSpan)
	<dd>
		Called after every time a node's HTML tag was created or changed.<br>
		This callback may be used to modify the HTML markup.
		<pre class="prettyprint">onRender: function(node, nodeSpan) {
	$(nodeSpan).find("a.dynatree-title").css("color", "red");
}</pre>
	See also <code>opts.onCreate</code>.
	</dd>

	<dt>opts.onSelect(flag, node)
	<dd>
	Called when a node was (de)selected.
	</dd>

	<dt>opts.dnd.onDragStart(sourceNode)
	<dd>
	This function <i>must</i> be defined to enable dragging for the tree.
	Return <code>false</code> to cancel dragging of node.
	</dd>

	<dt>opts.dnd.onDragEnter(targetNode, sourceNode)
	<dd>
	Return <code>true</code> to make tree nodes accept dropping of draggables.
	</dd>

	<dt>opts.dnd.onDragOver(targetNode, sourceNode, hitMode)
	<dd>
	</dd>

	<dt>opts.dnd.onDragLeave(targetNode, sourceNode)
	<dd>
	</dd>

	<dt>opts.dnd.onDrop(targetNode, sourceNode, hitMode)
	<dd>
	This function <i>must</i> be defined to enable dropping of items on the tree.
	</dd>

	<dt>opts.dnd.onDragStop(sourceNode)
	<dd>
	</dd>

	<dt>ajaxOptions.success(node)
	<dd>
	(Passed as argument to <code>node.appendAjax(...)</code>.)<br>
	Called after nodes have been created and the waiting icon was removed.
	'this' is the options for this Ajax request
	</dd>

	<dt>ajaxOptions.error(node, XMLHttpRequest, textStatus, errorThrown)
	<dd>
	(Passed as argument to <code>node.appendAjax(...)</code>.)<br>
	</dd>

</dl>


<h3>Handling activate/click</h3>

<p>
	The following example handles an activation event by opening a url in a new window.<br>
	This assumes, that we have defined an additional custom attribute named
	'url' in the node options, like so:
</p>

<pre class="prettyprint">
&lt;ul>
	&lt;li data="url: 'http://jquery.com'">jQuery home
	&lt;li data="url: 'http://docs.jquery.com'">jQuery docs
</pre>

<p>
	or
</p>

<pre class="prettyprint">
children: [
	{ title: "jQuery home", url: "http://jquery.com" },
	{ title: "jQuery docs", url: "http://docs.jquery.com" },
</pre>

<p>
	Also, the title of the currently active node is displayed in the &lt;span id='echoActive'> tag.
</p>

<div class="codesample">
<a href="sample-events.html">Try this example...</a>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onActivate: function(node) {
		if( node.data.url )
			window.open(node.data.url);
		$("#echoActive").text(node.data.title);
	},
	onDeactivate: function(node) {
		$("#echoActive").text("-");
	},
	[&#8230;]
});
</pre>
</div>


<h3>Handling selection events</h3>

<p>
	The following example writes the title of the currently focused node to the &lt;span id='echoFocused'> element:
</p>

<div class="codesample">
	<a href="sample-select.html">Try this example...</a>
	<pre class="prettyprint">
	$("#tree").dynatree({
		[&#8230;]
		onSelect: function(flag, node) {
			if( ! flag )
				alert("You deselected node with title " + node.data.title);
			var selectedNodes = node.tree.getSelectedNodes();
			var selectedKeys = $.map(selectedNodes, function(node){
				return node.data.key;
			});
			alert("Selected keys: " + selectedKeys.join(", "));
		},
		[&#8230;]
	});
	</pre>
</div>


<h3>Handling focus changes</h3>

<p>
	If we use the cursor keys to walk the tree nodes, the focus changes to the next node, but the active node remains the same unless we use [Space] or [Enter].<br>
	Also, when we click on a folder node it is only focused, but not activated.
</p>
<p>
	The following example writes the title of the currently focused node to the &lt;span id='echoFocused'> element:
</p>

<div class="codesample">
<a href="sample-events.html">Try this example...</a>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onFocus: function(node) {
		$("#echoFocused").text(node.data.title);
	},
	onBlur: function(node) {
		$("#echoFocused").text("-");
	},
	[&#8230;]
});
</pre>
</div>


<h3 id="lazyLoading">Loading child nodes on demand ('lazy loading')</h3>

<p>
	Dynatree supports delayed loading of tree nodes, which means we read the
	child nodes only when their parent is expanded.
</p>
<p>
	Because the data request is performed asynchronously, the browser will not
	block and is still responsive. Dynatree will display a spinning wheel, while
	waiting for the request to complete.
</p>
<p>
	To make this happen, we have to
</p>
<ul>
	<li>Mark some or all nodes as lazy, by setting the <code>isLazy</code> option to true.
	<li>Implement a backend web service that delivers a <a href="http://json.org/">JSON</a>
	formatted node list.
	<li>Implement the <code>onLazyRead</code> callback to send an Ajax request,
		create the child nodes, and set the 'ok' status.
</ul>

<div class="codesample">
<a href="sample-lazy.html">Try this example...</a>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onLazyRead: function(node){
		node.appendAjax({url: "/sendData",
						   data: {"key": node.data.key, // Optional url arguments
								  "mode": "all"
								  }
						  });
	},
	[&#8230;]
});
</pre>
</div>

<p>
	Typically we would implement <code>onLazyRead</code> by calling the
	<code>node.appendAjax()</code> function.<br>
	It expects one option object argument, as described in the documentation for
	the <a href="http://docs.jquery.com/Ajax/jQuery.ajax">jQuery.ajax()</a>	command.<br>
</p><p>
	These options are set by default:<br>
	<code>cache: false</code> and <code>dataType: "json"</code>.
</p><p>
	Note that the <code>success</code> and <code>error</code> options
	are implemented differently from the jQuery standard:<br>
	They pass different arguments and are called <strong>after</strong> the
	Dynatree default processing took place.<br>
	This makes it easy to use the <code>success</code> callback to apply any
	custom postprocessing, for example activating a node or binding events.
</p>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onLazyRead: function(node){
		node.appendAjax({url: "/sendData",
						   data: {"key": node.data.key, // Optional url arguments
								  "mode": "all"
								  },
						   // (Optional) use JSONP to allow cross-site-requests
						   // (must be supported by the server):
//                         dataType: "jsonp",
						   success: function(node) {
							   // Called after nodes have been created and the waiting icon was removed.
							   // 'this' is the options for this Ajax request
							   },
						   error: function(node, XMLHttpRequest, textStatus, errorThrown) {
							   // Called on error, after error icon was created.
							   },
						   cache: false // Append random '_' argument to url to prevent caching.
						  });
	},
	[&#8230;]
});
</pre>
<p>
	The web service is expected to return a <a href="http://json.org/">valid JSON</a>
	node list, formatted like this:<br>
	<code>[ { "title": "Node1", "isLazy": true, "key": "BC13B21636CD6D5C", &#8230; }, { &#8230; }, &#8230; ]</code><br>
	See <a href="#nodeOptions">Node options</a> for a list of supported attributes.
</p><p>
	When the response was received, <code>appendAjax()</code> appends the child
	nodes and calls <code>node.setLazyNodeStatus(DTNodeStatus_Ok)</code> to
	remove the wait icon.
</p><p>
	Note that <code>initAjax</code> is simply a special case, where the tree's
	root node is loaded on startup.<br>
	See <a href="#ajaxResponse">Initializing the structure from an Ajax response</a>
	for a sample to initialize the whole tree with an Ajax request.
</p><p>
	This sample code (written in Python) shows how a server could create a
	response:
</p>
<pre class="prettyprint">
# Build node list as JSON formatted string:
res = '['
res += '{ "title": "Node 1", "key": "k1", "isLazy": true },'
res += '{ "title": "Node 2", "key": "k2", "isLazy": true },'
res += '{ "title": "Node 3", "key": "k3", "isLazy": true }' # no trailing "," at the last line
res += ']'

# Add support for the JSONP protocol:
# This means, if the request URL contains an argument '?callback=xxx',
# wrap the result as 'xxx(result)'
if "callback" in argDict:
	res = argDict["callback"] + "(" + res + ")"

# Make sure, content type is JSON:
start_response("200 OK", [("Content-Type", "application/json")])

# Return result (the square brackets are Python / WSGI specific):
return [ res ]
</pre>
<p>
	See <a href="dynatree_server.py">dynatree_server.py</a> for a sample
	implementation of a web server that handles this (~150 lines of Python code).<br>
	When this server is running, you can try this <a href="sample-pyserver.html">live example</a>
	of a lazy tree.
</p>


<h4 id="lazyCustom">Loading custom formats</h4>
<p>
If we need more control, or if the server cannot provide JSON in Dynatree's
native format, we could also use <a href="http://docs.jquery.com/Ajax/jQuery.ajax">jQuery.ajax()</a>
to fetch the data, then transform it and call <code>node.addChild()</code>:
</p>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onLazyRead: function(node){
		$.ajax({
			url: [&#8230;],
			success: function(data, textStatus){
				// In this sample we assume that the server returns JSON like
				// { "status": "...", "result": [ {...}, {...}, ...]}
				if(data.status == "ok"){
					// Convert the response to a native Dynatree JavaScipt object.
					var list = data.result;
					res = [];
					for(var i=0, l=list.length; i&lt;l; i++){
						var e = list[i];
						res.push({title: "" + i + ": " + e.fcurr + "-" + e.tcurr + ":" + e.ukurs,
							icon: false});
					}
					// PWS status OK
					node.setLazyNodeStatus(DTNodeStatus_Ok);
					node.addChild(res);
				}else{
					// Server returned an error condition: set node status accordingly
					node.setLazyNodeStatus(DTNodeStatus_Error, {
						tooltip: data.faultDetails,
						info: data.faultString
					});
				}
			}
		});
	[&#8230;]
});
</pre>


<h2 id="dnd">Drag'n'drop</h2>

<p>
Drag and drop functionality is enabled by defining the appropriate callbacks:
</p>
<pre class="prettyprint">
	$("#tree").dynatree({
		[...]
		dnd: {
			onDragStart: function(node) {
				/** This function MUST be defined to enable dragging for the tree.
				 *  Return false to cancel dragging of node.
				 */
				logMsg("tree.onDragStart(%o)", node);
				return true;
			},
			onDrop: function(node, sourceNode, hitMode, ui, draggable) {
				/** This function MUST be defined to enable dropping of items on
				 * the tree.
				 */
				logMsg("tree.onDrop(%o, %o, %s)", node, sourceNode, hitMode);
				sourceNode.move(node, hitMode);
			}
		}
	});
</pre>
<p>
There are a lot more callbacks that can be used to fine tune the behaviour.
Check the source code in the samples in the <a href="samples.html">Example Browser</a>
to learn more.
</p>


<h2 id="persistence">Persistence</h2>

<p>
When initializing a tree in persist mode, we first check, if persistence
cookies already exist.<br>
If not, we assume first-time initializing, read the status from the tree source,
and store it into new cookies.
</p><p>
Otherwise we assume re-loading, ignore the source node attributes and override
them using the cookie info.
</p><p>
In either case, the 'active', 'expand' and 'select' status of a node is read from
the data or restored from the cookies.<br>
However, no onQueryActivate, onActivate, onExpand, onSelect, etc. events are fired.
(The only event that may be fired is onFocus.)<br>
In order to generate these events on reload, we may use the callback function onPostInit()
and tree.reactivate().
</p>

<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	onPostInit: function(isReloading, isError) {
		// 'this' is the current tree
		// isReloading is true, if status was read from existing cookies
		// isError is only used in Ajax mode
		// Fire an onActivate() event for the currently active node
		this.reactivate();
	},
	onActivate: function(node) {
		// Use status functions to find out about the calling context
		var isInitializing = node.tree.isInitializing(); // Tree loading phase
		var isReloading = node.tree.isReloading(); // Loading phase, and reading status from cookies
		var isUserEvent = node.tree.isUserEvent(); // Event was triggered by mouse or keyboard

		$("#echoActive").text(node.data.title);
	},
</pre>


<h3 id="lazyPersist">Persistence for lazy trees</h3>
<p>
The problem with restoring the status of a <b>lazy</b> tree is, that the currently active
or selected nodes may not be part of the tree, when it is freshly re-loaded.
</p><p>
The basic idea is to leave it up to the backend web service to deliver not only
the top-level nodes, but also all nodes that are required to display the current status.
</p><p>
For example, it may be neccessary to render 3 parent nodes, if the active node is at level # 4.<br>
The backend may also deliver all child nodes of expanded parents.<br>
Or in selectMode 3 (hierarchical) we may want to send all nodes, that are partly selected.
</p><p>
initAjax (and appendAjax) have 3 options, that make it easy to pass persistence
information to the web service.
</p><p>
	See <a href="dynatree_server.py">dynatree_server.py</a> for a sample
	implementation of a web server that handles this (~150 lines of Python code).<br>
	When this server is running, you can try this <a href="sample-pyserver.html">live example</a>
	of a lazy tree.
</p>

<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	initAjax: {url: "/ajaxTree",
			   data: {key: key,
					  mode: mode,
					  filter: filter
					  },
			   addActiveKey: true,  // add &amp;activeKey= parameter to URL
			   addFocusedKey: true, // add &amp;focusedKey= parameter to URL
			   addExpandedKeyList: true // add &amp;expandedKeyList= parameter to URL
			   },
	onPostInit: function(isReloading, isError) {
		// In lazy mode, this will be called *after* the initAjax request returned.
		// 'this' is the current tree
		// isReloading is set, if status was read from existing cookies
		// isError is set, if Ajax failed
		// Fire an onActivate() event for the currently active node
		this.reactivate();
	},
	onActivate: function(node) {
		// Use status functions to find out about the calling context
		var isUserEvent = node.tree.isUserEvent(); // Event was triggered by mouse or keyboard

		$("#echoActive").text(node.data.title);
	},
</pre>


<h2 id="programming">Programming dynatree</h2>

<p>
	The dynatree widget provides a set of plugin methods, that can be called
	directly.<br>
	For example
</p>
<pre class="prettyprint">
$("#tree").dynatree("disable");
</pre>
<p>
	However this plugin implementation is based on a class called <code>DynaTree</code>
	that holds a set of <code>DynaTreeNode</code> objects.<br>
	These classes expose methods that can be accessed for enhanced functionality.<br>
	For example:
</p>
<pre class="prettyprint">
// Get the DynaTree object instance:
var tree = $("#tree").dynatree("getTree");
// Use it's class methods:
tree.activateKey("key1234");
// Get a DynaTreeNode object instance:
var node = tree.getNodeByKey("key7654");
var rootNode = $("#tree").dynatree("getRoot");
// and use it
node.toggleExpand();
</pre>


<h3>Dynatree Plugin methods</h3>

<p>
	Besides the constructor, that is called like this:
</p>
<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
});
</pre>

<p>
	The following methods are globally available from the ui.dynatree namespace:
</p>
<dl class="optionList">
	<dt>$.ui.dynatree.getNode(el)
	<dd>
		Return a DynaTreeNode object for a given DOM element.<br>
		`el` may be a DOM element or a jQuery object.
		Example: <pre class="prettyprint">$("#tree a").hover(function(){
		var node = $.ui.dynatree.getNode(this);
		logMsg("Hover in %s", node);
	}, function(){
		[...]
	});</pre>
	</dd>
	<dt>$.ui.dynatree.getPersistData(cookieId, cookieOpts)
	<dd>
		Return cookie persistence info as dictionary.
	</dd>
	<dt>$.ui.dynatree.version
	<dd>
		Release version number.
	</dd>
</dl>


<p>
	The following methods are directly available from the plugin:
</p>
<dl class="optionList">
	<dt>$("#tree").dynatree("disable")
	<dd>
		Disable event handling and add a class 'dynatree-disabled' to
		the container element.
	</dd>
	<dt>$("#tree").dynatree("enable")
	<dd>
		Enable event handling and remove the 'dynatree-disabled' class from the
		container element.
	</dd>
	<dt>$("#tree").dynatree("option", )
	<dd>
		Set a dynatree option at runtime.
		Example: <pre class="prettyprint">$("#tree").dynatree("option", "autoCollapse", true);
$("#tree").dynatree("option", "fx", { height: "toggle", duration: 200 }); </pre>
	</dd>
	<dt>$("#tree").dynatree("getTree")
	<dd>
		Return the associated <code>DynaTree</code> object.
	</dd>
	<dt>$("#tree").dynatree("getRoot")
	<dd>
		Return the root <code>DynaTreeNode</code> object of the tree.
	</dd>
	<dt>$("#tree").dynatree("getActiveNode")
	<dd>
		Return the <code>DynaTreeNode</code> object that is currently active.<br>
		(May be <code>null</code>.)
	</dd>
	<dt>$("#tree").dynatree("getSelectedNodes")
	<dd>
		Return an array of <code>DynaTreeNode</code> objects that are currently
		selected.<br>
		(May be empty: <code>[ ]</code>.)
	</dd>
</dl>


<h3><code>DynaTree</code> class members</h3>

<dl class="optionList">
	<dt>tree.activateKey(key)
	<dd>
		Activate and focus node with a given key and fire focus and activate events.<br>
		If <code>activeVisible</code> option is set, all parents will be expanded as necessary.<br>
		If key is null, the current activation is removed.<br>
		Return the active DynaTreeNode.
	</dd>
	<dt>tree.count()
	<dd>
		Return the number of nodes.
	</dd>
	<dt>tree.disable()
	<dd>
		Disable input for the tree and display gray. This is a shortcut for
		<code>$("#tree").dynatreee("disable")</code>.
	</dd>
	<dt>tree.enable()
	<dd>
		Complement to <code>tree.disable()</code>.
	</dd>
	<dt>tree.enableUpdate(enable)
	<dd>
		Turn rendering on or off and return the previous mode.
		Disabling update may speedup processing, when adding lots of nodes.<br>
		Don't forget to turn rendering back on, after applying the changes:
		<pre class="prettyprint">var prevMode = tree.enableUpdate(false);
[...]
tree.enableUpdate(prevMode);</pre>
	</dd>
	<dt>tree.getActiveNode()
	<dd>
		Return the currently active DynaTreeNode or null.
	</dd>
	<dt>tree.getNodeByKey(key)
	<dd>
		Return DynaTreeNode with a given key or 'null' if not found.
	</dd>
	<dt>tree.getPersistData()
	<dd>
		Return cookie persistence info as dictionary.<br>
		There is also a global function available:
		<code>$.ui.dynatree.getPersistData(cookieId, cookieOpts)</code>.
	</dd>
	<dt>tree.getRoot()
	<dd>
		Return the <i>invisible</i> root DynaTreeNode object.
		All visible toplevel nodes are children of this system node.
	</dd>
	<dt>tree.getSelectedNodes(stopOnParents)
	<dd>
		Return a list of currently selected DynaTreeNodes (may be an empty array).<br>
		If stopOnParents is set to <code>true</code>, children of selected nodes
		are skipped. This may be convenient in selectMode:3 (multi-hier).
	</dd>
	<dt>tree.initialize()
	<dd>
		Constructor (internal use).
	</dd>
	<dt>tree.isInitializing()
	<dd>
		Return <code>true</code>, if the tree is in the init phase.<br>
		Use this function in an event handler, to check if the event was fired
		during a page reload, when the cookie persistence is applied.
	</dd>
	<dt>tree.isReloading()
	<dd>
		Return <code>true</code>, if the tree is in the init phase and persistence is on,
		and the current status was read from existing cookies.<br>
		Use this function in an event handler, to check if the event was fired
		during a page reload, when the cookie persistence is applied.
	</dd>
	<dt>tree.isUserEvent()
	<dd>
		Return <code>true</code>, if the tree is processing a user event.<br>
		Use this function in an event handler, to check if the event was fired
		in response to a mouse click or key stroke.<br>
		Otherwise, the the event was generated by an API call or during
		initialization.
	</dd>
	<dt>tree.loadKeyPath(keyPath, callback)
	<dd>
		Make sure that a node with a given ID is loaded, by traversing - and
		loading - its parents. This method is ment for lazy hierarchies.<br>
		A callback is executed for every node as we go.
		<pre class="prettyprint">tree.loadKeyPath("/_3/_23/_26/_27", function(node, status){
	if(status == "loaded") {
		// 'node' is a parent that was just traversed.
		// If we call expand() here, then all nodes will be expanded
		// as we go
		node.expand();
	}else if(status == "ok") {
		// 'node' is the end node of our path.
		// If we call activate() or makeVisible() here, then the
		// whole branch will be exoanded now
		node.activate();
	}else if(status == "notfound") {
		var seg = arguments[2],
			isEndNode = arguments[3];
	}
});</pre>
	</dd>
	<dt>tree.logDebug(msg), logInfo(msg), logWarning(msg)
	<dd>
		(Internal use).
	</dd>
	<dt>tree.reactivate(setFocus)
	<dd>
		Fire onQueryActivate and onActivate events for the currently active node
		(if there is one).<br>
		This may be useful when processing an onPostInit callback.
	</dd>
	<dt>tree.redraw()
	<dd>
		Render all visible nodes.
		See <code>node.render()</code> for details.
	</dd>
	<dt>tree.reload()
	<dd>
		Reload the the tree.<br>
		For lazy trees this is done, by re-submitting the Ajax request that was
		defined in the <code>initAjax</code> option.<br>
		This will <strong>not</strong> work, if the tree was loaded from an embedded
		&lt;UL> element, because these elements are removed after they have been
		rendered.
	</dd>
	<dt>tree.renderInvisibleNodes()
	<dd>
		Force immediate HTML creation for all nodes, even if inside collapsed
		branches.
		This may be useful, if we want to bind events or otherwise must access
		these HTML elements.<br>
		It will however degrade performance, especially on large trees!<br>
		See <code>node.render()</code> for details.
	</dd>
	<dt>tree.selectKey(key, flag)
	<dd>
		Select or deselect node with a given key and fire focus and select events.<br>
		Return the selected DynaTreeNode.
	</dd>
	<dt>tree.serializeArray(stopOnParents)
	<dd>
		Return selected nodes as array of <code>{name: 'TreeName', value: 'NodeKey'}</code>
		objects, where name is the 'name' attribute of the tree's &lt;div> element.<br>
		This format is compatible with jQuery's serializeArray()
		function and may be used in $.post() calls.<br>
		See also the 'form' sample in the Example Browser.
	</dd>
	<dt>tree.toDict()
	<dd>
		Convert the tree into a JavaScript object.<br>
		See <code>node.toDict()</code> for details.
	</dd>
	<dt>tree.visit(fn, includeRoot)
	<dd>
		Call <code>fn(node)</code> for all nodes.<br>
		Stop iteration, if fn() returns false.
		Stop iteration <i>of the current branch</i>, if fn() returns 'skip'.
	</dd>
</dl>


<h3><code>DynaTreeNode</code> class members</h3>

<dl class="optionList">
	<dt>Attribute 'data'</dt>
	<dd>
		Use this attribute to access all node options that were passed to create
		this node.<br>
		For example <code>node.data.title</code> or <code>node.data.tooltip</code>.
		See also <a href="#nodeOptions">Node options</a>.
	</dd>
	<dt>node.activate()</dt>
	<dd>
		Activate this node - according to flag - and fire a onActivate event.<br>
		If <code>activeVisible</code> option is set, all parents will be expanded as necessary.<br>
		Focus is <em>not</em> set.
	</dd>
	<dt>node.activateSilently()</dt>
	<dd>
		Same as <code>activate()</code>, but does not fire events.
	</dd>
	<dt>node.addChild(nodeData[, beforeNode])</dt>
	<dd>
		Append a new child node.<br>
		<i>nodeData</i> may be a node data object as defined in
		<a href="#nodeOptions">Node options</a>, or an array thereof.
		Also objects and arrays of type <code>DynaTreeNode</code> are allowed.<br>
		Example:
<pre class="prettyprint">
var node = $("#tree").dynatree("getTree").getNodeByKey("1234");
node.addChild({title: "New Node", key: "3333"});
</pre>
		Since the <i>nodeData</i> may be a nested data structure, it is possible
		to create a deep hierarchy with one call.<br>
		The optional argument <i>beforeNode</i> specifies a child <code>DynaTreeNode</code>
		that the new node will be inserted before. (If this parameter is <i>null</i>
		or omitted, the new node will be appended.)
	</dd>

	<dt>node.appendAjax(ajaxOptions)</dt>
	<dd>
		Accepts a standard jQuery Ajax option object.<br>
		An asynchronous request is started, so this function returns immediately.
		While loading, a spinning wheel is displayed. On error, a red icon is shown.<br>
		The request handler must return a JSON object, formatted like the data's
		<code>children</code> object.<br>
		Use the <code>setLazyNodeStatus()</code> function to display the result.<br>
		See <a href="#lazyLoading">Loading child nodes on demand ('lazy loading')</a> for details.
	</dd>
	<dt>node.countChildren()</dt>
	<dd>
		Return the number of descendant nodes, i.e. direct and indirect children.
	</dd>
	<dt>node.deactivate()</dt>
	<dd>
		Deactivate this node and fire an onDeactivate event.
	</dd>
	<dt>node.expand(flag)</dt>
	<dd>
		Expand or collapse this node - according to flag.
	</dd>
	<dt>node.focus()</dt>
	<dd>
		Set focus to this node. Parent nodes are expanded, if this is necessary
		to make it visible.
	</dd>
	<dt>node.getChildren()
	<dd>
		Return list of child nodes or <code>null</code>.<br>
		For lazy nodes that have not yet been loaded, <code>undefined</code> is
		is returned.
	</dd>
	<dt>node.getEventTargetType(event)</dt>
	<dd>
		Return the part of a node, that a click event occurred on.<br>
		Possible values: 'prefix' 'expander', 'checkbox', 'icon', 'title'.<br>
		<code>null</code> is returned else.<br>
		Note: there is no check, if the event was fired on <strong>this</strong> node.
	</dd>
	<dt>node.getLevel()
	<dd>
		Return the depth (i.e. number of parent nodes).<br>
		0 is returned for the root node.
	</dd>
	<dt>node.getNextSibling()
	<dd>
		Return the successor node or <code>null</code>.
	</dd>
	<dt>node.getParent()
	<dd>
		Return the parent node or <code>null</code>.
	</dd>
	<dt>node.getPrevSibling()
	<dd>
		Return the predecessor node or <code>null</code>.
	</dd>
	<dt>node.hasChildren()
	<dd>
		Return <code>true</code> if node has child nodes.<br>
		Return <code>false</code> if node is a leaf, i.e. has no child nodes.<br>
		Return <code>undefined</code> if this is a lazy node, that was not yet
		successfully loaded.<br>
		A test for 'node is surely empty' would be coded like
		<pre class="prettyprint">if(node.hasChildren() === false) ...</pre>
	</dd>
	<dt>node.isActive()
	<dd>
		Return true, if this node is activated. Only one tree node may be active
		at any time.
	</dd>
	<dt>node.isChildOf(otherNode)
	<dd>
		Return true, if this node is a <i>direct</i> child of
		<code>otherNode</code>.
	</dd>
	<dt>node.isDescendantOf(otherNode)
	<dd>
		Return true, if this node is a descendent (direct or indirect child) of
		<code>otherNode</code>.
	</dd>
	<dt>node.isExpanded()
	<dd>
		Return true, if the node is expanded.
	</dd>
	<dt>node.isFirstSibling()
	<dd>
		Return true, if this node is the first of all children of the current parent.
	</dd>
	<dt>node.isFocused()
	<dd>
		Return true, if this node is has the focus.
	</dd>
	<dt>node.isLastSibling()
	<dd>
		Return true, if this node is the last of all children of the current parent.
	</dd>
	<dt>node.isLazy()
	<dd>
		Return true, if the node is lazy (loaded or not).
	</dd>
	<dt>node.isLoading()
	<dd>
		Return true, if the node is lazy and currently loading (i.e. an Ajax request is active).
	</dd>
	<dt>node.isSelected()
	<dd>
		Return true, if the node is selected.
	</dd>
	<dt>node.isStatusNode()
	<dd>
		Return true, if this is an temporary status node. Status nodes are
		created while loading lazy data, to display a throbber or error
		condition.
	</dd>
	<dt>node.isVisible()
	<dd>
		Return true, if the node is visible, i.e. all parents are expanded.
	</dd>
	<dt>node.makeVisible()
	<dd>
		Expand all parents as neccessary, to make this node visible.
	</dd>
	<dt>node.move(targetNode, mode)
	<dd>
		Move this node to <code>targetNode</code>.
		Possible <code>mode</code>:
		<ul>
		<li><code>child</code>: append this node as last child of targetNode.
			This is the default.
			To be compatble with the D'n'd hitMode, we also accept 'over'.
		<li><code>before</code>: add this node as sibling before targetNode.
		<li><code>after</code>: add this node as sibling after targetNode.
		</ul>
	</dd>
	<dt>node.reload(force)</dt>
	<dd>
		Deprecated. Use <code>reloadChildren()</code> instead.
	</dd>
	<dt>node.reloadChildren(callback)</dt>
	<dd>
		Discard and reload all children of a lazy node by triggering
		the <code>onLazyRead</code> event.
		if <code>callback</code> is passed, it is called after the Ajax request
		was executed.
		Example <pre class="prettyprint">node.reloadChildren(function(node, isOk){
	if(!isOk) alert("Node " + node + " could not be reloaded.");
});</pre>
	</dd>
	<dt>node.remove()
	<dd>
		Remove this node and descendents from tree.
	</dd>
	<dt>node.removeChildren()
	<dd>
		Remove all child nodes and descendents.
	</dd>
	<dt>node.render(useEffects, includeInvisible)
	<dd>
		Redraw this node with current attributes. All HTML markup is updated
		and class names are added according to current status.<br>
		If this node is expanded, markup for children is recursively generated
		as well.
		<ul>
		<li><code>useEffects</code>:<br>
			(default: false) Set to false to prevent animated expand effects,
			which would be applied asynchronously.
		<li><code>includeInvisible</code>:<br>
			(default: false) Force HTML creation for all descendants, even if
			inside a collapsed branch.<br>
			This may be useful, if we want to bind events or otherwise access
			these HTML elements. It will however degrade performance, especially
			on large trees.
		</ul>
		<br>
		Most of the time, there is no need to call this explicitly, since it is
		internally called on state changes.
	</dd>
	<dt>node.resetLazy()
	<dd>
		Remove all children from a lazy node and make sure it is collapsed.
		The node will be re-loaded when expanded the next time.
	</dd>
	<dt>node.scheduleAction(mode, ms)
	<dd>
		Schedule a delayed action.
		Possible <code>mode</code>:
		<ul>
		<li><code>expand</code>: Expand this node after <i>ms</i> microseconds.
		<li><code>activate</code>: Activate this node after <i>ms</i> microseconds.
		<li><code>cancel</code>: cancel pending action, if any was scheduled.
		</ul>
	</dd>
	<dt>node.select(flag)
	<dd>
		Select or deselect this node - according to flag - and fire an onSelect event.
	</dd>
	<dt>node.setLazyNodeStatus(status)
	<dd>
		Display a dummy child node, to provide feedback, when loading a lazy node's content. <br>
		Possible status:
		<ul>
		<li><code>DTNodeStatus_Loading</code>: show a spinning wheel, with 'loading...' message.
		<li><code>DTNodeStatus_Error</code>: show an error icon and message.
		<li><code>DTNodeStatus_Ok</code>: Remove the status node.
		</ul>
		Messages may be customized using the <code>strings.loading</code> and <code>strings.loadError</code> options.
	</dd>
	<dt>node.setTitle(title)
	<dd>
		Change current node title and redraw.
	</dd>
	<dt>node.sortChildren(cmp, deep)
	<dd>
		Sort child list by title.<br>
		<code>cmd</code>: optional compare function. If ommitted sorting is done by node titles.<br>
		<code>deep</code>: optional: pass true to sort all descendant nodes.<br>
		Example<pre class="prettyprint">// Custom compare function (optional) that sorts case insensitive
var cmp = function(a, b) {
	a = a.data.title.toLowerCase();
	b = b.data.title.toLowerCase();
	return a > b ? 1 : a < b ? -1 : 0;
};
node.sortChildren(cmp, false);</pre>
	</dd>
	<dt>node.toDict(recursive, callback)
	<dd>
		Convert the node into a JavaScript object.<br>
		<code>recursive</code>: set to true, to include child nodes.<br>
		<code>callback</code>: (optional) function to allow modifications.<br>
		Example <pre class="prettyprint">var cb = node.toDict(true, function(dict){
	dict.title = "Copy of " + dict.title;
	delete dict.key; // prevent duplicate keys
});</pre>
	</dd>
	<dt>node.toggleExpand()
	<dd>
		Toggle expansion state.<br>
		Expanding a lazy node, fires a onLazyRead event.
	</dd>
	<dt>node.toggleSelect()
	<dd>
		Toggle selection state.
	</dd>
	<dt>node.visit(fn, includeSelf)
	<dd>
		Call <code>fn(node)</code> for all child nodes.<br>
		Stop iteration, if fn() returns false.
		Stop iteration <i>of the current branch</i>, if fn() returns the string
		'skip'.
	</dd>
	<dt>node.visitParents(fn, includeSelf)
	<dd>
		Call <code>fn(node)</code> for all parent nodes.<br>
		Stop iteration, if fn(node) returns false.
	</dd>
</dl>

<h3>Programming examples</h3>

<p>
	The follwing code snippets should give an idea on how to use the API.
</p>

<h4>Example: Select a node with key '1234'</h4>

<pre class="prettyprint">
$("#tree").dynatree("getTree").selectKey("1234");
// or another way:
$("#tree").dynatree("getTree").getNodeByKey("1234").select();
// .. or yet another way (if 'generateIds' option was enabled):
$("#dynatree-id-1234").prop("dtnode").select();

</pre>


<h4>Example: Access the currently active node</h4>

<pre class="prettyprint">
var node = $("#tree").dynatree("getActiveNode");
if( node ){
	alert("Currently active: " + node.data.title);
}
</pre>


<h4>Example: Retrieve a node using for a DOM element or jQuery object</h4>

<pre class="prettyprint">
$(".dynatree-partsel").each(function(){
	var node = $.ui.dynatree.getNode(this);
	[...]
});
</pre>


<h4>Example: Rename the active node</h4>

<pre class="prettyprint">
var node = $("#tree").dynatree("getActiveNode");
node.data.title = "My new title";
node.render();
</pre>


<h4>Example: Add a child to the active node</h4>

<pre class="prettyprint">
var node = $("#tree").dynatree("getActiveNode");
var childNode = node.addChild({
	title: "My new node",
	tooltip: "This folder and all child nodes were added programmatically."
});
</pre>
<p>
	Note: instead of passing a single child object, we could also pass an array
	of such objects.<br>
	Also, the children may again contain <code>children</code> attributes, thus
	defining a sub tree.
</p>


<h4>Example: Add a hover handler and find the hovered node from any sub element</h4>

<pre class="prettyprint">
// Bind hover events to the tree's &lt;a> tags:
$("#tree a").hover(function(){
		var node = $.ui.dynatree.getNode(this);
		logMsg("Hover in %s", node);
	}, function(){
		var node = $.ui.dynatree.getNode(this);
		logMsg("Hover out %s", node);
	});
</pre>


<h4>Example: Expand all nodes</h4>

<pre class="prettyprint">
$("#tree").dynatree("getRoot").visit(function(node){
	node.expand(true);
});
</pre>


<h4>Example: Save current tree status to the backend</h4>

<pre class="prettyprint">
// Get a JavaScript object copy of the tree
var dict = $("#tree").dynatree("getTree").toDict();
// ... then use Ajax to send this to your server...
</pre>


<h4>Example: activate a node depending on URL</h4>

This sample shows how to parse the page URL and activate a node accordingly:
<code>http://server/_test-194.html?activate=_11</code>

<pre class="prettyprint">
// Add a helper function to parse the URL
function getURLParameter(name) {
	return unescape(
		(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
	);
}
// Evaluate the URL after the tree was loaded
$(function(){
	$("#tree").dynatree({
		[...]
		onPostInit: function(isReloading, isError) {
			var key = getURLParameter("activate");
			if( key ) {
				this.activateKey(key);
			}
		},
</pre>


<h2 id="theming">Theming and translation</h2>

<p>
	The tree's fonts, colors, and icons are defined using CSS, so changing the
	appearance is simply a matter of including a custom stylesheet or by
	replacing <a href="../src/skin/icons.gif">icons.gif</a> with another
	version.
</p>
<div class="codesample">
<a href="sample-theming.html">Try this example...</a>
<pre class="prettyprint">
&lt;script src="../jquery/jquery.js" type="text/javascript">&lt;/script>
&lt;script src="../jquery/jquery-ui.custom.js" type="text/javascript">&lt;/script>
&lt;script src="../src/jquery.dynatree.js" type="text/javascript">&lt;/script>
&lt;!-- Include the basic stylesheet: -->
&lt;link href="../src/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css">
&lt;!-- Override CSS with a custom stylesheet : -->
&lt;link href="skin-custom/custom.css" rel="stylesheet" type="text/css" >

&lt;script type="text/javascript">
	$(function(){
		$("#tree").dynatree({
			[&#8230;]
		});
	});
&lt;/script>
</pre>
</div>

<p>
	Custom.css would include lines like this:
</p>
<pre class="prettyprint">
.dynatree-has-children span.dynatree-icon
{
	background-position: 0 0;
	background-image: url("doc_with_children.gif");
}
</pre>

<p>
	Changing the appearance and icons of <b>single nodes</b> is done by assigning a
	custom class:
</p>
<pre class="prettyprint">
&lt;ul>
	&lt;li data="addClass: 'custom1'">Document with custom class
</pre>

<p>
	or
</p>

<pre class="prettyprint">
children: [
	{ title: "Document with custom class", addClass: "custom1" },
</pre>

<p>
	we would then add CSS definitions for the new node to our stylesheet:
</p>
<pre class="prettyprint">
span.custom1 a
{
	background-color: #ffffbb;
	color: maroon;
}
span.custom1 span.dynatree-icon
{
	background-position: 0 0;
	background-image: url("customDoc2.gif");
}
</pre>


<h3>Translation</h3>
<p>
	Strings can be translated in the tree options:
</p>

<pre class="prettyprint">
$("#tree").dynatree({
	[&#8230;]
	strings: {
		loading: "Daten werden geladen&#8230;",
		loadError: "Fehler beim Laden!"
	},
});
</pre>



<h2><a id="issues"></a>Feedback, version history, credits and known issues</h2>

<h3>Credits</h3>
<p>
	I am using the <a href="http://prendreuncafe.com/work/jqplanize/">planize plugin</a>
	by Nicolas Perriault for the table of contents.<br>
	I am using <a href="http://code.google.com/p/google-code-prettify/">prettify.js</a>
	by Mike Samuel for syntax highlighting in the of source code samples.
</p>

<h3>Feedback and support</h3>
<p>
	First of all: this is work in progress.<br>
	Any kind of feedback is very welcome :-)
</p>
<ul>
	<li>A <a href="http://groups.google.com/group/dynatree">discussion forum</a> is in place to ask questions or discuss features.
	<li>Check <a href="http://stackoverflow.com/tags/dynatree">Stack Overflow</a> for existing questions.
	<li>Use the <a href="http://code.google.com/p/dynatree/issues/list">Issue Tracker</a> to get a list of known bugs, or vote for a feature.<br>
		Please make sure you searched the group and issue tracker, before adding a new request.
	<li>If you like:
		<a href="http://wwwendt.de/freeware/donate.html">Make a donation</a>.
</ul>

</body>
</html>

Youez - 2016 - github.com/yon3zu
LinuXploit