ISプランニングはデジタルとアナログの融合を目指します

Bootstrapのデザインを利用してみる

Bootstrap(Twitter Bootstrapではありません!)のデザイン性が非常に優れているので、これを利用してデザインを統一させる方法を書いてます。

サンプル

1.jQuery UIの「spinner」利用時にBootstrapのデザインを反映させます

2.<input type=”file”>のデザインにBootstrapを利用します

HTML

1.<input type="text" id="txt1">
2.<input type="file" id="file1">

JavaScript

// 1.jQuery UIのspinnerをBootstrap風に
$('#txt1').spinner({
  create: function() { bootstrap('spinner', 'txt1'); }
});

// 2.<input type="file">のデザインをBootstrap風に
bootstrap('file', 'file1');

//
// デザインをBootstrapに近づける関数
// bootstrap(type, id)
// type: spinner(jQuery UI) | file(input[type=file]
// id  : オブジェクトのID
//
function bootstrap(ui, id) {
	if(id == undefined) return;
	
	switch(ui) {
		case 'spinner':
			// jQuery UIの「spinner」を変更
			$('#'+id)
			.focus(function() {
				$(this).parent().addClass('form-focus');
			})
			.blur(function() {
				$(this).parent().removeClass('form-focus');
			})
			.parent().addClass('form-control').css({padding: '0', height: 'auto'});
			break;
		case 'file':
			// input[type=file]を変更
			var w = $('#'+id).outerWidth();
			var htm = '<div class="input-group" style="width:' + w + 'px">'
							+ '<span class="input-group-btn">'
							+ '<button type="button" class="btn btn-default" id="open-' + id + '"><span class="glyphicon glyphicon-folder-open"></span></button>'
							+ '</span>'
							+ '<input type="text" id="file-' + id + '" class="form-control" readonly style="cursor: pointer">'
							+ '</div>';
			
			$('#'+id)
			.css("display", "none")
			.parent().append(htm)
			.change(function() {
				var file = $('#'+id).prop("files")[0];
				$("#file-" + id).val(file.name);
			});
			
			$("#open-" + id + ", #file-" + id).click(function() {
				$("#"+id).click();
				$(this).blur();
			});
			break;
	}
}

StyleSheet

.form-focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
					box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

スタイルシートはBootstrapの「.form-control:focus」をそのままコピーしています。(spinner用)

タグ
, , , ,
トラックバックURL

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

ページTOPに戻る