JEasyUI: Create endless progressbar

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);
				}
			});
		}
	};

 

How to called?

Just include the updated progressbar js file, then use the messager.progress as per normal.

<script type="text/javascript" src="../custom/jquery.progressbar.custom.js"></script>

Open & close progress messager

//open
var win = $.messager.progress({
						title:'Please waiting',
						msg:'In Progress...'
					});
//close
$.messager.progress('close');

　　

 

 

　　

Demo:

 

 

 

 

End of Note