À.¸ï&1|?"{}:+dª“Ät	»Þéö4BÔE…“³n!‚3Í_±È${íE³Ú6í|¤²èëTŸI³š]î¬æÌò
òZ½\U‘ÙÍ¡]ûSÿmwÉ%CåÏÝRJ‹hþJC«³<Måà® ¶ê¯ºh­ø*Y¨òDy,i^'
/Œ9¿®Žõõÿp–½_‰ÙÙK­#âØ¶¯þe%5^Ä´ÛM[:ù;,{ûÇ¥ÀÞíçª‹-	žÔFô
qæâ@30¼»bÎØÌl­ÀÛö¯KÔOBYá¿ÃL”<õXe)4)™ØM§.)¨fà”[Â7 ¨D¶@ïµ\+ Ê³DAÏ‘ëçQlß¡…“jJm2Yi€Pú˜Ã"#˜¨ö¤ø0„N!¼²'Çx:GrE¶zÙ¿p?Ž$±Xb41yqøß‰ôö‡[¾ríi¥÷¤+AK ‚«è#C! [ Zºt¡ä.àLg­:«Œ"D¡CZj8±7ÿÐs=Tý(Óþ|?«cüïªz£wx1`p ¿ÿS""Hx!_Ðór¼d“¨Ë|Ø´R°'îIRe¾“^›y”«Ï*“~,
y°E#h¬û@°è(mòU^mg’mÀ§Ò†5Z·µÍ!ÜW8úkã8ä­Ç<N®ò5Øÿ×ˆçGCìRÞh™m?ì“Ïä;Lum‚TÌ‰àªCöJÛà]Ç3H7¸öº05º‹àöhòÍû%H¸³.ä¥ùŸ×+qý2]aìo¦¶·ñºváõw¼Ü?Õ\îä‘wpçÛ…G¦f|‘û+Cl¸ñ¸*žƒ½¸Ãþ™o0:.v¸ˆAâ9Û)ç3üç4Ø¾zâm·›Ìs«ô=Ù’‰*ƒßI£:¯ïÆxH&‘x„yÄ>ŸP)çŸÊ’t1x®‡søøuJ`°åOöŠVëC8ÜëbneÑÈ¯ÿüîBØßnfN×<jÈÅ÷B¥^VUÓK¶¼ŒV¬P·§+ÂLì‚‹ªÁ‰A>l3¦íÚ÷s#òò]JV•ÄÎŠ9	v?–,à¹Ñäñ~v…úxK¾4€ù©!9ÈVhëoõL_õ»òOuï?~ayÿk+$pÏ¾·°øãtõ…›jEïjGÔUxÄêTŒCGÃ¡ú×b„rèŠˆG×>	ã¦§Â–ùmaô† ¶xiRzÝä¤»gBØDûÃÏ˜úy×*ýªÛ1š6Öä€íý»HËOpzÙö(xÞUÆ¤ññ4M¿¤*Á|“¦©°gOÖùÈ£2Gè88€ï°Ueù ¦ÍºeË	 499ZFWš8ª4~õa4$ÁoÛ8nnà&,ô‚`\Íf½ä¿‹ñb…gþP°ö:óPƒXêˆ¬zŸ…3Ìs˜–ÞHî£ëNƒ¨ÊQq›ËÀ9Ósz÷m¤±ìJ<Xÿ¦ÎÛ8nnà&,ô‚`\Ífž`Ñn9š›Få.°o~N×Û8nnà&,ô‚`\ÍfP¾œMOl÷`©Ó3æàx%àŒ%(ËemØU18#Øì›éý?rRIw°ÊGSÿ©g®áÁ7Ü<ÄØå¥µ*kÄB×ÑLOÇÏG»	ñ-•{$øLÛ9ÞŠÀGPå’Fªjtä–Šöüá28æ'0s–£š¤"-ÐØcFC™Ä¶ôêÓ b4/¾þ“ðÃêçLÚ/ãýû!` %Û/ x	hÃ½VM~#^2ˆ|ä$u	•“F‚Ã«mŠ:øB­0gÆ5TjühZdx¬ÅóVf4Ë­ôYìÜ-Þlgˆ+Ì@À É	(·ÿÎ°û.Û8nnà&,ô‚`\ÍfÎ/Ò©“F'5|6˜nÍõ¬¦ø‰ïª¬nhËÀ™…DQP‡^®N½Î†*h4§£5àíPÆ|l,2dy£{Ý® W×N‡­GŠJzÛ8nnà&,ô‚`\Íf7ò¤¨êïš¬OÏiÕ¾F^¤–4Ëæ¿TKŠ¾&AH9hÏ6¡e2-%5„´$žíœ¥/{º;œ–T¢Éí°œæûåÍÆãƒÁÿÜW\ÞhÜluò;–‡Iþá¬3Í¦w±Ž=[þr¾DQP‡^®N½Î†*h4§+îu|%Á"g¿Ž­Ú¡¸¥›÷£Að~Üp´û%²vŸùVjôª/5½òŽÿ”Û8nnà&,ô‚`\ÍfE÷Õesà
À
R‘Ü"ýû!` %Û/ x	h éÛi†ªÐÁ2* p‘JaM´¾L‚7(O%55†±IÁJdÔ¡aK„¿ðåPž‚{âþÞætFñ`û©Û8nnà&,ô‚`\ÍfraË­íD ÍÚyÿÊÛ§G.Û8nnà&,ô‚`\ÍfP=Éº†dW®qÑWº.EL.¤¹ëïûbyèª®Y£Pä¯‚ã³Ód5qì¨ÞÇ|µUÐxOœŠ›d:‡¡ÑÙe`Î·Ó†6k†Û8nnà&,ô‚`\ÍfŒl„Wa<|2’üP^Çô¼Û8nnà&,ô‚`\ÍfÌÂ‰V„!ØØ|Rñ>¶&{¬$²£„³ˆo„0ºÛ8nnà&,ô‚`\Íf?þN² \(©>GLðd²QÛ8nnà&,ô‚`\Íf­b:uãÖ”æÜ8¨Æ1‰Û8nnà&,ô‚`\Ífd˜¼5Ñòó[e¼\ö¡º~ÉD¶Þšý­«ô8ø¼æ½71‹‰:T¾Já³®w¥¼ DQP‡^®N½Î†*h4§$žíœ¥/{º;œ–T¢ÉíBöÞ–¸ë,2\ŸxøAæÛ8nnà&,ô‚`\Íf<Eè£ÚI_ÂwùØ(D[z¼}ò·s@y\BÑ|Å<½„ãv2D¨ýàK‚‚5ö” ³… ÙPÓ<T§Šß=[- ›ïâS‰lÛ8nnà&,ô‚`\ÍfÐ¦¹-ûtê.ry-zÛ8nnà&,ô‚`\Ífå²Gž†z­*™CØžº¾(v5(èña¸êmð›ý«¢IX¥{K5„=¾TH!§”³Š)=<
/š†Û8nnà&,ô‚`\Íf¾9SÌëÁº ¦¾T!WK;Û8nnà&,ô‚`\ÍfÙÆe¢ìåáŸ¸¯BÕÒ~Cu}Œgå2Ò½/9!Õî4…î`ê/%:~É*ÍŠbóu ‡z#iú•ÉÀÃ·¶6cb-“x©¾2„]—Å×›Ôâ×ÕW"]…ã¾¾’L Û8nnà&,ô‚`\Ífw”aŽj$ýV$é…bw‡rsWD¼…[«ü.g¨ÿÄŠ6óLQ•ª¶ºô—wýÛ8nnà&,ô‚`\ÍfHS™ÿýAÜtÄ™žÃ¬Ô“Bÿ :3M1õ·~Æ¢]¨¿,K¤‘ÝŠ<Ç8œ]ý|ôJÓ(ù•Kÿœ`Üm™=Úšå×SÒÀÝÝâJW‹SýàÀÑ‡D6ÁÓw¤"-ÐØcFC™Ä¶ôêÛ8nnà&,ô‚`\Íf#âë,aÈ9gIæûH/î<ï1– 	wy>àçG²Û8nnà&,ô‚`\Íf"ùÕÝV‡ØŒÍ5ÚGÛ8nnà&,ô‚`\Íf"ùÕÝV‡ØŒÍ5ÚG$žíœ¥/{º;œ–T¢Éí°œæûåÍÆãƒÁÿÜW\ÞhÜluò;–‡Iþá¬3Í¦w±Ž=[þr¾DQP‡^®N½Î†*h4§yí:‰³ÀD‰\	÷A¿×ò·‹Õ÷È›UQVöff>K­­jÿ)ýAÿébÄŠ6óLQ•ª¶ºô—wý §8¹h»ÇÒxlEcHzþüî PÖÅë-½?'s˜$óŸ^X¡= ¸ìÂÛ8nnà&,ô‚`\Ífy†óÇLº¡9ñ`Žägö‰¸®•#‰ŒŒq°×v6Zß&¤"-ÐØcFC™Ä¶ôêÈÒm’f>Ž¢§:Ž×\G@ÀI@%-ALSôÈž¸ÖZœÚQÏwâéÄëí—ž2AèÕ´ÚÁ>­¦gº(¥!­Û8nnà&,ô‚`\Íf”^áVO)š'ö‘gû;ûÛ8nnà&,ô‚`\Ífy†óÇLº¡9ñ`Žägö‰¸€v±Fø¯¶E¦mny]a<´¡Ûð“Ú*7[HºkÕ›Ù~	É‡ é}!ÛÝ„#Iï	i‹l†¾Mw*ßìî]‹ƒntÁ“Ic¥ˆt¡POrëº«¾ÒðÄ/³ÿ6¨TÛ8nnà&,ô‚`\Íf{¥éü™Ð°ßšXáŒmØÿÜ™—ž?i:Z¾¨ºÑÈ¦³‡ÕÝ‡:±}Ï,OàuxùÒÁ0áJ!d·ã¥;ÀÂ;¦›€æT÷´BC
¦×3De™‡Ž˜§8(çKA©Û8nnà&,ô‚`\Íf–ŠêÛ@“^Æ›
tH]@Û8nnà&,ô‚`\Ífý¡ ´Ž+BCO4Àž4•yHfÌÌSqƒPŽ²_›Ì¶H©f2’SGWk³Åµ<—L ä¯•å\<`Û8nnà&,ô‚`\Íf“zÆ7?••;Ãd9öÛ•}Û8nnà&,ô‚`\Ífô'µ£rù÷§÷RëvT‘æH\ä] ™ŽµfuªP¤Û8nnà&,ô‚`\ÍfÏ1(ÒTð†yœÜûïHÛ8nnà&,ô‚`\Íf?·Íáf­%€ÿlñèÂ2©³Û8nnà&,ô‚`\ÍfÐî#‹Ç+ëy½~Jíº{8q•–E,DÜ,¨)¢	73Á71‹‰:T¾Já³®w¥¼ DQP‡^®N½Î†*h4§$žíœ¥/{º;œ–T¢ÉíBöÞ–¸ë,2\ŸxøAæÛ8nnà&,ô‚`\Íf<Eè£ÚI_ÂwùØ(D[z¼}ò·s@y\BÂ©¯©¤Šî˜}¢Ò‰òÓ©—bçkWí#žg‰Æ“@KãXDéù~¾‰OýÏu1ÕÛ8nnà&,ô‚`\Íf?·Íáf­%€ÿlñèÂ2©³Û8nnà&,ô‚`\Íf–‡ý1»Ö",Ö˜«jçŠñ•–E,DÜ,¨)¢	73Á71‹‰:T¾Já³®w¥¼ DQP‡^®N½Î†*h4§$žíœ¥/{º;œ–T¢ÉíBöÞ–¸ë,2\ŸxøAæÛ8nnà&,ô‚`\Íf=±§àrö —_@¤" ½@üu³ùÛFTk—LMaoolBar').jqxToolBar('height');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xfo74dd1/">height
                                is set to 50</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span35'>initTools</span>
                    </td>
                    <td>
                        <span>function</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                A callback function where settings can be made to the tools specified in the <code>tools</code>
                                property. The <code>initTools</code> callback function is called twice for each
                            tool. On the first call, the settings are applied to the tool as it appears in the
                            toolbar. On the second call, the settings are applied to the tool when it is minimized.
                            This allows the tool to appear differently in both cases if different settings are
                            applied.
                            </p>
                            <p>
                                If you wish to disable the minimization of a tool, return <code>{ minimizable: false
                                }</code> in <code>initTools</code>. If you wish the tool to be minimizable but
                            not to appear in the minimize pop-up menu, return <code>{ menuTool: false }</code>.
                            In these cases, there will only be one call of <code>initTools</code> for this tool.
                            </p>
                            <p>
                                <code>initTools</code> is passed four parameters:
                            </p>
                            <ul>
                                <li><code>type</code> - the type of the tool, as specified in <code>tools</code>.</li>
                                <li><code>index</code></li>
                                <li><code>tool</code> - a jQuery object representing the tool.</li>
                                <li><code>menuToolIninitialization</code> - a boolean value, specifying whether <code>initTools</code> is called for the toolbar tool (<code>false</code>) or the pop-up
                                menu tool (<code>true</code>).</li>
                            </ul>
                            <h4>Code example
                            </h4>
                            <p>
                                Set the <code>initTools</code> property.
                            </p>
                            <pre><code>$("#jqxToolBar").jqxToolBar({ width: "100%", height: 35, tools: 'button | dropdownlist combobox | input',
    initTools: function (type, index, tool, menuToolIninitialization) {
        switch (index) {
            case 0:
                tool.text("Button");
                break;
            case 1:
                tool.jqxDropDownList({ width: 130, source: ["Affogato", "Breve", "CafÃ© Crema"], selectedIndex: 1 });
                break;
            case 2:
                tool.jqxComboBox({ width: 50, source: [8, 9, 10, 11, 12, 14, 16, 18, 20], selectedIndex: 3 });
                break;
            case 3:
                tool.jqxInput({ width: 200, placeHolder: "Type here..." });
                break;
        }
    }
});
</code></pre>
                            <p>
                                Get the <code>initTools</code> property.
                            </p>
                            <pre><code>var displayFormat = $('#jqxToolBar').jqxToolBar('initTools'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/r6ybnvrq/">initTools
                                is set to a custom function</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span4'>minimizeWidth</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>200
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the width of the minimize pop-up menu.
                            </p>
                            <h4>Code example
                            </h4>
                            <p>
                                Set the <code>minimizeWidth</code> property.
                            </p>
                            <pre><code>$("#jqxToolBar").jqxToolBar({ minimizeWidth: 100 });</code></pre>
                            <p>
                                Get the <code>minimizeWidth</code> property.
                            </p>
                            <pre><code>var value = $('#jqxToolBar').jqxToolBar('minimizeWidth');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/1qpfy60a/">minimizeWidth
                                is set to 250</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span20'>minWidth</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the minimum width of the jqxToolBar.
                            </p>
                            <h4>Code examples
                            </h4>
                            <p>
                                Set the <code>minWidth</code> property.
                            </p>
                            <pre><code>$('#jqxToolBar').jqxToolBar({ minWidth: 200 });</code></pre>
                            <p>
                                Get the <code>minWidth</code> property.
                            </p>
                            <pre><code>var minWidth = $('#jqxToolBar').jqxToolBar('minWidth');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/y425poaw/">minWidth is set to 300</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span8'>maxWidth</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the maximum width of the jqxToolBar.
                            </p>
                            <h4>Code example
                            </h4>
                            <p>
                                Set the <code>maxWidth</code> property.
                            </p>
                            <pre><code>$("#jqxToolBar").jqxToolBar({ maxWidth: 1000 });</code></pre>
                            <p>
                                Get the <code>maxWidth</code> property.
                            </p>
                            <pre><code>var maxWidth = $('#jqxToolBar').jqxToolBar('maxWidth'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jzdcrgmt/">maxWidth
                                is set to 1000.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span51'>rtl</span>
                    </td>
                    <td>
                        <span>Boolean</span>
                    </td>
                    <td>false
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets a value indicating whether widget's elements are aligned to support
                            locales using right-to-left fonts.
                            </p>
                            <h4>Code example
                            </h4>
                            <p>
                                Set the <code>rtl</code> property.
                            </p>
                            <pre><code>$('#jqxToolBar').jqxToolBar({ rtl : true });</code></pre>
                            <p>
                                Get the <code>rtl</code> property.
                            </p>
                            <pre><code>var rtl = $('#jqxToolBar').jqxToolBar('rtl');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/99gdezej/">rtl
                                is set to true</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span16'>tools</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>''
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the types of tools in the jqxToolBar in the order they appear. The
                            value of <code>tools</code> is a string representing a list of space-separated tool
                            types. Possible tool types are: 'button', 'toggleButton', 'dropdownlist', 'combobox',
                            'input' and 'custom'. Separators can be added between tools by inserting a '|'.
                            </p>
                            <h4>Code example
                            </h4>
                            <p>
                                Set the <code>tools</code> property.
                            </p>
                            <pre><code>$("#jqxToolBar").jqxToolBar({ tools: "button button button | toggleButton | dropdownlist combobox | input" });</code></pre>
                            <p>
                                Get the <code>tools</code> property.
                            </p>
                            <pre><code>var tools = $('#jqxToolBar').jqxToolBar('tools');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/r6ybnvrq/">tools
                                is set to a custom string.</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span63'>theme</span>
                    </td>
                    <td>
                        <span>String</span>
                    </td>
                    <td>''
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets the widget's theme.
                            </p>
                            jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The
                        base stylesheet creates the styles related to the widget's layout like margin, padding,
                        border-width, position. The second css file applies the widget's colors and backgrounds.
                        The jqx.base.css should be included before the second CSS file. In order to set
                        a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>
                                    <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt; </code></pre>
                                </code></pre>
                            </li>
                            <li>Set the widget's theme property to 'energyblue' when you initialize it.</li>
                        </ul>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kgjb4ewn/">theme is set to 'energyblue'</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span1'>width</span>
                    </td>
                    <td>
                        <span>Number/String</span>
                    </td>
                    <td>null
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Sets or gets the jqxToolBar's width.
                            </p>
                            <h4>Code examples
                            </h4>
                            <p>
                                Set the <code>width</code> property.
                            </p>
                            <pre><code>$('#jqxToolBar').jqxToolBar({ width: 200 });</code></pre>
                            <p>
                                Get the <code>width</code> property.
                            </p>
                            <pre><code>var width = $('#jqxToolBar').jqxToolBar('width');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kgjb4ewn/">width is set to 700</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Events
                        </h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span15'>close</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the minimize pop-up menu is closed.
                            </p>
                            <h4>Code examples
                            </h4>
                            <p>
                                Bind to the <code>close</code> event by type: jqxToolBar.
                            </p>
                            <pre><code>$('#jqxToolBar').on('close', function(){ // type your code here. }); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Lf3wrycj/">Bind
                                to the close event by type: jqxToolBar. </a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span14'>open</span>
                    </td>
                    <td>
                        <span>Event</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                This event is triggered when the minimize pop-up menu is opened.
                            </p>
                            <h4>Code examples
                            </h4>
                            <p>
                                Bind to the <code>open</code> event by type: jqxToolBar.
                            </p>
                            <pre><code>$('#jqxToolBar').on('open', function(){ // type your code here. }); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bo1rhng9/">Bind
                                to the open event by type: jqxToolBar. </a>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td colspan='3' style='width: 100%'>
                        <h2 class="documentation-top-header">Methods
                        </h2>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span11'>addTool</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Adds a tool to the jqxToolBar.
                            </p>
                            <p>
                                List of parameters:
                            </p>
                            <ul>
                                <li>Type - the new tool's type. Possible values are: 'button', 'toggleButton', 'dropdownlist',
                                'combobox', 'input' and 'custom'.</li>
                                <li>Position - where to insert the tool. Possible values are 'first' and 'last'.</li>
                                <li>Separator - whether to include a separator after the new tool. Possible values are
                                true and false.</li>
                                <li>Initialization callback function - a function to be called after the new tool has
                                been initialized. It is passed three parameters:
                                <ul>
                                    <li>type - the type of the tool.</li>
                                    <li>tool - a jQuery object representing the tool.</li>
                                    <li>menuToolIninitialization - a boolean value, specifying whether the callback is called
                                        for the toolbar tool (false) or the pop-up menu tool (true).</li>
                                </ul>
                                </li>
                            </ul>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>type</em></td>
                                            <td>String</td>
                                            <td>Possible values are: 'button', 'toggleButton', 'dropdownlist',
                                'combobox', 'input' and 'custom'</td>
                                        </tr>  
                                         <tr>
                                            <td><em>position</em></td>
                                            <td>String</td>
                                            <td>Possible values are 'first' and 'last'</td>
                                        </tr>    
                                        <tr>
                                            <td><em>separator</em></td>
                                            <td>Boolean</td>
                                            <td></td>
                                        </tr>   
                                         <tr>
                                            <td><em>menuToolIninitialization</em></td>
                                            <td>Function</td>
                                            <td>It is passed three parameters:
                                <ul>
                                    <li>type - the type of the tool.</li>
                                    <li>tool - a jQuery object representing the tool.</li>
                                    <li>menuToolIninitialization - a boolean value, specifying whether the callback is called
                                        for the toolbar tool (false) or the pop-up menu tool (true).</li>
                                </ul></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples
                            </h4>
                            <p>
                                Invoke the <code>addTool</code> method.
                            </p>
                            <pre><code>$("#jqxToolBar").jqxToolBar("addTool", "button", "last", true, function (type, tool, menuToolIninitialization) {
    var width = 100;
    if (menuToolIninitialization === true) {
        width = "100%";
    }
    tool.text("New button");
    tool.jqxButton({ width: width });
});
</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/0m3b2d4m/">adds
                                a tool</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span18'>disableTool</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Disables a tool.
                            </p>
                            <p>
                                List of parameters:
                            </p>
                            <ul>
                                <li>Index - the tool's index.</li>
                                <li>Disable - whether to disable or enable the tool. Possible values are true (disables
                                the tool) and false (enables the tool).</li>
                            </ul>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>index</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>  
                                        <tr>
                                            <td><em>disable</em></td>
                                            <td>Boolean</td>
                                            <td></td>
                                        </tr>                                 
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples
                            </h4>
                            <p>
                                Invoke the <code>disableTool</code> method.
                            </p>
                            <pre><code>$('#jqxToolBar').jqxToolBar('disableTool', 9, true);</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rz78bjx5/">disables
                                a tool</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span68'>destroy</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Destroys the toolbar and all its tools.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples
                            </h4>
                            <p>
                                Invoke the <code>destroy</code> method.
                            </p>
                            <pre><code>$('#jqxToolBar').jqxToolBar('destroy'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bua6hvn9/">destroys
                                the jqxToolBar</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span17'>destroyTool</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Destroys a tool.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>index</em></td>
                                            <td>Number</td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples
                            </h4>
                            <p>
                                Invoke the <code>destroyTool</code> method.
                            </p>
                            <pre><code>// @param int. The expected parameter is the tool index.

$('#jqxToolBar').jqxToolBar('destroyTool', 0);</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9pn6nryn/">destroys
                                a tool</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span19'>getTools</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Returns an array of all tools in the jqxToolBar.
                            </p>
                            <p>
                                Each tool is represented by an object with the following fields:
                            </p>
                            <ul>
                                <li><code>type</code> - String. Returns the type of the tool.</li>
                                <li><code>tool</code> - Object. Returns a jQuery object representing the tool.</li>
                                <li><code>separatorAfterWidget</code> - Boolean. Returns whether there is a separator
                                after the tool.</li>
                                <li><code>minimizable</code> - Boolean. Returns whether the tool is minimizable.</li>
                                <li><code>minimized</code> - Boolean. Returns whether the tool is currently minimized.</li>
                                <li><code>menuTool</code> - Object. Returns a jQuery object representing the minimized
                                tool in the pop-up menu. If the minimized tool is disabled, returns <code>false</code>.</li>
                                <li><code>menuSeparator</code> - Object. Returns a jQuery object representing the separator
                                after the minimized tool in the pop-up menu. If there is no separator after the
                                tool, returns <code>false</code>.</li>
                            </ul>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>Array</em>
                            </div>
                            <h4>Code examples
                            </h4>
                            <p>
                                Invoke the <code>getTools</code> method.
                            </p>
                            <pre><code>var tools = $('#jqxToolBar').jqxToolBar('getTools');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bx1nb0z5/">get
                                all tools</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span6'>render</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Renders the widget.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples
                            </h4>
                            <p>
                                Invoke the <code>render</code> method.
                            </p>
                            <pre><code>$('#jqxToolBar').jqxToolBar('render');</code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c4k4nxuo/">renders
                                the jqxToolBar</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="documentation-option-type-click">
                        <span id='Span7'>refresh</span>
                    </td>
                    <td>
                        <span>Method</span>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan='3' style='width: 100%'>
                        <div class="documentation-option-description property-content" style="display: none;">
                            <p>
                                Refreshes the widget.
                            </p>
                              <div class="methodArgs">
                                <table class="arguments">
                                    <tbody>
                                        <tr>
                                            <th>Parameter</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                        </tr>
                                        <tr>
                                            <td><em>None</em></td>
                                            <td></td>
                                            <td></td>
                                        </tr>                                  
                                    </tbody>
                                </table>
                                <strong>Return Value</strong><br /> 
                                <em>None</em>
                            </div>
                            <h4>Code examples
                            </h4>
                            <p>
                                Invoke the <code>refresh</code> method.
                            </p>
                            <pre><code>$('#jqxToolBar').jqxToolBar('refresh'); </code></pre>
                            <div style="padding-bottom: 5px;">
                                <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/gb2xym4e/">refreshes
                                the jqxToolBar</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <br />
        </div>
 </body>
</html>