mootools_使用MooTools的动画进度条：dwProgressBar

mootools

I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage.

我喜欢进度条。 重要的是，我大致了解任务的完成百分比。 我创建了一个高度可定制的MooTools进度条类，该类动画化为所需的百分比。

View Demo 查看演示 Download 下载

Moo产生的XHTML (The Moo-Generated XHTML)

	<div id="this.options.boxID">
		<div id="this.options.percentageID"></div>
	</div>
	<div id="this.options.displayID">{x}%</div>

This DIV structure is extremely simple and can be controlled completely by CSS.

这种DIV结构非常简单，可以由CSS完全控制。

CSS (The CSS)

	/* these selector names are based on what you provide to the class */
	
	/* example 1 */
	#box			{ border:1px solid #ccc; width:200px; height:20px; }
	#perc			{ background:#ccc; height:20px; }
	
	/* example 2 */
	#box2			{ background:url(progress-bar-back.gif) right center no-repeat; width:200px; height:20px; float:left; }
	#perc2			{ background:url(progress-bar.gif) right center no-repeat; height:20px; }
	#text			{ font-family:tahoma, arial, sans-serif; font-size:11px; color:#000; float:left; padding:3px 0 0 10px; }
	

You'll declare styles for the three generated XHTML elements. You'll like use background colors and background images. You will also want to define a width value for the outside box.

您将为三个生成的XHTML元素声明样式。 您会喜欢使用背景色和背景图像。 您还需要为外部框定义宽度值。

MooTools JavaScript：dwProgressBar (The MooTools JavaScript: dwProgressBar)

//class is in
var dwProgressBar = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		container: $$('body')[0],
		boxID:'',
		percentageID:'',
		displayID:'',
		startPercentage: 0,
		displayText: false,
		speed:10
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//create elements
		this.createElements();
	},
	
	//creates the box and percentage elements
	createElements: function() {
		var box = new Element('div', { id:this.options.boxID });
		var perc = new Element('div', { id:this.options.percentageID, 'style':'width:0px;' });
		perc.inject(box);
		box.inject(this.options.container);
		if(this.options.displayText) { 
			var text = new Element('div', { id:this.options.displayID });
			text.inject(this.options.container);
		}
		this.set(this.options.startPercentage);
	},
	
	//calculates width in pixels from percentage
	calculate: function(percentage) {
		return ($(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();
	},
	
	//animates the change in percentage
	animate: function(to) {
		$(this.options.percentageID).set('morph', { duration: this.options.speed, link:'cancel' }).morph({width:this.calculate(to.toInt())});
		if(this.options.displayText) { 
			$(this.options.displayID).set('text', to.toInt() + '%'); 
		}
	},
	
	//sets the percentage from its current state to desired percentage
	set: function(to) {
		this.animate(to);
	}
	
});

The class accepts the following options:

该类接受以下选项：

• container: element that the entire progress bar gets placed in

  container：放置整个进度条的元素

• boxID: the IDof the progress bar's containing DIV

  boxID：进度条包含DIV的ID

• percentageID: the ID of the progress bar's animated/sliding DIV

  percentID：进度条的动画/滑动DIV的ID

• displayID: the ID of the progress bar's "{x} %" text DIV

  displayID：进度条的“ {x}％”文本DIV的ID

• startPercentage: the percentage at which you'd like the progress bar to start at (defaults to 0)

  startPercentage：您希望进度条开始的百分比(默认为0)

• displayText: Boolean. Do you want the progress bar to show the percentage in text format too?

  displayText：布尔值。 您是否还希望进度条以文本格式显示百分比？

• speed: speed of the animation to the given percentage

  速度：动画速度到给定百分比

 

MooTools的用法 (MooTools Usage)

//once the DOM is ready
window.addEvent('domready', function() {
	
	/* create the progress bar for example 1 */
	pb = new dwProgressBar({
		container: $('put-bar-here'),
		startPercentage: 25,
		speed:1000,
		boxID: 'box',
		percentageID: 'perc'
	});
		
	/* create the progress bar for example 2 */
	pb2 = new dwProgressBar({
		container: $('put-bar-here2'),
		startPercentage: 10,
		speed:1000,
		boxID: 'box2',
		percentageID: 'perc2',
		displayID: 'text',
		displayText: true
	});
	
	/* move the first progress bar to 55% */
	pb.set(55);
	
	/* move the second progress bar to 89% */
	pb2.set(89);
		
});

All you need to do is create an instance of the dwProgressBar and pass your desired options. It's quick and easy. To move the progress bar, all you need to do is call the "set()" method, passing it the desired percentage.

您需要做的就是创建dwProgressBar的实例并传递所需的选项。 快速简便。 要移动进度条，您需要做的就是调用“ set()”方法，并向其传递所需的百分比。

实际用途 (Practical Uses)

You could use this progress bar for:

您可以将此进度栏用于：

• An image preloading script
  图像预加载脚本
• Form completion tracking
  表单完成追踪
• Internal goal tracking applications
  内部目标跟踪应用
• Anything you want!
  任何你想要的！

 

I've made the progress bar as flexible as possible by allowing the developer to format each generated DIV using CSS.

通过允许开发人员使用CSS格式化每个生成的DIV，我使进度条尽可能灵活。

View Demo 查看演示 Download 下载

Also, please feel free to make suggestions for the class. I may implement them in the future!

另外，请随时为课程提出建议。 我将来可能会实施它们！

翻译自: https://davidwalsh.name/progress-bar-animated-mootools

mootools