jQuery UI Widgets › Forums › Navigation › NavigationBar, ToolBar, NavBar › Toolbar support for a progress bar
Tagged: progressbar support in toolbar, toolbar
This topic contains 2 replies, has 2 voices, and was last updated by alastairwalker 5 years ago.
-
Author
-
Hi – I hope I can get some help on this matter.
I am trying to set up a horizontal progress bar in a toolbar.
Setting up the display of the progress bar is is easy part.
The real problem is how to update the ‘value’ of the progress bar arising from an event outside of the scope of the toolbar. (I have set up a external button, with a click event to implement this.)
Normally, referencing the progress bar has to be done from the context of ‘tool’ i.e. as tool.jqxprogressbar.
The selector that is externally accessible is ‘#jqxToolbar’, but, as the demo shows, this leads to incorrect behaviour.
I am looking for guidance on how to access ‘tool.jqxprogressbar’ from outside of the direct scope of the toolbar.
Any guidance on how this can be done will be really appreciated!
Alastair
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Toolbar Sample - with Progress Bar</title> <link type="text/css" rel="Stylesheet" href="libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxprogressbar.js"></script> <script type="text/javascript"> $(document).ready(function () { var progressCounter = 0; $("#jqxToolbar").jqxToolBar({ width: "100%", height: 35, tools: "button | dropdownlist combobox | custom", 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.jqxProgressBar( { height: 15, width: 200, showText: true, template: 'default', animationDuration: 0, value: 1, max: 10 }); break; } } }); $("#jqxButton").jqxButton( { width: '150', height: '25'}); $('#jqxButton').on('click', function () { progressCounter++; //tool.jqxProgressBar( jQuery('#jqxToolbar').jqxProgressBar({ value: progressCounter}); }); }); </script> </head> <body> <div id="jqxToolbar"></div> <div id="jqxButton" style="margin-top: 10px;">Increment counter</div> </body> </html>
Hello Alastair,
Please, take a look at this example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery Toolbar Sample - with Progress Bar</title> <link type="text/css" rel="Stylesheet" href="libraries/jqwidgetslibrary/jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxtoolbar.js"></script> <script type="text/javascript" src="libraries/jqwidgetslibrary/jqwidgets/jqxprogressbar.js"></script> <script type="text/javascript"> $(document).ready(function () { var progressCounter = 1; var progressbar = null; var progressbarInPupup = null; $("#jqxToolbar").jqxToolBar({ width: "100%", height: 35, tools: "button | dropdownlist combobox | custom", 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: case 3: tool.jqxProgressBar({ height: 15, width: 200, showText: true, template: 'default', animationDuration: 0, value: progressCounter, max: 10 }); if (!menuToolIninitialization) { progressbar = tool; } else { progressbarInPupup = tool; } break; } } }); $("#jqxButton").jqxButton( { width: '150', height: '25'}); $('#jqxButton').on('click', function () { progressCounter++; progressbar.jqxProgressBar({ value: progressCounter }); progressbarInPupup.jqxProgressBar({ value: progressCounter }); }); }); </script> </head> <body> <div id="jqxToolbar"></div> <div id="jqxButton" style="margin-top: 10px;">Increment counter</div> </body> </html>
I hope this will help.
Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comThank you very much!
This is very helpful!
Many thanks,
Alastair
-
AuthorPosts
You must be logged in to reply to this topic.