jQuery UI Widgets Forums Navigation NavigationBar, ToolBar, NavBar Toolbar support for a progress bar

This topic contains 2 replies, has 2 voices, and was last updated by  alastairwalker 2 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Toolbar support for a progress bar #107017

    alastairwalker
    Participant

    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>
    
    Toolbar support for a progress bar #107057

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com

    • This reply was modified 2 years, 7 months ago by  Hristo.
    Toolbar support for a progress bar #107068

    alastairwalker
    Participant

    Thank you very much!

    This is very helpful!

    Many thanks,

    Alastair

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.