プログレスバーの実装

You have to login first to use 'My Favorites' feature

So far, noone has added to favorites

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" createForm="false">
	<xp:this.resources>
		<xp:styleSheet href="/ccprogressbar.css"></xp:styleSheet>
	</xp:this.resources>
	<xp:this.pageIcon><![CDATA[#{javascript:"/$icon"}]]></xp:this.pageIcon>
	<xp:this.pageTitle><![CDATA[#{javascript:"プログレスバー - " + @DbTitle()}]]></xp:this.pageTitle>
	<xp:panel styleClass="app" style="font-size:12pt;font-family:Meiryo UI">
		<xp:table style="width:100.0%">
			<xp:tr>
				<xp:td>
					<xp:label value="進捗：" id="label1"></xp:label>
					<xp:text escape="true" id="currentPercent"></xp:text>
				</xp:td>
			</xp:tr>
			<xp:tr>
				<xp:td>
					<xp:button id="btnIncrease" value="カウントアップ">
					</xp:button>
					<xp:button id="btnDecrease" value="カウントダウン">
					</xp:button>
				</xp:td>
			</xp:tr>
		</xp:table>
		<xp:panel styleClass="progress">
			<xp:div styleClass="progress-bar" id="pbar"></xp:div>
		</xp:panel>
		<xp:scriptBlock id="scriptBlock1">
			<xp:this.value><![CDATA[				
				var Progress = (function () {
					function Progress (p) {
						this.bar = document.getElementById( "#{id:pbar}" );
						this.percent = document.getElementById( "#{id:currentPercent}" );
						this.update(p);
					};
					Progress.prototype.update = function (i)  {
						document.getElementById( "#{id:pbar}" ).style.width = i + '%';
					};
					Progress.prototype.increaseLoop = function(maxCount, i) {
						if (i <= maxCount) {
							document.getElementById( "#{id:currentPercent}" ).innerHTML = i;
							this.update(i);
							// 50ミリ秒後に次の関数を実行
							setTimeout(function(){ Progress.prototype.increaseLoop(maxCount, ++i)}, 50);
						}
					};
					Progress.prototype.decreaseLoop = function(minCount, i) {
						if (i >= minCount) {
							document.getElementById( "#{id:currentPercent}" ).innerHTML = i;
							this.update(i);
							// 50ミリ秒後に次の関数を実行
							setTimeout(function(){ Progress.prototype.decreaseLoop(minCount, --i)}, 50);
						}
					};
					return Progress;
				}());
				var btnIncrease = document.getElementById( "#{id:btnIncrease}" );
				var btnDecrease = document.getElementById( "#{id:btnDecrease}" );
				var p = new Progress(0);
				// カウントアップボタンをクリックしたときの関数（100回ループ）
				btnIncrease.addEventListener( 'click', function(e) { p.increaseLoop(100, 0); });
				// カウントダウンボタンをクリックしたときの関数（100回ループ）
				btnDecrease.addEventListener('click', function (e) { p.decreaseLoop(0, 100); });
			]]></xp:this.value>
		</xp:scriptBlock>
	</xp:panel>
</xp:view>


-----以下はCSS-----


@charset "utf-8";

/* プログレスバーの大枠 */ 
.app {
	height: 200px;
	width: 500px;
	background-color: white;
	padding: 20px 20px 10px;
}
/* プログレスバーの枠組み（背景をつける） */
.progress {
	width: 100%;
	height: 30px;
	background-color: #F5F5F5;
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
/* プログレスバーの色とサイズ */
.progress-bar {
	transition: width 0.5s linear;
	height: 100%;
	background-color: #337AB7;
	border-radius: 4px;
}

Language	JavaScript (Client)
Author	guylocke
Submitted on	July 17, 2018 at 4:22 PM
Rating
Downloads	0
QAサイト