jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

タブコントロール作成

概要
タブコントロール作成
div群をタブ形式で切り替え表示できるようにします。
実装例はトップページに設置。
使用方法
コメントを参考に実装します。
備考
業務ウェブアプリで表示項目が多い場合や入力項目が多い場合に縦に長くすると縦スクロールが大変ですが、タブ切り替えにすると画面内に収まり作業性が向上します。

/**
 * タブコントロール作成
 *
 * <div class="tabControl" alt="タブ文字1">
 *		...
 * </div>
 * <div class="tabControl" alt="タブ文字2">
 *		...
 * </div>
 * <div class="tabControl" alt="タブ文字3">
 *		...
 * </div>
 *
 * @auther ao-system
 */
(function(window,document){
	var tabControlArea = [];
	var tabControlButton = [];
	window.addEventListener('load',function(){init();},false);
	function init() {
		tabControlArea = document.getElementsByClassName('tabControl');
		initTabButton();
		initTabArea();
		for (var i = 0; i < tabControlArea.length; i++) {
			(function(i){
				tabControlButton[i].addEventListener('click',function(){tabClick(i);},false);
				tabControlButton[i].addEventListener('mouseover',function(){tabMouseover(i);},false);
				tabControlButton[i].addEventListener('mouseout',function(){tabMouseout(i);},false);
			})(i);
		}
		tabClick(0);
	}
	function initTabButton() {
		for (var i = 0; i < tabControlArea.length; i++) {
			var altElm = document.createTextNode(tabControlArea[i].getAttribute('alt'));
			tabControlButton[i] = document.createElement('div');
			tabControlButton[i].id = 'tabControlButton' + i;
			tabControlButton[i].style.width = '100px';
			tabControlButton[i].style.height = '24px';
			tabControlButton[i].style.fontSize = '13px';
			tabControlButton[i].style.lineHeight = '1em';
			tabControlButton[i].style.color = 'white';
			tabControlButton[i].style.textShadow = '-1px -1px 0 #3f3779';
			tabControlButton[i].style.borderRadius = '8px 8px 0 0';
			tabControlButton[i].style.borderStyle = 'solid';
			tabControlButton[i].style.borderWidth = '1px';
			tabControlButton[i].style.borderColor = '#a1a3b2';
			tabControlButton[i].style.paddingTop = '8px';
			tabControlButton[i].style.textAlign = 'center';
			tabControlButton[i].style.float = 'left';
			tabControlButton[i].style.cursor = 'pointer';
			tabControlButton[i].style.transition = '0.2s';
			tabControlButton[i].appendChild(altElm);
			tabControlArea[0].parentNode.insertBefore(tabControlButton[i],tabControlArea[0]);
		}
		var divClear = document.createElement('div');
		divClear.style.clear = 'both';
		tabControlArea[0].parentNode.insertBefore(divClear,tabControlArea[0]);
	}
	function initTabArea() {
		for (var i = 0; i < tabControlArea.length; i++) {
			tabControlArea[i].id = 'tabControlArea' + i;
			tabControlArea[i].style.borderStyle = 'solid';
			tabControlArea[i].style.borderWidth = '1px';
			tabControlArea[i].style.borderColor = '#a1a3b2';
			tabControlArea[i].style.padding = '0 10px 10px 10px';
		}
	}
	function tabClick(i) {
		tabAreaDisplayNone();
		tabControlArea[i].style.display = 'block';
		tabControlButton[i].style.background = 'linear-gradient(#939eff,#626ccc)';
	}
	function tabAreaDisplayNone() {
		for (var i = 0; i < tabControlArea.length; i++) {
			tabControlArea[i].style.display = 'none';
			tabControlButton[i].style.background = 'linear-gradient(#b3b6c7,#6f7189)';
		}
	}
	function tabMouseover(i) {
		tabControlButton[i].style.opacity = 0.8;
	}
	function tabMouseout(i) {
		tabControlButton[i].style.opacity = 1;
	}
})(window,document);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page