JEasyUI: Create endless progressbar

Posted 2020-06-19

We know that jeasyui have a very nice progress messager. Its progress is updated with percentage (%) value which ranged from 0 to 100.

However, most of time, we do not have this information or hard to get the progress in percentage.

For example, during alax loading, we show progress bar with loading message and close it when loading is complete.

This custom is to create a loading progress with moving block.

Step 1. Adding a option called endless with default boolean value true

	$.fn.progressbar.defaults = {
		width: ‘auto‘,
		height: 22,
		value: 0,	// percentage value
		text: ‘{value}%‘,
		endless: true,  //Refer to Custom Note (1)
		onChange:function(newValue,oldValue){}
	};

　　

Step 2. Update left attribute when setvalue fired, hide the persentage text.

	$.fn.progressbar.methods = {
		options: function(jq){
			return $.data(jq[0], ‘progressbar‘).options;
		},
		resize: function(jq, width){
			return jq.each(function(){
				setSize(this, width);
			});
		},
		getValue: function(jq){
			return $.data(jq[0], ‘progressbar‘).options.value;
		},
		setValue: function(jq, value){
			if (value < 0) value = 0;
			if (value > 100) value = 100;
			return jq.each(function(){
				var opts = $.data(this, ‘progressbar‘).options;
				var text = opts.text.replace(/{value}/, value);
				var oldValue = opts.value;
				opts.value = value;
				$(this).find(‘div.progressbar-value‘).width(value+‘%‘);
				///////////////////////Refer to Custom Note (1)////////////////////////////////
				//modified by rongbin to support endless progress... 
				if(opts.endless == true){
					var leftValue = value-5;
					if (leftValue < 0) leftValue = 0;					
					$(this).find(‘div.progressbar-value‘).css(‘left‘, leftValue+‘%‘);
				}else{
					$(this).find(‘div.progressbar-text‘).html(text);
				}			
				///////////////////////////////////////////////////////////////////////////////
				if (oldValue != value){
					opts.onChange.call(this, value, oldValue);
				}
			});
		}
	};

　　

 

 

 

 

End of Note